ui: use vditor as default markdown editor

packages/ui-default/components/cmeditor/index.js

@@ -1,65 +1,83 @@
 import _ from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 
+export const config = {
+  toolbar: [
+    'emoji', 'headings', 'bold', 'italic', 'strike', 'link', '|',
+    'list', 'ordered-list', 'check', 'outdent', 'indent', '|',
+    'quote', 'line', 'code', 'inline-code', '|',
+    'upload', 'record', 'table', '|',
+    'edit-mode', 'content-theme', 'code-theme', 'export', 'preview',
+  ],
+  mode: 'ir',
+  toolbarConfig: {
+    pin: true,
+  },
+  counter: {
+    enable: true,
+    max: 65536,
+  },
+};
+
 export default class CmEditor extends DOMAttachedObject {
   static DOMAttachKey = 'vjCmEditorInstance';
 
   constructor($dom, options = {}) {
     super($dom);
-    this.editor = null;
     this.options = options;
     this.init();
   }
 
   async init() {
-    const { default: VjCmEditor } = await import('./vjcmeditor');
-
-    const hasFocus = this.$dom.is(':focus');
-    const srcHeight = this.$dom.outerHeight();
-
-    this.editor = new VjCmEditor({
-      ...this.options,
-      element: this.$dom.get(0),
+    const { default: Vditor } = await import('vditor');
+    const { $dom } = this;
+    const hasFocus = $dom.is(':focus');
+    const origin = $dom.get(0);
+    const ele = document.createElement('div');
+    const value = $dom.text();
+    await new Promise((resolve) => {
+      this.editor = new Vditor(ele, {
+        ...config,
+        after: resolve,
+        input(v) { $dom.text(v); },
+        value,
+        cache: { id: Math.random().toString() },
+        upload: {
+          accept: 'image/*,.mp3, .wav, .zip',
+          url: '/api/upload/editor',
+          linkToImgUrl: '/api/upload/fetch',
+          filename(name) {
+            return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5.)]/g, '')
+              .replace(/[?\\/:|<>*[\]()$%{}@~]/g, '')
+              .replace('/\\s/g', '');
+          },
+        },
+      });
     });
-    this.moveToEnd();
-
-    const $editor = $(this.editor.wrapper);
-    $editor.css('height', srcHeight);
-    $editor.addClass('toolbar--visible');
-
-    if (hasFocus) {
-      this.focus();
-    }
-  }
-
-  isValid() {
-    return (this.editor !== null);
+    $(ele).addClass('textbox');
+    $dom.hide();
+    origin.parentElement.appendChild(ele);
+    if (hasFocus) this.focus();
+    this.isValid = true;
   }
 
   ensureValid() {
-    if (!this.isValid()) {
-      throw new Error('VjCmEditor is not loaded');
-    }
+    if (!this.isValid) throw new Error('Editor is not loaded');
   }
 
   value(...argv) {
     this.ensureValid();
     const ret = this.editor.value(...argv);
-    if (argv.length > 0) {
-      this.moveToEnd();
-    }
     return ret;
   }
 
+  destory() {
+    this.editor.destory();
+  }
+
   focus() {
     this.ensureValid();
-    this.editor.codemirror.focus();
-  }
-
-  moveToEnd() {
-    this.ensureValid();
-    const cm = this.editor.codemirror;
-    cm.setCursor(cm.lineCount(), 0);
+    this.editor.focus();
   }
 }