update: use webpack raw-loader to load markdown snippet as string in …

…@/snippets/ directory

package.json

@@ -25,6 +25,7 @@
     "markdown-it-footnote": "^3.0.1",
     "markdown-it-katex": "^2.0.3",
     "markdown-it-named-headers": "^0.0.4",
+    "raw-loader": "^1.0.0",
     "text-statistics": "^0.1.1",
     "tippy.js": "^3.4.1",
     "vue": "^2.6.6",

src/components/NavMarkdown.vue

@@ -47,11 +47,13 @@
                 <div v-if="config.displaySnippets">
               <v-divider></v-divider>
               <v-subheader class="grey--text text--darken-1" style="font-size: 14px;">Markdown Snippets</v-subheader>
-              <v-list-tile v-for="snippet in snippets" :key="snippet.name" class="moreEntitites">
-                <v-list-tile-title v-on:click="getSnippet(snippet.markdown)" style="font-size: 14px;">
+
+
+              <v-list-tile v-for="snippet in config.snippets" :key="snippet.filename" class="moreEntitites">
+                <v-list-tile-title v-on:click="getSnippet(snippet.filename)" style="font-size: 14px;">
 
                   <v-icon style="width: 35px; font-size: 16px;">subject</v-icon>
-                  &nbsp;&nbsp;{{snippet.display}}</v-list-tile-title>
+                  &nbsp;&nbsp;{{snippet.name}}</v-list-tile-title>
 
               </v-list-tile>
               </div>
@@ -220,7 +222,6 @@ import { samples } from "@/samples";
 import { EventBus } from "@/event-bus.js";
 import config from "@/config";
 import { capitalize } from "@/filters";
-import snippets from "@/snippets";
 
 export default {
   created() {
@@ -248,6 +249,10 @@ export default {
       this.stylesheetSelection = this.stylesheetObj;
       this.loadStyleSheet(this.stylesheetObj.value);
     });
+
+    // let filename = "welcome";
+    // var test = require(`raw-loader!@/snippets/${filename}.md`);
+    // console.log(test);
   },
   methods: {
     getEntity(action) {
@@ -274,7 +279,9 @@ export default {
     loadSample(markdown) {
       EventBus.$emit("loadMarkdown", markdown);
     },
-    getSnippet(markdown) {
+    getSnippet(filename) {
+      let markdown = require(`raw-loader!@/snippets/${filename}`);
+
       EventBus.$emit("getSnippet", markdown);
     },
     loadMarkdown() {
@@ -334,7 +341,7 @@ export default {
       samples,
       dialog: false,
       capitalize,
-      snippets,
+
       modes: [],
       mode: "",
       modeIndex: null,

src/config/index.js

@@ -123,6 +123,7 @@ const config = {
    *
    */
   displaySnippets: true,
+  snippets: [{ name: "Welcome", filename: "welcome.md" }],
   /**
    *
    *

src/snippets/index.js → src/snippets/welcome.md

@@ -1,38 +1,31 @@
-const snippets = [
-  {
-    title: "welcome",
-    display: "Welcome",
-    markdown: `# Welcome to the ICJIA Markdown Editor
-    
+# Welcome to the ICJIA Markdown Editor
+
 Paragraphs are separated by a blank line.
-    
-2nd paragraph. *Italic*, **bold**
-    
+
+2nd paragraph. _Italic_, **bold**
+
 ## H2 Header
-    
+
 ### Itemized lists look like:
-    
-* this one
-* that one
-* the other one
-* indented four spaces
-    
+
+- this one
+- that one
+- the other one
+- indented four spaces
+
 ### Numbered Lists look like
 
 1. First ordered list item
 2. Another item
-    * Unordered sub-list. 
-1. Actual numbers don't matter, just that it's a number
-    1. Ordered sub-list
+   - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+   1. Ordered sub-list
 4. And another item.
-        
+
 # Footnotes
+
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget turpis nec justo volutpat efficitur. Sed ac sapien in magna faucibus faucibus eu sed nisl. Aenean non tristique odio, eu condimentum nisl. Suspendisse porttitor ante id lectus pharetra, id pretium odio lacinia. Vestibulum auctor volutpat pharetra. Nam rhoncus dapibus enim eget ornare.[^1] Phasellus convallis nisi a efficitur iaculis.[^2] Etiam tempus massa diam, sit amet lacinia metus suscipit sit amet. Nunc consequat ligula ac auctor mollis. Integer accumsan ornare neque, id dapibus elit. Ut accumsan lacinia metus nec luctus.[^3]
 [^1]: Here is the footnote.
 [^2]: Here is the second footnote.
 [^3]: Here's one with multiple blocks.
-      Subsequent paragraphs are indented to show that they belong to the previous footnote.`
-  }
-];
-
-export default snippets;
+Subsequent paragraphs are indented to show that they belong to the previous footnote.

src/views/Home.vue

@@ -73,7 +73,7 @@ import { samples } from "@/samples";
 import config from "@/config";
 import NavMarkdown from "@/components/NavMarkdown";
 import { EventBus } from "@/event-bus.js";
-import snippets from "@/snippets";
+
 let FileSaver = require("file-saver");
 let loremIpsum = require("lorem-ipsum");
 
@@ -123,7 +123,7 @@ export default {
         let markdown = localStorage.getItem(config.localStorageKey);
         this.editor.getDoc().setValue(markdown);
       } else {
-        let welcomeMarkdown = snippets[0].markdown;
+        let welcomeMarkdown = require(`raw-loader!@/snippets/welcome.md`);
         this.editor.getDoc().setValue(welcomeMarkdown);
       }
     },

vue.config.js

@@ -1,7 +1,10 @@
 module.exports = {
   chainWebpack: config => {
+    /**
+     * Import/Require file as string
+     */
     config.module
-      .rule("raw-loader")
+      .rule("raw")
       .test(/\.md$/i)
       .use("raw-loader")
       .loader("raw-loader")