:recycle:

demo/index.js

@@ -4,6 +4,7 @@ import '../src/assets/scss/index.scss'
 window.vditor = new Vditor('vditor', {
   debugger: true,
   typewriterMode: true,
+  mode: 'ir',
   placeholder: 'placeholder',
   preview: {
     markdown: {

src/ts/ir/index.ts

@@ -1,5 +1,8 @@
+import {focusEvent, hotkeyEvent, selectEvent} from "../util/editorCommenEvent";
+
 class IR {
     public element: HTMLElement;
+    public composingLock: boolean = false;
 
     constructor(vditor: IVditor) {
         const divElement = document.createElement("div");
@@ -13,6 +16,31 @@ class IR {
         if (vditor.currentMode !== "ir") {
             this.element.parentElement.style.display = "none";
         }
+
+        this.bindEvent(vditor);
+
+        document.execCommand("DefaultParagraphSeparator", false, "p");
+
+        focusEvent(vditor, this.element);
+        hotkeyEvent(vditor, this.element);
+        selectEvent(vditor, this.element);
+    }
+
+    private input(vditor: IVditor, range: Range, event: InputEvent) {
+        this.element.innerHTML = vditor.lute.SpinVditorIRDOM(this.element.innerHTML);
+    }
+
+    private bindEvent(vditor: IVditor) {
+        this.element.addEventListener("compositionend", (event: InputEvent) => {
+            this.input(vditor, getSelection().getRangeAt(0).cloneRange(), event);
+        });
+
+        this.element.addEventListener("input", (event: InputEvent) => {
+            if (this.composingLock) {
+                return;
+            }
+            this.input(vditor, getSelection().getRangeAt(0).cloneRange(), event);
+        });
     }
 }
 

src/ts/toolbar/EditMode.ts

@@ -6,6 +6,64 @@ import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {MenuItem} from "./MenuItem";
 import {enableToolbar, hidePanel, hideToolbar, removeCurrentToolbar, showToolbar} from "./setToolbar";
 
+export const setEditMode = (event: Event, vditor: IVditor, type: string) => {
+    event.preventDefault();
+    // wysiwyg
+    hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
+    if (vditor.currentMode === type) {
+        return;
+    }
+    if (vditor.devtools && vditor.devtools.ASTChart && vditor.devtools.element.style.display === "block") {
+        vditor.devtools.ASTChart.resize();
+    }
+    if (type === "ir") {
+        hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
+        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();
+    } else if (type === "wysiwyg") {
+        hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
+        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";
+    } else if (type === "markdown") {
+        showToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
+        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"]);
+    }
+};
+
 export class EditMode extends MenuItem {
     public element: HTMLElement;
     public panelElement: HTMLElement;
@@ -42,83 +100,17 @@ export class EditMode extends MenuItem {
 
         this.panelElement.children.item(0).addEventListener(getEventName(), (event: Event) => {
             // wysiwyg
-            event.preventDefault();
-            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
-            if (vditor.currentMode === "wysiwyg") {
-                return;
-            }
-            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";
+            setEditMode(event, vditor, "wysiwyg");
         });
 
         this.panelElement.children.item(1).addEventListener(getEventName(), (event: Event) => {
             // ir
-            event.preventDefault();
-            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
-            if (vditor.currentMode === "ir") {
-                return;
-            }
-            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();
+            setEditMode(event, vditor, "ir");
         });
 
         this.panelElement.children.item(2).addEventListener(getEventName(), (event: Event) => {
             // markdown
-            event.preventDefault();
-            hidePanel(vditor, ["hint", "headings", "emoji", "edit-mode"]);
-            if (vditor.currentMode === "markdown") {
-                return;
-            }
-            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"]);
+            setEditMode(event, vditor, "markdown");
         });
     }
 }

src/ts/types/index.d.ts

@@ -72,6 +72,9 @@ interface ILute {
 
     // 将 md 转换为 wysiwyg
     Md2VditorDOM(markdown: string): string;
+
+    // ir 输入渲染
+    SpinVditorIRDOM(markdown: string): string;
 }
 
 declare const webkitAudioContext: {

src/ts/util/editorCommenEvent.ts

@@ -2,6 +2,7 @@ import {getSelectText} from "../editor/getSelectText";
 import {insertText} from "../editor/insertText";
 import {processKeydown as mdProcessKeydown} from "../editor/processKeydown";
 import {getCursorPosition} from "../hint/getCursorPosition";
+import {setEditMode} from "../toolbar/EditMode";
 import {hidePanel} from "../toolbar/setToolbar";
 import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
 import {processKeydown} from "../wysiwyg/processKeydown";
@@ -162,6 +163,17 @@ export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             event.preventDefault();
             return true;
         }
+
+        // toggle edit mode
+        if (isCtrl(event) && event.altKey && !event.shiftKey && /^Digit[7-9]$/.test(event.code)) {
+            if (event.code === "Digit7") {
+                setEditMode(event, vditor, "wysiwyg");
+            } else if (event.code === "Digit8") {
+                setEditMode(event, vditor, "ir");
+            } else if (event.code === "Digit9") {
+                setEditMode(event, vditor, "markdown");
+            }
+        }
     });
 };