feat: add markdown component

Author: anncwb

package.json

@@ -30,6 +30,7 @@
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
+    "vditor": "^3.5.5",
     "vue": "^3.0.1",
     "vue-i18n": "^9.0.0-beta.4",
     "vue-router": "^4.0.0-beta.13",

src/components/Markdown/index.ts

@@ -0,0 +1,3 @@
+export { default as MarkDown } from './src/index.vue';
+
+export * from './src/types';

src/components/Markdown/src/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="markdown" ref="wrapRef" />
+</template>
+<script lang="ts">
+  import {
+    defineComponent,
+    ref,
+    onMounted,
+    unref,
+    PropType,
+    onUnmounted,
+    nextTick,
+    watchEffect,
+  } from 'vue';
+  import Vditor from 'vditor';
+  import 'vditor/dist/index.css';
+  export default defineComponent({
+    emits: ['update:value'],
+    props: {
+      height: {
+        type: Number as PropType<number>,
+        default: 360,
+      },
+      value: {
+        type: String,
+        default: '',
+      },
+    },
+    setup(props, { attrs, emit }) {
+      const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+      const vditorRef = ref<Nullable<Vditor>>(null);
+
+      const initedRef = ref(false);
+
+      function init() {
+        const wrapEl = unref(wrapRef);
+        if (!wrapEl) return;
+        const data = { ...attrs, ...props };
+        vditorRef.value = new Vditor(wrapEl, {
+          mode: 'sv',
+          preview: {
+            actions: [],
+          },
+          input: (v) => {
+            emit('update:value', v);
+          },
+          ...data,
+          cache: {
+            enable: false,
+          },
+        });
+        initedRef.value = true;
+      }
+
+      watchEffect(() => {
+        nextTick(() => {
+          const vditor = unref(vditorRef);
+          if (unref(initedRef) && props.value && vditor) {
+            vditor.setValue(props.value);
+          }
+        });
+      });
+
+      onMounted(() => {
+        nextTick(() => {
+          init();
+        });
+      });
+
+      onUnmounted(() => {
+        const vditorInstance = unref(vditorRef);
+        if (!vditorInstance) return;
+        vditorInstance.destroy();
+      });
+
+      return {
+        wrapRef,
+        getVditor: (): Vditor => vditorRef.value!,
+      };
+    },
+  });
+</script>

src/components/Markdown/src/types.ts

@@ -0,0 +1,4 @@
+import Vditor from 'vditor';
+export interface MarkDownActionType {
+  getVditor: () => Vditor;
+}

src/router/menus/modules/demo/editor.ts

@@ -0,0 +1,15 @@
+import type { MenuModule } from '/@/router/types.d';
+const menu: MenuModule = {
+  orderNo: 500,
+  menu: {
+    name: '编辑器',
+    path: '/editor',
+    children: [
+      {
+        path: '/markdown',
+        name: 'markdown编辑器',
+      },
+    ],
+  },
+};
+export default menu;

src/router/routes/modules/demo/editor.ts

@@ -0,0 +1,27 @@
+import type { AppRouteModule } from '/@/router/types';
+
+import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
+
+export default {
+  layout: {
+    path: '/editor',
+    name: 'Editor',
+    component: PAGE_LAYOUT_COMPONENT,
+    redirect: '/editor/markdown',
+    meta: {
+      icon: 'ant-design:table-outlined',
+      title: '编辑器',
+    },
+  },
+
+  routes: [
+    {
+      path: '/markdown',
+      name: 'MarkdownDemo',
+      component: () => import('/@/views/demo/editor/Markdown.vue'),
+      meta: {
+        title: 'markdown编辑器',
+      },
+    },
+  ],
+} as AppRouteModule;

src/views/demo/editor/Markdown.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="p-4">
+    <a-button @click="toggleTheme" class="mb-2" type="primary">黑暗主题</a-button>
+    <MarkDown v-model:value="value" ref="markDownRef" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { MarkDown, MarkDownActionType } from '/@/components/Markdown';
+  export default defineComponent({
+    components: { MarkDown },
+    setup() {
+      const markDownRef = ref<Nullable<MarkDownActionType>>(null);
+      const valueRef = ref(`
+# title
+
+# content
+`);
+
+      function toggleTheme() {
+        const markDown = unref(markDownRef);
+        if (!markDown) return;
+        const vditor = markDown.getVditor();
+        vditor.setTheme('dark');
+      }
+      return {
+        value: valueRef,
+        toggleTheme,
+        markDownRef,
+      };
+    },
+  });
+</script>

yarn.lock

@@ -2346,6 +2346,11 @@ detect-indent@6.0.0:
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
   integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
 
+diff-match-patch@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
+  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@@ -6980,6 +6985,13 @@ vary@^1.1.2:
   resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vditor@^3.5.5:
+  version "3.5.5"
+  resolved "https://registry.npmjs.org/vditor/-/vditor-3.5.5.tgz#03b7c965470fd434cd098e3f6ac6c7e65ca5a52a"
+  integrity sha512-NpBa0c1tK3jnH/E+rWkDO2x/bDx33KIWuThjF70gING58zuluxicGczuVb2KvdLxWoozJ6MaH5DQjj66Jct1QA==
+  dependencies:
+    diff-match-patch "^1.0.5"
+
 vfile-location@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/vfile-location/-/vfile-location-3.1.0.tgz#81cd8a04b0ac935185f4fce16f270503fc2f692f"