Export defaultContentParser

Author: dark-flames

src/components/ContentParser.js

@@ -0,0 +1,34 @@
+import { MarkdownParser } from './plugin/MarkdownParser'
+import md5 from 'md5'
+
+function contentParserFactory (parsers) {
+    return content => {
+        let newContent = content
+        const stringMap = []
+
+        parsers.forEach(function (parserConfig) {
+            let matches = newContent.match(parserConfig.reg)
+
+            while (matches !== null) {
+                const mapItem = {
+                    hash: md5(matches[0]),
+                    segment: matches[0],
+                    content: parserConfig.parser(matches)
+                }
+                newContent = newContent.replace(mapItem.segment, mapItem.hash)
+                stringMap.push(mapItem)
+
+                matches = newContent.match(parserConfig.reg)
+            }
+        })
+
+        newContent = MarkdownParser(newContent, stringMap)
+
+        stringMap.forEach(function (mapItem) {
+            newContent = newContent.replace(mapItem.hash, mapItem.content)
+        })
+        return newContent
+    }
+}
+
+export { contentParserFactory }

src/components/ContentParserFactory.js

@@ -15,7 +15,7 @@ function set (obj, config) {
 export const defaultConfig = {
     height: '500px',
     previewDisplay: 'normal',
-    fullscreen: false,
+    fullScreen: false,
     parsers: [
         KatexParser
     ],

src/components/DefaultConfig.js

@@ -1,5 +1,5 @@
 <template>
-    <div id="mp-luogu-markdown-editor" class="mp-editor-container" :class="{'mp-fullscreen': this.config.fullscreen}">
+    <div id="mp-luogu-markdown-editor" class="mp-editor-container" :class="{'mp-full-screen': this.config.fullScreen}">
         <div id="mp-editor-toolbar" class="mp-editor-toolbar">
             <toolbar @change="insert" @click="clickToolbar" @input="handleToolbarOperation"
                      :toolbarConfig="editorConfig.toolbarConfig" ref="toolbar"></toolbar>
@@ -21,7 +21,7 @@
                         'mp-editor-area': this.config.previewDisplay === 'normal',
                         'mp-editor-area-hide': this.config.previewDisplay === 'hide'
                 }">
-                <preview-area v-model="code" :parsers="editorConfig.parsers" ref="previewArea"></preview-area>
+                <preview-area v-model="code" :parser="contentParser" ref="previewArea"></preview-area>
             </div>
         </div>
         <div id="mp-editor-dialog">
@@ -58,7 +58,7 @@
         padding-bottom: 2px;
     }
 
-    .mp-fullscreen {
+    .mp-full-screen {
         position: fixed;
         z-index: 9997;
         top: 0;
@@ -74,7 +74,8 @@ import PreviewArea from './PreviewArea.vue'
 import Toolbar from './Toolbar.vue'
 import EditorDialog from './Dialog.vue'
 
-import {defaultConfig, getConfig} from './DefaultConfig'
+import { defaultConfig, getConfig } from './DefaultConfig'
+import { contentParserFactory } from './ContentParserFactory'
 
 export default {
     name: 'markdown-palettes',
@@ -97,7 +98,8 @@ export default {
             dialogRequest: {},
             insertCode: null,
             editorConfig: config,
-            editorHeight: config.height
+            editorHeight: config.height,
+            contentParser: contentParserFactory(config.parsers)
         }
     },
     mounted () {
@@ -136,12 +138,12 @@ export default {
             if (operation === 'hide') {
                 if (this.config.previewDisplay === 'normal') { this.config.previewDisplay = 'hide' } else { this.config.previewDisplay = 'normal' }
             }
-            if (operation === 'fullscreen') {
-                if (!this.config.fullscreen) {
-                    this.config.fullscreen = true
+            if (operation === 'fullScreen') {
+                if (!this.config.fullScreen) {
+                    this.config.fullScreen = true
                     this.editorHeight = (window.innerHeight - this.$refs.toolbar.$el.clientHeight).toString() + 'px'
                 } else {
-                    this.config.fullscreen = false
+                    this.config.fullScreen = false
                     this.editorHeight = this.editorConfig.height
                 }
             }

src/components/MarkdownPalettes.vue

@@ -79,17 +79,15 @@
 </style>
 
 <script>
-import { ContentParser } from './ContentParser'
-
 export default {
     name: 'preview-area',
     props: {
         value: {
             type: String,
             default: ''
         },
-        parsers: {
-            type: Array
+        parser: {
+            type: Function
         }
     },
     data () {
@@ -102,7 +100,7 @@ export default {
     },
     methods: {
         updateContent (newContent) {
-            this.content = ContentParser(newContent, this.parsers)
+            this.content = this.parser(newContent)
         }
     },
     watch: {

src/components/PreviewArea.vue

@@ -1,8 +1,8 @@
 export default {
-    name: 'fullscreen',
+    name: 'fullScreen',
     icon: 'fa-arrows-alt',
     title: '全屏',
     action: {
-        event: 'fullscreen'
+        event: 'fullScreen'
     }
 }

src/components/toolbar-button/btn-fullscreen.js

@@ -1,10 +1,13 @@
 import Vue from 'vue'
 import Editor from './components/MarkdownPalettes.vue'
+import { getConfig } from './components/DefaultConfig'
+import { contentParserFactory } from './components/ContentParserFactory'
 
 Vue.config.productionTip = false
 
 class MarkdownPalettes {
-    constructor (el) {
+    constructor (el, config = {}) {
+        this.config = config
         this.editor = new Vue({
             el: el,
             data () {
@@ -16,7 +19,8 @@ class MarkdownPalettes {
                 const vm = this
                 return createElement(Editor, {
                     props: {
-                        value: vm.code
+                        value: vm.code,
+                        config: this.config
                     },
                     on: {
                         input (event) {
@@ -35,6 +39,9 @@ class MarkdownPalettes {
             }
         })
     }
+    getContentParaser () {
+        return contentParserFactory(getConfig(this.config))
+    }
 }
 
 window.MarkdownPalettes = MarkdownPalettes

src/main.js

@@ -1,3 +1,10 @@
 import Editor from './components/MarkdownPalettes.vue'
 
+import { contentParserFactory } from './components/ContentParserFactory'
+import { defaultConfig } from './components/DefaultConfig'
+
 export default Editor
+
+const defaultContentParser = contentParserFactory(defaultConfig.parsers)
+
+export { Editor, defaultContentParser }