Update examples.

Author: jhuix

examples/.prettierrc

@@ -1,7 +1,8 @@
-{
-  "tabWidth": 2,
-  "useTabs": false,
-  "printWidth": 120,
-  "singleQuote": true,
-  "semi": true
-}
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 120,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "none"
+}

examples/package.json

@@ -11,30 +11,30 @@
   },
   "main": "dist/index.html",
   "dependencies": {
-    "@jhuix/vue-showdowns-editor": "^1.0.2",
-    "axios": "^0.19.0",
-    "core-js": "^3.4.8",
-    "vue": "^2.6.10",
-    "vue-router": "^3.1.3",
-    "vuex": "^3.1.2"
+    "@jhuix/vue-showdowns-editor": "^1.0.4",
+    "axios": "^0.20.0",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.12",
+    "vue-router": "^3.4.7",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
     "@jhuix/style-resources-loader": "^1.3.4",
-    "@vue/cli-plugin-babel": "^4.1.1",
-    "@vue/cli-plugin-eslint": "^4.1.1",
-    "@vue/cli-plugin-router": "^4.1.1",
-    "@vue/cli-plugin-vuex": "^4.1.1",
-    "@vue/cli-service": "^4.1.1",
+    "@vue/cli-plugin-babel": "^4.5.7",
+    "@vue/cli-plugin-eslint": "^4.5.7",
+    "@vue/cli-plugin-router": "^4.5.7",
+    "@vue/cli-plugin-vuex": "^4.5.7",
+    "@vue/cli-service": "^4.5.7",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "autoprefixer": "^9.7.3",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^5.16.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^5.0.0",
-    "prettier": "^1.19.1",
-    "stylus": "^0.54.7",
+    "autoprefixer": "^10.0.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.11.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-vue": "^7.0.1",
+    "prettier": "^2.1.2",
+    "stylus": "^0.54.8",
     "stylus-loader": "^3.0.2",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.12"
   },
   "browserslist": [
     "> 0.2%",

examples/src/main.js

@@ -16,5 +16,5 @@ Vue.config.productionTip = false;
 new Vue({
   store,
   router,
-  render: h => h(App)
+  render: (h) => h(App)
 }).$mount('#app');

examples/src/views/mainview.vue

@@ -10,8 +10,8 @@
     :markdown="mdDoc"
     :locale="locale"
     :previewExtensions="previewExtensions"
-    @toolClick="handlerToolClick"
-    @localeChanged="handlerLocaleChanged"
+    @tool-click="handlerToolClick"
+    @locale-changed="handlerLocaleChanged"
     ref="mdse"
   ></mdse-showdowns-editor>
 </template>
@@ -177,20 +177,20 @@ export default {
     }
     console.log(`the app locale is ${this.locale} and theme is ${this.theme}!`);
 
-    this.$nextTick(function() {
+    this.$nextTick(function () {
       this.$refs.mdse.addOutsideMenu(getOutsideMenu);
       this.$refs.mdse.setEditorTheme(this.theme);
       let that = this;
       var defHtml = axios.get('https://jhuix.github.io/showdowns/showdowns-features.md');
       defHtml
-        .then(function(res) {
+        .then(function (res) {
           that.mdDoc = res.data;
           return axios.get("https://jhuix.github.io/showdowns/Showdown's-Markdown-syntax.md");
         })
-        .then(function(res) {
+        .then(function (res) {
           that.mdDoc = that.mdDoc + '\n\n' + res.data;
         })
-        .catch(function(error) {
+        .catch(function (error) {
           console.log(error);
         });
     });

examples/src/views/preview.vue

@@ -20,7 +20,7 @@ export default {
       const content = JSON.parse(zlibcodec.zDecode(zcontent));
       this.outputHtml = content.html;
       if (content.cssLinks) {
-        content.cssLinks.map(href => {
+        content.cssLinks.map((href) => {
           const head = document.head || document.getElementsByTagName('head')[0];
           var link = document.createElement('link');
           link.rel = 'stylesheet';
@@ -29,7 +29,7 @@ export default {
         });
       }
       if (content.cssStyles) {
-        content.cssStyles.map(css => {
+        content.cssStyles.map((css) => {
           const head = document.head || document.getElementsByTagName('head')[0];
           let style = document.createElement('style');
           head.appendChild(style);

examples/vue.config.js

@@ -34,9 +34,9 @@ module.exports = {
       }
     }
   },
-  chainWebpack: config => {
+  chainWebpack: (config) => {
     const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
-    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)));
+    types.forEach((type) => addStyleResource(config.module.rule('stylus').oneOf(type)));
   },
 
   // 是否为 Babel 或 TypeScript 使用 thread-loader
@@ -50,7 +50,7 @@ function addStyleResource(rule) {
     .options({
       test: /mainview/,
       patterns: [],
-      injector: function(source, resources) {
+      injector: function (source, resources) {
         return `@import '../../node_modules/@jhuix/vue-showdowns-editor/dist/lib/vue-mdse.css';\n${source.trim()}`;
       }
     });