:art: ad ir

src/index.ts

@@ -77,28 +77,21 @@ class Vditor {
         };
 
         if (mergedOptions.counter > 0) {
-            const counter = new Counter(this.vditor);
-            this.vditor.counter = counter;
+            this.vditor.counter = new Counter(this.vditor);
         }
 
-        if (mergedOptions.mode === "markdown") {
-            this.vditor.editor = new Editor(this.vditor);
-            this.vditor.undo = new Undo();
-        } else if (mergedOptions.mode === "wysiwyg") {
-            this.vditor.wysiwyg = new WYSIWYG(this.vditor);
-            this.vditor.wysiwygUndo = new WysiwygUndo();
-        } else if (mergedOptions.mode === "ir") {
-            this.vditor.ir = new IR(this.vditor);
-        }
+        this.vditor.editor = new Editor(this.vditor);
+        this.vditor.undo = new Undo();
+        this.vditor.wysiwyg = new WYSIWYG(this.vditor);
+        this.vditor.wysiwygUndo = new WysiwygUndo();
+        this.vditor.ir = new IR(this.vditor);
 
         if (mergedOptions.resize.enable) {
-            const resize = new Resize(this.vditor);
-            this.vditor.resize = resize;
+            this.vditor.resize = new Resize(this.vditor);
         }
 
         if (mergedOptions.toolbar) {
-            const toolbar: Toolbar = new Toolbar(this.vditor);
-            this.vditor.toolbar = toolbar;
+            this.vditor.toolbar = new Toolbar(this.vditor);
         }
 
         if (this.vditor.toolbar.elements.devtools) {
@@ -106,18 +99,15 @@ class Vditor {
         }
 
         if (this.vditor.editor && (this.vditor.toolbar.elements.preview || this.vditor.toolbar.elements.both)) {
-            const preview = new Preview(this.vditor);
-            this.vditor.preview = preview;
+            this.vditor.preview = new Preview(this.vditor);
         }
 
         if (mergedOptions.upload.url || mergedOptions.upload.handler) {
-            const upload = new Upload();
-            this.vditor.upload = upload;
+            this.vditor.upload = new Upload();
         }
 
         if (this.vditor.options.hint.at || this.vditor.toolbar.elements.emoji) {
-            const hint = new Hint();
-            this.vditor.hint = hint;
+            this.vditor.hint = new Hint();
         }
 
         loadLuteJs(this.vditor);

src/ts/editor/index.ts

@@ -18,7 +18,7 @@ class Editor {
         this.element.setAttribute("contenteditable", "true");
         this.element.setAttribute("spellcheck", "false");
 
-        if (vditor.currentMode === "wysiwyg" || vditor.currentPreviewMode === "preview") {
+        if (vditor.currentMode !== "markdown" || vditor.currentPreviewMode === "preview") {
             this.element.style.display = "none";
         }
 

src/ts/ir/index.ts

@@ -3,14 +3,14 @@ class IR {
 
     constructor(vditor: IVditor) {
         const divElement = document.createElement("div");
-        divElement.className = "vditor-wysiwyg";
+        divElement.className = "vditor-ir";
 
         divElement.innerHTML = `<pre class="vditor-reset" placeholder="${vditor.options.placeholder}"
  contenteditable="true" spellcheck="false"></pre>`;
 
         this.element = divElement.firstElementChild as HTMLPreElement;
 
-        if (vditor.currentMode === "markdown") {
+        if (vditor.currentMode !== "ir") {
             this.element.parentElement.style.display = "none";
         }
     }

src/ts/preview/index.ts

@@ -20,7 +20,7 @@ export class Preview {
         const previewElement = document.createElement("div");
         previewElement.className = vditor.options.classes.preview ? vditor.options.classes.preview : "vditor-reset";
         previewElement.style.maxWidth = vditor.options.preview.maxWidth + "px";
-        if (vditor.currentMode === "wysiwyg" || vditor.currentPreviewMode === "editor") {
+        if (vditor.currentMode !== "markdown" || vditor.currentPreviewMode === "editor") {
             this.element.style.display = "none";
         }
         this.element.appendChild(previewElement);

src/ts/toolbar/Both.ts

@@ -6,12 +6,7 @@ import {MenuItem} from "./MenuItem";
 export class Both extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
-        const hasWYSIWYG = vditor.options.toolbar.find((item: IMenuItem) => {
-            if (item.name === "wysiwyg") {
-                return true;
-            }
-        });
-        if (vditor.currentMode === "wysiwyg" && hasWYSIWYG) {
+        if (vditor.currentMode !== "markdown") {
             this.element.style.display = "none";
         }
         this.element.children[0].innerHTML = menuItem.icon || bothSVG;
@@ -24,7 +19,7 @@ export class Both extends MenuItem {
 
     public _bindEvent(vditor: IVditor) {
         this.element.children[0].addEventListener(getEventName(), (event) => {
-            if (vditor.currentMode === "wysiwyg") {
+            if (vditor.currentMode !== "markdown") {
                 return;
             }
             if (vditor.currentPreviewMode === "both") {

src/ts/toolbar/EditMode.ts

@@ -1,7 +1,10 @@
 import editSVG from "../../assets/icons/edit.svg";
+import {formatRender} from "../editor/formatRender";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
+import {getMarkdown} from "../util/getMarkdown";
+import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {MenuItem} from "./MenuItem";
-import {hidePanel} from "./setToolbar";
+import {enableToolbar, hidePanel, hideToolbar, removeCurrentToolbar, showToolbar} from "./setToolbar";
 
 export class EditMode extends MenuItem {
     public element: HTMLElement;
@@ -37,108 +40,85 @@ export class EditMode extends MenuItem {
             event.preventDefault();
         });
 
-        // this.element.children[0].addEventListener(getEventName(), function(event) {
-        //     if (this.classList.contains("vditor-menu--disabled")) {
-        //         return;
-        //     }
-        //     if (vditor.currentMode === "wysiwyg") {
-        //         vditor.toolbar.element.style.display = "block";
-        //         vditor.currentMode = "ir";
-        //     } else if (vditor.currentMode === "ir") {
-        //         vditor.toolbar.element.style.display = "none";
-        //         this.classList.remove("vditor-menu--current");
-        //         vditor.wysiwyg.element.parentElement.style.display = "none";
-        //         if (vditor.currentPreviewMode === "both") {
-        //             vditor.editor.element.style.display = "block";
-        //             vditor.preview.element.style.display = "block";
-        //         } else if (vditor.currentPreviewMode === "preview") {
-        //             vditor.preview.element.style.display = "block";
-        //         } else if (vditor.currentPreviewMode === "editor") {
-        //             vditor.editor.element.style.display = "block";
-        //         }
-        //         if (vditor.toolbar.elements.format) {
-        //             vditor.toolbar.elements.format.style.display = "block";
-        //         }
-        //         if (vditor.toolbar.elements.both) {
-        //             vditor.toolbar.elements.both.style.display = "block";
-        //         }
-        //         if (vditor.toolbar.elements.preview) {
-        //             vditor.toolbar.elements.preview.style.display = "block";
-        //         }
-        //         const wysiwygMD = getMarkdown(vditor);
-        //         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"]);
-        //     } else if (vditor.currentMode === "markdown") {
-        //         vditor.toolbar.element.style.display = "block";
-        //         vditor.currentMode = "wysiwyg";
-        //     }
-
-            // if (this.classList.contains("vditor-menu--current")) {
-            //     this.classList.remove("vditor-menu--current");
-            //     vditor.wysiwyg.element.parentElement.style.display = "none";
-            //     if (vditor.currentPreviewMode === "both") {
-            //         vditor.editor.element.style.display = "block";
-            //         vditor.preview.element.style.display = "block";
-            //     } else if (vditor.currentPreviewMode === "preview") {
-            //         vditor.preview.element.style.display = "block";
-            //     } else if (vditor.currentPreviewMode === "editor") {
-            //         vditor.editor.element.style.display = "block";
-            //     }
-            //     if (vditor.toolbar.elements.format) {
-            //         vditor.toolbar.elements.format.style.display = "block";
-            //     }
-            //     if (vditor.toolbar.elements.both) {
-            //         vditor.toolbar.elements.both.style.display = "block";
-            //     }
-            //     if (vditor.toolbar.elements.preview) {
-            //         vditor.toolbar.elements.preview.style.display = "block";
-            //     }
-            //     const wysiwygMD = getMarkdown(vditor);
-            //     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"]);
-            // } else {
-            //     this.classList.add("vditor-menu--current");
-            //     vditor.editor.element.style.display = "none";
-            //     vditor.preview.element.style.display = "none";
-            //     vditor.wysiwyg.element.parentElement.style.display = "block";
-            //
-            //     if (vditor.toolbar.elements.format) {
-            //         vditor.toolbar.elements.format.style.display = "none";
-            //     }
-            //     if (vditor.toolbar.elements.both) {
-            //         vditor.toolbar.elements.both.style.display = "none";
-            //     }
-            //     if (vditor.toolbar.elements.preview) {
-            //         vditor.toolbar.elements.preview.style.display = "none";
-            //     }
-            //     const editorMD = getMarkdown(vditor);
-            //     vditor.currentMode = "wysiwyg";
-            //     renderDomByMd(vditor, editorMD);
-            //     vditor.wysiwyg.element.focus();
-            //     vditor.wysiwyg.popover.style.display = "none";
-            // }
-
-        //     hidePanel(vditor, ["hint", "headings", "emoji"]);
-        //     if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
-        //         vditor.devtools.ASTChart.resize();
-        //     }
-        //
-        //     event.preventDefault();
-        // });
+        this.panelElement.children.item(0).addEventListener(getEventName(), (event: Event) => {
+            // wysiwyg
+            event.preventDefault();
+            if (vditor.currentMode === "wysiwyg") {
+                return;
+            }
+            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
+            hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
+            if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
+                vditor.devtools.ASTChart.resize();
+            }
+
+            vditor.editor.element.style.display = "none";
+            vditor.preview.element.style.display = "none";
+            vditor.wysiwyg.element.parentElement.style.display = "block";
+            vditor.ir.element.parentElement.style.display = "none";
+
+            const editorMD = getMarkdown(vditor);
+            vditor.currentMode = "wysiwyg";
+            renderDomByMd(vditor, editorMD);
+            vditor.wysiwyg.element.focus();
+            vditor.wysiwyg.popover.style.display = "none";
+        });
+
+        this.panelElement.children.item(1).addEventListener(getEventName(), (event: Event) => {
+            // ir
+            event.preventDefault();
+            if (vditor.currentMode === "ir") {
+                return;
+            }
+            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
+            hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
+            if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
+                vditor.devtools.ASTChart.resize();
+            }
+
+            vditor.editor.element.style.display = "none";
+            vditor.preview.element.style.display = "none";
+            vditor.wysiwyg.element.parentElement.style.display = "none";
+            vditor.ir.element.parentElement.style.display = "block";
+
+            // const editorMD = getMarkdown(vditor);
+            vditor.currentMode = "ir";
+            // TODO renderDomByMd(vditor, editorMD);
+            vditor.ir.element.focus();
+        });
+
+        this.panelElement.children.item(2).addEventListener(getEventName(), (event: Event) => {
+            // markdown
+            event.preventDefault();
+            if (vditor.currentMode === "markdown") {
+                return;
+            }
+            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
+            showToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
+            if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
+                vditor.devtools.ASTChart.resize();
+            }
+
+            vditor.wysiwyg.element.parentElement.style.display = "none";
+            vditor.ir.element.parentElement.style.display = "none";
+            if (vditor.currentPreviewMode === "both") {
+                vditor.editor.element.style.display = "block";
+                vditor.preview.element.style.display = "block";
+            } else if (vditor.currentPreviewMode === "preview") {
+                vditor.preview.element.style.display = "block";
+            } else if (vditor.currentPreviewMode === "editor") {
+                vditor.editor.element.style.display = "block";
+            }
+
+            const wysiwygMD = getMarkdown(vditor);
+            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/Emoji.ts

@@ -61,6 +61,9 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
                 event.preventDefault();
                 const value = element.getAttribute("data-value");
                 if (vditor.currentMode === "wysiwyg") {
+                    if (getSelection().rangeCount === 0) {
+                        vditor.wysiwyg.element.focus();
+                    }
                     if (!vditor.wysiwyg.element.contains(getSelection().getRangeAt(0).startContainer)) {
                         vditor.wysiwyg.element.focus();
                     }

src/ts/toolbar/Format.ts

@@ -8,12 +8,7 @@ import {MenuItem} from "./MenuItem";
 export class Format extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
-        const hasWYSIWYG = vditor.options.toolbar.find((item: IMenuItem) => {
-            if (item.name === "wysiwyg") {
-                return true;
-            }
-        });
-        if (vditor.currentMode === "wysiwyg" && hasWYSIWYG) {
+        if (vditor.currentMode !== "markdown") {
             this.element.style.display = "none";
         }
         this.element.children[0].innerHTML = menuItem.icon || formatSVG;

src/ts/toolbar/Preview.ts

@@ -6,12 +6,7 @@ import {MenuItem} from "./MenuItem";
 export class Preview extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
-        const hasWYSIWYG = vditor.options.toolbar.find((item: IMenuItem) => {
-            if (item.name === "wysiwyg") {
-                return true;
-            }
-        });
-        if (vditor.currentMode === "wysiwyg" && hasWYSIWYG) {
+        if (vditor.currentMode !== "markdown") {
             this.element.style.display = "none";
         }
         this.element.children[0].innerHTML = menuItem.icon || previewSVG;

src/ts/toolbar/setToolbar.ts

@@ -46,6 +46,28 @@ export const disableToolbar = (toolbar: { [key: string]: HTMLElement }, names: s
     });
 };
 
+export const hideToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        if (toolbar[name]) {
+            toolbar[name].style.display = "none";
+        }
+    });
+};
+
+export const showToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        if (toolbar[name]) {
+            toolbar[name].style.display = "block";
+        }
+    });
+};
+
 export const hidePanel = (vditor: IVditor, panels: string[]) => {
     if (vditor.toolbar.emojiPanelElement && panels.includes("emoji")) {
         vditor.toolbar.emojiPanelElement.style.display = "none";

src/ts/ui/initUI.ts

@@ -30,6 +30,10 @@ export const initUI = (vditor: IVditor) => {
         contentElement.appendChild(vditor.editor.element);
     }
 
+    if (vditor.ir) {
+        contentElement.appendChild(vditor.ir.element.parentElement);
+    }
+
     if (vditor.preview) {
         contentElement.appendChild(vditor.preview.element);
     }

src/ts/wysiwyg/index.ts

@@ -39,7 +39,7 @@ class WYSIWYG {
 
         this.popover = divElement.lastElementChild as HTMLDivElement;
 
-        if (vditor.currentMode === "markdown") {
+        if (vditor.currentMode !== "wysiwyg") {
             this.element.parentElement.style.display = "none";
         }
 

src/ts/wysiwyg/setHeading.ts

@@ -3,6 +3,9 @@ import {renderToc} from "./processMD";
 import {setRangeByWbr} from "./setRangeByWbr";
 
 export const setHeading = (vditor: IVditor, tagName: string) => {
+    if (getSelection().rangeCount === 0) {
+        vditor.wysiwyg.element.focus();
+    }
     const range = getSelection().getRangeAt(0);
     let blockElement = hasClosestBlock(range.startContainer);
     if (!blockElement) {