:recycle: devtool

demo/index.js

@@ -1,6 +1,5 @@
 import Vditor from '../src/index'
 import '../src/assets/scss/index.scss'
-
 window.vditor = new Vditor('vditor', {
   debugger: true,
   typewriterMode: true,

src/ts/devtools/index.ts

@@ -7,7 +7,7 @@ declare const echarts: {
 
 export class DevTools {
     public element: HTMLDivElement;
-    public ASTChart: IEChart;
+    private ASTChart: IEChart;
 
     constructor() {
         this.element = document.createElement("div");
@@ -68,6 +68,7 @@ export class DevTools {
                     show: true,
                 },
             });
+            this.ASTChart.resize();
         } catch (e) {
             (this.element.lastElementChild as HTMLElement).style.display = "none";
             this.element.firstElementChild.innerHTML = e;

src/ts/ir/process.ts

@@ -0,0 +1,43 @@
+import {isSafari} from "../util/compatibility";
+import {getMarkdown} from "../util/getMarkdown";
+
+export const processAfterRender = (vditor: IVditor, options = {
+    enableAddUndoStack: true,
+    enableHint: false,
+    enableInput: true,
+}) => {
+    let processAfterRenderTimeoutId: number
+    return () => {
+        clearTimeout(processAfterRenderTimeoutId);
+        processAfterRenderTimeoutId = window.setTimeout(() => {
+            if (vditor.wysiwyg.composingLock && isSafari()) {
+                // safari 中文输入遇到 addToUndoStack 会影响下一次的中文输入
+                return;
+            }
+            const text = getMarkdown(vditor);
+            if (typeof vditor.options.input === "function" && options.enableInput) {
+                vditor.options.input(text);
+            }
+
+            if (vditor.options.counter > 0) {
+                vditor.counter.render(text.length, vditor.options.counter);
+            }
+
+            if (vditor.options.cache) {
+                localStorage.setItem(`vditor${vditor.id}`, text);
+            }
+
+            if (vditor.devtools) {
+                vditor.devtools.renderEchart(vditor);
+            }
+
+            if (options.enableAddUndoStack) {
+                // TODO vditor.wysiwygUndo.addToUndoStack(vditor);
+            }
+
+            if (options.enableHint && vditor.hint) {
+                vditor.hint.render(vditor);
+            }
+        }, 800);
+    }
+}

src/ts/markdown/md2html.ts

@@ -9,8 +9,8 @@ export const loadLuteJs = (vditor: IVditor | string) => {
     //     cdn = vditor.options.cdn;
     // }
     // addScript(`${cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript");
-    // addScript(`/src/js/lute/lute.min.js`, "vditorLuteScript");
-    addScript(`http://192.168.80.35:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript");
+    addScript(`/src/js/lute/lute.min.js`, "vditorLuteScript");
+    // addScript(`http://192.168.80.35:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript");
 
     if (vditor && typeof vditor === "object" && !vditor.lute) {
         vditor.lute = Lute.New();

src/ts/toolbar/EditMode.ts

@@ -1,11 +1,12 @@
 import editSVG from "../../assets/icons/edit.svg";
 import {formatRender} from "../editor/formatRender";
+import {setPadding} from "../ui/initUI";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
 import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {MenuItem} from "./MenuItem";
 import {enableToolbar, hidePanel, hideToolbar, removeCurrentToolbar, showToolbar} from "./setToolbar";
-import {setPadding} from "../ui/initUI";
+import {processAfterRender} from "../ir/process";
 
 export const setEditMode = (event: Event, vditor: IVditor, type: string) => {
     event.preventDefault();
@@ -14,10 +15,14 @@ export const setEditMode = (event: Event, vditor: IVditor, type: string) => {
     if (vditor.currentMode === type) {
         return;
     }
-    if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
-        vditor.devtools.ASTChart.resize();
+    if (vditor.devtools) {
+        vditor.devtools.renderEchart(vditor);
     }
-    setPadding(vditor);
+    const allToolbar = ["headings", "bold", "italic", "strike", "line", "quote",
+        "list", "ordered-list", "check", "code", "inline-code", "upload", "link", "table", "record"];
+    removeCurrentToolbar(vditor.toolbar.elements, allToolbar);
+    enableToolbar(vditor.toolbar.elements, allToolbar);
+
     if (type === "ir") {
         hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
         vditor.editor.element.style.display = "none";
@@ -25,10 +30,16 @@ export const setEditMode = (event: Event, vditor: IVditor, type: string) => {
         vditor.wysiwyg.element.parentElement.style.display = "none";
         vditor.ir.element.parentElement.style.display = "block";
 
-        // const editorMD = getMarkdown(vditor);
+        const editorMD = getMarkdown(vditor);
         vditor.currentMode = "ir";
-        // TODO renderDomByMd(vditor, editorMD);
+        vditor.ir.element.innerHTML = vditor.lute.Md2VditorIRDOM(editorMD);
+        processAfterRender(vditor, {
+            enableAddUndoStack: true,
+            enableHint: false,
+            enableInput: false,
+        })
         vditor.ir.element.focus();
+        setPadding(vditor);
     } else if (type === "wysiwyg") {
         hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
         vditor.editor.element.style.display = "none";
@@ -41,6 +52,7 @@ export const setEditMode = (event: Event, vditor: IVditor, type: string) => {
         renderDomByMd(vditor, editorMD);
         vditor.wysiwyg.element.focus();
         vditor.wysiwyg.popover.style.display = "none";
+        setPadding(vditor);
     } else if (type === "markdown") {
         showToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
         vditor.wysiwyg.element.parentElement.style.display = "none";
@@ -58,11 +70,6 @@ export const setEditMode = (event: Event, vditor: IVditor, type: string) => {
         vditor.currentMode = "markdown";
         formatRender(vditor, wysiwygMD, undefined);
         vditor.editor.element.focus();
-
-        removeCurrentToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line",
-            "quote", "list", "ordered-list", "check", "code", "inline-code", "upload", "link", "table", "record"]);
-        enableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
-            "list", "ordered-list", "check", "code", "inline-code", "upload", "link", "table", "record"]);
     }
 };
 

src/ts/toolbar/Fullscreen.ts

@@ -34,8 +34,8 @@ export class Fullscreen extends MenuItem {
                 });
             }
 
-            if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
-                vditor.devtools.ASTChart.resize();
+            if (vditor.devtools) {
+                vditor.devtools.renderEchart(vditor);
             }
 
             if (menuItem.click) {

src/ts/types/index.d.ts

@@ -75,6 +75,12 @@ interface ILute {
 
     // ir 输入渲染
     SpinVditorIRDOM(markdown: string): string;
+
+    // ir 获取 md
+    VditorIRDOM2Md(html: string): string;
+
+    // md 转换为 ir
+    Md2VditorIRDOM(html: string): string;
 }
 
 declare const webkitAudioContext: {
@@ -273,7 +279,6 @@ interface IVditor {
     currentPreviewMode: keyof IPreviewMode;
     devtools?: {
         element: HTMLDivElement,
-        ASTChart: IEChart,
         renderEchart(vditor: IVditor): void,
     };
     toolbar?: {

src/ts/util/getMarkdown.ts

@@ -9,6 +9,8 @@ export const getMarkdown = (vditor: IVditor) => {
         const tempEditorElement = vditor.wysiwyg.element.cloneNode(true) as HTMLElement;
         addP2Li(tempEditorElement);
         return vditor.lute.VditorDOM2Md(tempEditorElement.innerHTML);
+    } else if (vditor.currentMode === "ir") {
+        return vditor.lute.VditorDOM2Md(vditor.ir.element.innerHTML);
     }
     return "";
 };

src/ts/util/setPreviewMode.ts

@@ -39,7 +39,7 @@ export const setPreviewMode = (mode: keyof IPreviewMode, vditor: IVditor) => {
             break;
     }
 
-    if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
-        vditor.devtools.ASTChart.resize();
+    if (vditor.devtools) {
+        vditor.devtools.renderEchart(vditor);
     }
 };

src/ts/wysiwyg/afterRenderEvent.ts

@@ -9,7 +9,7 @@ export const afterRenderEvent = (vditor: IVditor, options = {
     clearTimeout(vditor.wysiwyg.afterRenderTimeoutId);
     vditor.wysiwyg.afterRenderTimeoutId = window.setTimeout(() => {
         if (vditor.wysiwyg.composingLock && isSafari()) {
-            // safari 中文输入遇到 addToUndoStack 会影响下一次的中文输入，且在
+            // safari 中文输入遇到 addToUndoStack 会影响下一次的中文输入
             return;
         }
         const text = getMarkdown(vditor);

src/ts/wysiwyg/renderDomByMd.ts

@@ -1,14 +1,7 @@
-import {enableToolbar} from "../toolbar/setToolbar";
-import {removeCurrentToolbar} from "../toolbar/setToolbar";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {processCodeRender} from "./processCodeRender";
 
 export const renderDomByMd = (vditor: IVditor, md: string, enableInput = true) => {
-    const allToolbar = ["headings", "bold", "italic", "strike", "line", "quote",
-        "list", "ordered-list", "check", "code", "inline-code", "upload", "link", "table", "record"];
-    removeCurrentToolbar(vditor.toolbar.elements, allToolbar);
-    enableToolbar(vditor.toolbar.elements, allToolbar);
-
     const editorElement = vditor.wysiwyg.element;
     editorElement.innerHTML = vditor.lute.Md2VditorDOM(md);