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

README.md

@@ -1,17 +1,77 @@
 <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)
 - [Documentation](https://code-farmer-i.github.io/vue-markdown-editor/)
-- [中文文档](https://code-farmer-i.github.io/vue-markdown-editor/zh/)
-- [国内文档镜像](http://ckang_1229.gitee.io/vue-markdown-editor/zh/)
+- [中文文档](http://ckang1229.gitee.io/vue-markdown-editor/zh/)
 - [Changelog](https://code-farmer-i.github.io/vue-markdown-editor/changelog.html)
 
 ## Communication
@@ -21,11 +81,15 @@ qq group: 798884474
 ## Install
 
 ```bash
-# use npm
+# Vue 2 use npm
 npm i @kangc/v-md-editor -S
-
-# use yarn
+# Vue 2 use yarn
 yarn add @kangc/v-md-editor
+
+# Vue 3 use npm
+npm i @kangc/v-md-editor@next -S
+# Vue 3 use yarn
+yarn add @kangc/v-md-editor@next
 ```
 
 ## Quick Start
@@ -37,11 +101,41 @@ import '@kangc/v-md-editor/lib/style/base-editor.css';
 import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
 import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
 
-VueMarkdownEditor.use(vuepressTheme);
+// Prism
+import Prism from 'prismjs';
+// highlight code
+import 'prismjs/components/prism-json';
+
+VueMarkdownEditor.use(vuepressTheme, {
+  Prism,
+});
 
 Vue.use(VueMarkdownEditor);
 ```
 
+## Quick Start In Vue3
+
+```js
+import { createApp } from 'vue';
+import VMdEditor from '@kangc/v-md-editor';
+import '@kangc/v-md-editor/lib/style/base-editor.css';
+import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
+import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
+
+// Prism
+import Prism from 'prismjs';
+// highlight code
+import 'prismjs/components/prism-json';
+
+VMdEditor.use(vuepressTheme, {
+  Prism,
+});
+
+const app = createApp(/*...*/);
+
+app.use(VMdEditor);
+```
+
 ## Usage
 
 ```html
@@ -60,6 +154,42 @@ Vue.use(VueMarkdownEditor);
 </script>
 ```
 
+## Usage Composition Api
+
+```html
+<template>
+  <v-md-editor v-model="text" height="400px"></v-md-editor>
+</template>
+
+<script>
+  import { ref } from 'vue';
+
+  export default {
+    setup() {
+      const text = ref('');
+
+      return {
+        text,
+      };
+    },
+  };
+</script>
+```
+
+## Sponsor
+
+Paypal
+
+[PayPal.Me](https://paypal.me/codefarmeri?locale.x=zh_XC)
+
+Alipay 支付宝
+
+<img src="https://user-images.githubusercontent.com/15082905/119299019-c583e500-bc90-11eb-8b34-4bff83da3745.png" width="140"/>
+
+WeChat Pay 微信
+
+<img src="https://user-images.githubusercontent.com/15082905/119299205-13005200-bc91-11eb-919d-543b1550bab6.png" width="140"/>
+
 ## Refrence
 
 - [ElementUi Utils clickoutside](https://github.com/ElemeFE/element/blob/dev/src/utils/clickoutside.js)

dev/App.vue

@@ -11,7 +11,31 @@
       @save="handleSave"
       @copy-code-success="handleCopyCodeSuccess"
       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"
@@ -22,32 +46,55 @@
 <script>
 import text from './text';
 import html from './html';
+import { defineComponent } from '@vue/runtime-core';
 
-export default {
-  data() {
-    return {
-      text,
-      html,
+export default defineComponent({
+  setup() {
+    const customToolbar = {
+      myButton: {
+        title: 'Options',
+        slot: true,
+        preventNativeClick: false,
+      },
+      my2ndButton: {
+        title: 'Settings',
+        slot: true,
+        action() {
+          console.log('opening the settings..');
+        },
+      },
     };
-  },
-  methods: {
-    handleFullscreenChange(v) {
+
+    const handleFullscreenChange = (v) => {
       console.log(v);
-    },
-    handleUploadImage(e, insertImage, files) {
+    };
+
+    const handleUploadImage = (e, insertImage, files) => {
       console.log(files);
 
       insertImage({
         url: '111',
         desc: '111',
       });
-    },
-    handleSave(v, html) {
+    };
+
+    const handleSave = (v, html) => {
       console.log(v, html);
-    },
-    handleCopyCodeSuccess(code) {
+    };
+
+    const handleCopyCodeSuccess = (code) => {
       console.log(code);
-    },
+    };
+
+    return {
+      text,
+      html,
+      customToolbar,
+      handleFullscreenChange,
+      handleUploadImage,
+      handleSave,
+      handleCopyCodeSuccess,
+    };
   },
-};
+});
 </script>

dev/main.js

@@ -1,10 +1,10 @@
 import App from './App';
 import { createApp } from 'vue';
 import PreviewHtml from '@/preview-html.js';
-// import VueMarkdownEditor from '@/base-editor';
-import VueMarkdownEditor from '@/codemirror-editor';
+import VueMarkdownEditor from '@/base-editor';
+// import VueMarkdownEditor from '@/codemirror-editor';
 // import Preview from '@/preview';
-import githubTheme from '@/theme/github/index';
+// import githubTheme from '@/theme/github/index';
 
 import createEmojiPlugin from '@/plugins/emoji/full';
 import '@/plugins/emoji/emoji';

package.json

@@ -74,7 +74,6 @@
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
     "@babel/plugin-transform-object-assign": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/runtime": "^7.9.2",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@vant/eslint-config": "2.0.0",

src/base-editor.vue

@@ -15,6 +15,15 @@
     @toolbar-menu-click="handleToolbarMenuClick"
     ref="contaner"
   >
+    <template
+      v-for="button of customSlotButtons"
+      #[button]="slotData"
+    >
+      <slot 
+        :name="button"
+        v-bind="slotData"
+      />
+    </template>
     <template #left-area>
       <scrollbar>
         <toc-nav
@@ -92,6 +101,12 @@ const component = {
       immediate: true,
     },
   },
+  computed: {
+    customSlotButtons() {
+      const toolbar = this.toolbar;
+      return Object.keys(toolbar).filter( btn => toolbar[btn].slot)
+    }
+  },
   data() {
     return {
       textEditorMinHeight: '',

src/codemirror-editor.vue

@@ -15,6 +15,15 @@
     @resize="handleContainerResize"
     ref="contaner"
   >
+    <template
+      v-for="button of customSlotButtons"
+      #[button]="slotData"
+    >
+      <slot 
+        :name="button"
+        v-bind="slotData"
+      />
+    </template>
     <template #left-area>
       <scrollbar>
         <toc-nav
@@ -81,6 +90,10 @@ const component = {
     Codemirror() {
       return this.$options.Codemirror;
     },
+    customSlotButtons() {
+      const toolbar = this.toolbar;
+      return Object.keys(toolbar).filter( btn => toolbar[btn].slot)
+    }
   },
   mounted() {
     if (!this.Codemirror) {