:art: md

demo/demo.js

@@ -65,6 +65,7 @@ const vditor = new Vditor('vditor', {
 })
 
 const vditor2 = new Vditor('vditor2', {
+  markdownUrl: '/api/markdown',
   upload: {
     url: '/api/upload/editor',
     linkToImgUrl: '/api/fetch-upload',

package-lock.json

@@ -868,17 +868,6 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@types/marked": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-0.6.0.tgz",
-      "integrity": "sha512-TxwhgR9VsIfRDJ3WwFokG8Xu+ea0nYGDRHdI783WJ983uffatz0ytIeUEIBOwPvRy241KRSNVyywQltuTqDh0w==",
-      "dev": true
-    },
-    "@types/node": {
-      "version": "10.12.21",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.21.tgz",
-      "integrity": "sha512-CBgLNk4o3XMnqMc0rhb6lc77IwShMEglz05deDcn2lQxyXEZivfwgYJu7SMha9V5XcrP6qZuevTHV/QrN2vjKQ=="
-    },
     "@types/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz",
@@ -5539,11 +5528,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "marked": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.6.0.tgz",
-      "integrity": "sha512-HduzIW2xApSXKXJSpCipSxKyvMbwRRa/TwMbepmlZziKdH8548WSoDP4SxzulEKjlo8BE39l+2fwJZuRKOln6g=="
-    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -10,8 +10,6 @@
     "dist/index.min.js"
   ],
   "dependencies": {
-    "@types/node": "^10.12.21",
-    "marked": "^0.6.0",
     "recordrtc": "^5.5.3",
     "turndown": "^5.0.3",
     "turndown-plugin-gfm": "^1.0.2"
@@ -19,7 +17,6 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
-    "@types/marked": "^0.6.0",
     "autoprefixer": "^9.4.6",
     "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^1.0.1",

src/index.ts

@@ -101,8 +101,8 @@ class VditorClass {
         this.vditor.editor.element.value = value
     }
 
-    renderPreview() {
-        this.vditor.markdown.render()
+    renderPreview(value?:string) {
+        this.vditor.markdown.render(this.vditor, value)
     }
 
     getCursorPosition() {

src/ts/editor/index.ts

@@ -1,7 +1,7 @@
 import TurndownService from 'turndown'
+import turndownPluginGfm from 'turndown-plugin-gfm'
 import {commandable} from '../util/commandable'
 import {uploadFiles} from "../upload/index";
-import {i18n} from "../i18n/index";
 
 class Editor {
     element: HTMLTextAreaElement
@@ -31,6 +31,8 @@ class Editor {
             if (vditor.options.userCache) {
                 localStorage.setItem(`vditor${vditor.id}`, vditor.editor.element.value)
             }
+
+            vditor.markdown.render(vditor)
         })
 
         this.element.addEventListener('focus', () => {
@@ -147,7 +149,6 @@ class Editor {
                     },
                 })
 
-                const turndownPluginGfm = require('turndown-plugin-gfm')
                 turndownService.use(turndownPluginGfm.gfm)
 
                 let markdownStr = turndownService.turndown(

src/ts/markdown/index.ts

@@ -7,18 +7,30 @@ export class Markdown {
             (vditor.options.classes.preview ? ' ' + vditor.options.classes.preview : '')
     }
 
-    render () {
-        let markedParse
-        if (!markedParse) {
-            import(/* webpackChunkName: "marked" */ 'marked')
-                .then(marked => {
-                    markedParse = marked.parser
-                })
-                .catch(err => {
-                    console.log('Failed to load marked', err);
-                });
+    render(vditor: Vditor, value?: string) {
+        if (this.element.style.display === 'none') {
+            return
         }
 
-        //markedParse('# Marked in the browser.')
+        if (value) {
+            this.element.innerHTML = value
+        } else if (vditor.options.markdownUrl) {
+            const xhr = new XMLHttpRequest()
+            xhr.open('POST', vditor.options.markdownUrl)
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === XMLHttpRequest.DONE) {
+                    if (xhr.status === 200) {
+                        const responseJSON = JSON.parse(xhr.responseText)
+                        this.element.innerHTML = responseJSON.html
+                    }
+                }
+            }
+
+            const formData = new FormData();
+            formData.append('markdownText', vditor.editor.element.value);
+            xhr.send(formData)
+        } else {
+            this.element.innerHTML = vditor.editor.element.value
+        }
     }
 }

src/ts/types/index.d.ts

@@ -11,6 +11,8 @@ declare module 'recordrtc/RecordRTC.js'
 
 declare module 'turndown'
 
+declare module 'turndown-plugin-gfm'
+
 interface Classes {
     preview?: string
 }
@@ -35,6 +37,7 @@ interface MenuItem {
 }
 
 interface Options {
+    markdownUrl?: string
     height?: number | string
     width?: number | string
     theme?: string

src/ts/util/OptionsClass.ts

@@ -13,6 +13,7 @@ export class OptionsClass {
         draggable: false,
         previewShow: false,
         counter: 0,
+        markdownUrl: '',
         upload: {
             url: '',
             max: 10 * 1024 * 1024,

webpack.start.js

@@ -16,6 +16,10 @@ module.exports = {
       '/api': {
         target: 'http://localhost:8080',
         pathRewrite: {'^/api' : ''}
+      },
+      '/hacpai': {
+        target: 'https://hacpai.com',
+        pathRewrite: {'^/hacpai' : ''}
       }
     }
   }