feat(toolbar): support custom content for buttons ( Vue 2.x )

.gitignore

@@ -5,5 +5,6 @@ package-lock.json
 # dist file
 dist
 lib
+.vscode/
 
 .DS_Store

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

README.md

@@ -1,11 +1,70 @@
 <h1 align="center">Markdown Editor built on Vue</h1>
+<h3 align="center">This is a fork of the <a href="https://github.com/code-farmer-i/vue-markdown-editor">original project</a></h3>
 
 <p align="center">
   <a href="https://npmcharts.com/compare/@kangc/v-md-editor?minimal=true"><img src="https://img.shields.io/npm/dm/@kangc/v-md-editor.svg?sanitize=true" alt="Downloads"></a>
   <a href="https://www.npmjs.com/package/@kangc/v-md-editor"><img src="https://img.shields.io/npm/v/@kangc/v-md-editor.svg?sanitize=true" alt="Version"></a>
   <a href="https://www.npmjs.com/package/@kangc/v-md-editor"><img src="https://img.shields.io/npm/l/@kangc/v-md-editor.svg?sanitize=true" alt="License"></a>
 </p>
 
+## What this fork adds
+
+This fork adds the possibility to use any custom component as a toolbar button. For example, we can obtain a customized toolbar like the one below:
+
+![image](https://user-images.githubusercontent.com/4061104/144724202-d9b679f1-78b4-4b25-82f0-ff70efa7da4a.png)
+
+by using a `toolbar` config like this:
+
+```js
+const customToolbar = {
+  myButton: {
+    title: 'Options',
+    slot: true, // this tells the editor to render the button using our custom template
+    preventNativeClick: false, // this allows elements like a select to work correctly
+  },
+  my2ndButton: {
+    title: 'Settings',
+    slot: true,
+    action() {
+      // you can still define the onClick action via the usual function
+      console.log('opening the settings..');
+    },
+  },
+};
+```
+
+Then we can provide custom templates for `myButton` and `my2ndButton`, like this:
+
+```js
+<v-md-editor
+  v-model="text"
+  height="500px"
+  :toolbar="customToolbar"
+  left-toolbar="undo redo | myButton my2ndButton"
+>
+  <template #myButton>
+    <select name="opts">
+      <option value="opt1">
+        option 1
+      </option>
+      <option value="opt2">
+        option 2
+      </option>
+    </select>
+  </template>
+  <template #my2ndButton>
+    <img
+      src="https://www.svgrepo.com/show/131974/settings.svg"
+      intrinsicsize="512 x 512"
+      width="16"
+      height="16"
+      srcset="https://www.svgrepo.com/show/131974/settings.svg 4x"
+      alt="Settings SVG Vector"
+    >
+  </template>
+</v-md-editor>
+```
+
 ## Links
 
 - [Demo](https://code-farmer-i.github.io/vue-markdown-editor/examples/base-editor.html)
@@ -129,7 +188,7 @@ WeChat Pay 微信
 
 <img src="https://user-images.githubusercontent.com/15082905/119299205-13005200-bc91-11eb-919d-543b1550bab6.png" width="140"/>
 
-## Refrence
+## Reference
 
 - [ElementUi Utils clickoutside](https://github.com/ElemeFE/element/blob/dev/src/utils/clickoutside.js)
 - [ElementUi Utils resize-event](https://github.com/ElemeFE/element/blob/dev/src/utils/resize-event.js)

build/webpack.dev.js

@@ -1,24 +1,30 @@
 const path = require('path');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const getBaseConfig = require('./webpack.base');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = merge(getBaseConfig(), {
+  mode: 'development',
   entry: {
     dev: './dev/main.js',
   },
   devServer: {
     open: true,
-    progress: true,
-    host: '0.0.0.0',
-    stats: 'errors-only',
-    disableHostCheck: true,
+    host: '127.0.0.1',
+    allowedHosts: 'all',
+    client: {
+      progress: true,
+    },
+    devMiddleware: {
+      stats: 'errors-only',
+    },
   },
   output: {
     path: path.join(__dirname, '../dev/dist'),
     publicPath: '/',
     chunkFilename: 'async_[name].js',
   },
+  devtool: 'source-map',
   optimization: {
     splitChunks: {
       cacheGroups: {

build/webpack.pkg.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const getBaseConfig = require('./webpack.base');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

build/webpack.theme.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const merge = require('webpack-merge');
+const {merge} = require('webpack-merge');
 const getBaseConfig = require('./webpack.base');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

dev/App.vue

@@ -12,17 +12,61 @@
       @copy-code-success="handleCopyCodeSuccess"
       @image-click="handleImageClick"
       ref="editor"
-    />
+      :toolbar="customToolbar"
+      left-toolbar="undo redo | myButton my2ndButton"
+    >
+      <template #myButton>
+        <select name="opts">
+          <option value="opt1">
+            option 1
+          </option>
+          <option value="opt2">
+            option 2
+          </option>
+        </select>
+      </template>
+      <template #my2ndButton>
+        <img
+          src="https://www.svgrepo.com/show/131974/settings.svg"
+          intrinsicsize="512 x 512"
+          width="16"
+          height="16"
+          srcset="https://www.svgrepo.com/show/131974/settings.svg 4x"
+          alt="Settings SVG Vector"
+        />
+      </template>
+    </v-md-editor>
+
+    <!-- <v-md-preview-html
+      :html="html"
+      preview-class="vuepress-markdown-body"
+    /> -->
   </div>
 </template>
 
 <script>
 import text from './text';
+import html from './html';
 
 export default {
   data() {
     return {
       text,
+      html,
+      customToolbar: {
+        myButton: {
+          title: 'Options',
+          slot: true,
+          preventNativeClick: false,
+        },
+        my2ndButton: {
+          title: 'Settings',
+          slot: true,
+          action() {
+            console.log('opening the settings..');
+          },
+        },
+      },
     };
   },
   methods: {
@@ -32,7 +76,7 @@ export default {
     handleFullscreenChange(v) {
       console.log(v);
     },
-    handleUploadImage(e, insertImage, files) {
+    handleUploadImage (e, insertImage, files) {
       console.log(files);
 
       insertImage({
@@ -48,4 +92,5 @@ export default {
     },
   },
 };
+
 </script>

dev/main.js

@@ -25,7 +25,7 @@ import 'codemirror/addon/scroll/simplescrollbars.css';
 import 'codemirror/lib/codemirror.css';
 // import Preview from '@/preview';
 import Prism from 'prismjs';
-import githubTheme from '@/theme/github/index';
+// import githubTheme from '@/theme/github/index';
 
 import createEmojiPlugin from '@/plugins/emoji/full';
 import '@/plugins/emoji/emoji';

dev/test-cdn.html

@@ -21,9 +21,13 @@
     <script src="../lib/base-editor.js"></script>
     <script src="../lib/theme/vuepress.js"></script>
     <script>
+      VMdTheme.install(VMdEditor)
       window.onload = function () {
         const vm = new Vue({
           el: '#app',
+          components: {
+            'v-md-editor': VMdEditor
+          }
         });
 
         console.log(vm);

package.json

@@ -44,22 +44,16 @@
     "release": "node build/release.js",
     "release:docs": "npm run build:pkg && npm run docs:build && gh-pages -d docs/.vuepress/dist"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
-    }
-  },
   "lint-staged": {
     "*.md": [
       "prettier --write"
     ],
     "src/**/*.{js,vue}": [
-      "eslint --fix",
+      "eslint --fix --no-color",
       "git add"
     ],
-    "src/**/*.{vue,css,scss}": [
-      "stylelint --fix",
+    "src/**/*.{css,scss}": [
+      "stylelint --fix --no-color",
       "git add"
     ]
   },
@@ -68,55 +62,57 @@
     "vue-template-compiler": "^2.6.11"
   },
   "devDependencies": {
-    "@babel/cli": "7.8.4",
-    "@babel/core": "7.9.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@babel/plugin-transform-object-assign": "^7.8.3",
-    "@babel/runtime": "^7.9.2",
-    "@commitlint/cli": "^8.3.5",
-    "@commitlint/config-conventional": "^8.3.4",
-    "@vant/eslint-config": "2.0.0",
+    "@babel/cli": "7.16.0",
+    "@babel/core": "7.16.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.5",
+    "@babel/plugin-transform-object-assign": "^7.16.5",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/runtime": "^7.16.5",
+    "@commitlint/cli": "^16.0.0",
+    "@commitlint/config-conventional": "^16.0.0",
+    "@vant/eslint-config": "^2.2.3",
     "@vant/stylelint-config": "^1.3.0",
-    "@vue/babel-preset-jsx": "^1.1.2",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "commitizen": "^4.0.3",
-    "conventional-changelog-cli": "^2.0.31",
-    "css-loader": "^3.4.2",
-    "cz-conventional-changelog": "^3.1.0",
+    "@vue/babel-preset-jsx": "^1.2.4",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "commitizen": "^4.2.4",
+    "conventional-changelog-cli": "^2.2.2",
+    "css-loader": "^6.5.1",
+    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^6.8.0",
-    "file-loader": "^6.0.0",
-    "fs-extra": "^9.0.0",
-    "gh-pages": "^2.2.0",
-    "html-webpack-plugin": "^4.0.4",
-    "http-server": "^0.12.1",
-    "husky": "^4.2.3",
-    "inquirer": "^7.1.0",
-    "lint-staged": "^10.1.2",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
-    "prettier": "^2.0.3",
-    "sass": "^1.26.3",
-    "sass-loader": "^8.0.2",
-    "semver": "^7.1.3",
-    "shelljs": "^0.8.3",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "gh-pages": "^3.2.3",
+    "html-webpack-plugin": "^5.5.0",
+    "http-server": "^14.0.0",
+    "husky": "^7.0.0",
+    "inquirer": "^8.2.0",
+    "lint-staged": "^12.1.4",
+    "mini-css-extract-plugin": "^2.4.5",
+    "node-sass": "^7.0.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss-loader": "^6.2.1",
+    "prettier": "^2.5.1",
+    "sass": "^1.45.1",
+    "sass-loader": "^12.4.0",
+    "semver": "^7.3.5",
+    "shelljs": "^0.8.4",
     "signale": "^1.4.0",
-    "style-loader": "^1.1.3",
-    "stylelint": "^13.3.0",
-    "stylelint-scss": "^3.16.1",
-    "typescript": "^3.8.3",
-    "url-loader": "^4.0.0",
-    "vue-loader": "^15.9.1",
-    "vue-server-renderer": "^2.6.12",
-    "vue-style-loader": "^4.1.2",
-    "vuepress": "^1.8.2",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "3.9.0",
-    "webpack-merge": "^4.2.2"
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.2.0",
+    "stylelint-scss": "^4.1.0",
+    "typescript": "^4.5.4",
+    "url-loader": "^4.1.1",
+    "vue-loader": "^15.9.8",
+    "vue-server-renderer": "^2.6.14",
+    "vue-style-loader": "^4.1.3",
+    "vuepress": "^1.9.5",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "4.7.1",
+    "webpack-merge": "^5.8.0"
   },
   "repository": {
     "type": "git",