From 3360e119a454a1630862206c0e68a36a9b2e04bf Mon Sep 17 00:00:00 2001
From: 0biWanKenobi <metal.rulesall@gmail.com>
Date: Sat, 4 Dec 2021 21:43:57 +0100
Subject: [PATCH 1/2] feat(toolbar): support custom content for buttons

before:
> we could use custom text, or
> we could use a menu w/ one of the provided icons

after:
- we can provide a template for custom toolbar
   items;
- the template name is dynamically computed
   from the `toolbar` prop;
- each `toolbar` prop has two new settings:
   - `slot`: true if we want to render a custom template
   - `preventNativeClick`: defaults to `true`, can be set to
     `false` to allow eg. a `select` to work properly
- tooltip works even w/ custom templates;
   this is possible by listening to `mousenter` event, instead
   of `mouseover`
---
 dev/App.vue                           | 81 +++++++++++++++++++++------
 dev/main.js                           |  6 +-
 package.json                          |  1 -
 src/base-editor.vue                   | 15 +++++
 src/codemirror-editor.vue             | 13 +++++
 src/components/container.vue          | 32 ++++++++++-
 src/components/toolbar-item/index.vue | 30 ++++++----
 src/components/toolbar.vue            |  9 ++-
 8 files changed, 152 insertions(+), 35 deletions(-)

diff --git a/dev/App.vue b/dev/App.vue
index 6f7ba2bb..73c2aab1 100644
--- a/dev/App.vue
+++ b/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>
diff --git a/dev/main.js b/dev/main.js
index b9a509d1..73d1ec7b 100644
--- a/dev/main.js
+++ b/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';
diff --git a/package.json b/package.json
index 30cc1d12..3d98b337 100644
--- a/package.json
+++ b/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",
diff --git a/src/base-editor.vue b/src/base-editor.vue
index 4da3cc5f..4bed8dd5 100644
--- a/src/base-editor.vue
+++ b/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: '',
diff --git a/src/codemirror-editor.vue b/src/codemirror-editor.vue
index 963bf06e..59d3c01a 100644
--- a/src/codemirror-editor.vue
+++ b/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) {
diff --git a/src/components/container.vue b/src/components/container.vue
index c4d38e5a..91b77212 100644
--- a/src/components/container.vue
+++ b/src/components/container.vue
@@ -44,7 +44,17 @@
           :disabled-menus="disabledMenus"
           @item-click="handleToolbarItemClick"
           @toolbar-menu-click="handleToolbarMenuClick"
-        />
+        >
+          <template
+            v-for="button of leftToolbarCustomSlots"
+            #[button]="slotData"
+          >
+            <slot
+              :name="button"
+              v-bind="slotData"
+            />
+          </template>
+        </editor-toolbar>
         <editor-toolbar
           class="v-md-editor__toolbar-right"
           :groups="rightToolbarGroup"
@@ -52,7 +62,17 @@
           :disabled-mens="disabledMenus"
           @item-click="handleToolbarItemClick"
           @toolbar-menu-click="handleToolbarMenuClick"
-        />
+        >
+          <template
+            v-for="button of rightToolbarCustomSlots"
+            #[button]="slotData"
+          >
+            <slot
+              :name="button"
+              v-bind="slotData"
+            />
+          </template>
+        </editor-toolbar>
       </div>
       <div class="v-md-editor__main">
         <div
@@ -119,9 +139,17 @@ export default {
     leftToolbarGroup() {
       return this.getToolbarConfig(this.leftToolbar);
     },
+    leftToolbarCustomSlots() {
+      const buttons =  this.leftToolbarGroup.flat();
+      return buttons.filter( btn => !!this.toolbars[btn].slot);
+    },
     rightToolbarGroup() {
       return this.getToolbarConfig(this.rightToolbar);
     },
+    rightToolbarCustomSlots() {
+      const buttons =  this.rightToolbarGroup.flat();
+      return buttons.filter( btn => !!this.toolbars[btn].slot);
+    },
     isPreviewMode() {
       return this.mode === EDITOR_MODE.PREVIEW;
     },
diff --git a/src/components/toolbar-item/index.vue b/src/components/toolbar-item/index.vue
index c3cf6ba2..c1fd917a 100644
--- a/src/components/toolbar-item/index.vue
+++ b/src/components/toolbar-item/index.vue
@@ -2,22 +2,23 @@
   <li
     class="v-md-editor__toolbar-item"
     :class="[
-      icon,
+      !$slots['customIcon'] ? icon : '',
       `v-md-editor__toolbar-item-${name}`,
       {
-        'v-md-editor__toolbar-item--active': active || menuActive
+        'v-md-editor__toolbar-item--active': active || menuActive,
       },
       {
-        'v-md-editor__toolbar-item--menu': hasMenu
-      }
+        'v-md-editor__toolbar-item--menu': hasMenu,
+      },
     ]"
     v-clickoutside:hideMenu="hideMenu"
