Update showdowns deps to version 0.6.2 and support echarts and abcjs …

…plugin.

examples/src/views/mainview.vue

@@ -180,15 +180,17 @@ export default {
     this.$nextTick(function () {
       this.$refs.mdse.addOutsideMenu(getOutsideMenu);
       this.$refs.mdse.setEditorTheme(this.theme);
+      let context = '';
       let that = this;
       var defHtml = axios.get('https://jhuix.github.io/showdowns/showdowns-features.md');
       defHtml
         .then(function (res) {
-          that.mdDoc = res.data;
+          context = res.data;
           return axios.get("https://jhuix.github.io/showdowns/Showdown's-Markdown-syntax.md");
         })
         .then(function (res) {
-          that.mdDoc = that.mdDoc + '\n\n' + res.data;
+          context += '\n\n' + res.data;
+          that.mdDoc = context;
         })
         .catch(function (error) {
           console.log(error);

package.json

@@ -23,7 +23,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@jhuix/showdowns": "^0.5.7",
+    "@jhuix/showdowns": "^0.6.2",
     "vue-codemirror": "^4.0.6"
   },
   "devDependencies": {

src/components/Showdowns.vue

@@ -85,6 +85,7 @@ export default {
       },
       showdownsExtensions: {},
       cssTypes: {},
+      scripts: [],
       outputHtml: ''
     };
   },
@@ -170,8 +171,31 @@ export default {
         .makeHtml(this.inputMarkdown, (csstypes) => {
           that.cssTypes = csstypes;
         })
-        .then((html) => {
-          that.outputHtml = html;
+        .then((res) => {
+          if (typeof res === 'object') {
+            that.scripts = res.scripts;
+            that.outputHtml = res.html;
+          } else {
+            that.scripts = [];
+            that.outputHtml = res;
+          }
+          that.$nextTick(() => {
+            const scripts = that.scripts;
+            if (scripts && scripts.length > 0) {
+              window.dispatchEvent(
+                new CustomEvent('showdowns', {
+                  detail: {
+                    scripts: scripts
+                  }
+                })
+              );
+            }
+          });
+        })
+        .catch((err) => {
+          that.scripts = [];
+          that.outputHtml = '';
+          console.log(err);
         });
     }
   },

src/components/ShowdownsEditor.vue

@@ -343,7 +343,8 @@ export default {
       return {
         html: this.previewer ? this.previewer.$el.innerHTML : '',
         cssLinks: csslinks,
-        cssStyles: cssstyles
+        cssStyles: cssstyles,
+        scripts: this.previewer.scripts
       };
     },
     getI18N() {
@@ -438,6 +439,40 @@ export default {
           that.screenWidth = document.documentElement.clientWidth;
           that.getLastToolOffset();
         });
+
+        window.addEventListener('showdowns', (event) => {
+          // 所有资源加载完成
+          console.log('all markdown resources fully loaded');
+          const scripts = event.detail.scripts;
+          if (scripts && scripts.length > 0) {
+            for (var i = 0; i < scripts.length; ++i) {
+              const script = scripts[i];
+              const id = script.id;
+              const code = script.code;
+              let element = that.previewer.$el;
+              if (!element) {
+                element = document.getElementById(id);
+              } else {
+                element.id = 'showdowns-preview';
+              }
+              if (element) {
+                const eid = element.id;
+                const scriptID = `script-${id}`;
+                let script = document.querySelector(`#${eid} > #${scriptID}`);
+                if (script) {
+                  document.body.removeChild(script);
+                } else {
+                  script = document.createElement('script');
+                  script.id = scriptID;
+                }
+                script.type = 'text/javascript';
+                script.text = code;
+                element.appendChild(script);
+                console.log(`load preview script ${script.id} ` + script.type);
+              }
+            }
+          }
+        });
       }
     });
   }

vue.config.js

@@ -97,6 +97,7 @@ module.exports = {
   // 该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象。
   configureWebpack: {
     devtool: 'source-map',
+    performance: { hints: false },
     // 排除外部库以及不需要打包的 node_modules 第三方包（如使用CDN或引用本地JS库）
     // 作为一个合格成熟的 lib，应该学会让用你的人去安装第三方包
     externals: getExternals()
@@ -175,7 +176,7 @@ module.exports = {
     //}
   },
   // 是否为 Babel 或 TypeScript 使用 thread-loader
-  parallel: require('os').cpus().length > 1
+  parallel: false // require('os').cpus().length > 1
   // 向 PWA 插件传递选项
   //pwa: {},
   // 可以用来传递任何第三方插件选项