-    @mousedown.prevent
+    @mousedown="preventNativeClick ? $event.preventDefault() : undefined"
     @mouseleave="handleHideTooltip"
-    @mousemove="showTooltip"
-    @click.stop="handleClick"
+    @mouseenter="showTooltip"
+    @click="handleClick"
   >
     {{ text }}
+    <slot name="icon" />
     <v-md-tooltip
       ref="tooltip"
       :text="title"
@@ -63,6 +64,10 @@ export default {
     icon: String,
     menus: [Array, Object],
     disabledMenus: Array,
+    preventNativeClick: {
+      type: Boolean,
+      default: true,
+    }
   },
   emits: ['click', 'menu-click'],
   data() {
@@ -97,6 +102,8 @@ export default {
       }
     },
     handleClick(e) {
+      if(this.preventNativeClick)
+        e.stopPropagation();
       this.$emit('click');
       this.menuActive ? this.hideMenu() : this.showMenu();
 
@@ -106,6 +113,9 @@ export default {
         this.showTooltip(e);
       }
     },
+    test() {
+      console.log("test")
+    },
     showTooltip(e) {
       const selfEl = this.$el;
       const { target } = e;
@@ -117,13 +127,13 @@ export default {
         return;
       }
 
-      if (this.timmer) clearTimeout(this.timmer);
+      if (this.timer) clearTimeout(this.timer);
 
       const selfElRect = selfEl.getBoundingClientRect();
       const x = e.clientX - selfElRect.left;
       const y = e.clientY - selfElRect.top;
 
-      this.timmer = setTimeout(() => {
+      this.timer = setTimeout(() => {
         this.$refs.tooltip?.show({
           x: x - 2,
           y: y + 20,
@@ -131,7 +141,7 @@ export default {
       }, 100);
     },
     handleHideTooltip() {
-      if (this.timmer) clearTimeout(this.timmer);
+      if (this.timer) clearTimeout(this.timer);
 
       this.$refs.tooltip.hide();
     },
diff --git a/src/components/toolbar.vue b/src/components/toolbar.vue
index baf15a9c..c104757e 100644
--- a/src/components/toolbar.vue
+++ b/src/components/toolbar.vue
@@ -8,12 +8,17 @@
         :title="getConfig(toolbarName, 'title')"
         :icon="getConfig(toolbarName, 'icon')"
         :text="getConfig(toolbarName, 'text')"
-        :active="getConfig(toolbarName,'active')"
+        :active="getConfig(toolbarName, 'active')"
         :menus="getConfig(toolbarName, 'menus')"
+        :prevent-native-click="getConfig(toolbarName, 'preventNativeClick')"
         :disabled-menus="disabledMenus"
         @click="$emit('item-click', toolbars[toolbarName])"
         @menu-click="$emit('toolbar-menu-click', $event)"
-      />
+      >
+        <template #icon>
+          <slot :name="toolbarName" />
+        </template>
+      </toolbar-item>
       <li
         v-if="idx !== groups.length - 1"
         class="v-md-editor__toolbar-divider"

From 36cf8b0d85db1b341d7d7a2d5476174ed5efe7ec Mon Sep 17 00:00:00 2001
From: Stefano La Terra <metal.rulesall@gmail.com>
Date: Sun, 5 Dec 2021 09:44:54 +0100
Subject: [PATCH 2/2] Update README.md

Tell the users that this is a fork. Also show what is the purpose of the fork, and how to use the new features.
---
 README.md | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 136 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index d0cfe629..b0c55e66 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,6 @@
 <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>
@@ -6,12 +8,70 @@
   <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)