@8btc/mditor 0.0.1

package/src/ts/sv/processKeydown.ts

@@ -0,0 +1,202 @@
+import {isCtrl} from "../util/compatibility";
+import {fixTab} from "../util/fixBrowserBehavior";
+import {hasClosestByAttribute} from "../util/hasClosest";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
+import {getEditorRange, getSelectPosition} from "../util/selection";
+import {inputEvent} from "./inputEvent";
+import {processAfterRender, processPreviousMarkers} from "./process";
+
+export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
+    vditor.sv.composingLock = event.isComposing;
+    if (event.isComposing) {
+        return false;
+    }
+
+    if (event.key.indexOf("Arrow") === -1 && event.key !== "Meta" && event.key !== "Control" && event.key !== "Alt" &&
+        event.key !== "Shift" && event.key !== "CapsLock" && event.key !== "Escape" && !/^F\d{1,2}$/.test(event.key)) {
+        vditor.undo.recordFirstPosition(vditor, event);
+    }
+    // 仅处理以下快捷键操作
+    if (event.key !== "Enter" && event.key !== "Tab" && event.key !== "Backspace" && event.key.indexOf("Arrow") === -1
+        && !isCtrl(event) && event.key !== "Escape") {
+        return false;
+    }
+    const range = getEditorRange(vditor);
+    let startContainer = range.startContainer;
+    if (range.startContainer.nodeType !== 3 && (range.startContainer as HTMLElement).tagName === "DIV") {
+        startContainer = range.startContainer.childNodes[range.startOffset - 1];
+    }
+    const textElement = hasClosestByAttribute(startContainer, "data-type", "text");
+
+    // blockquote
+    let blockquoteMarkerElement = hasClosestByAttribute(startContainer, "data-type", "blockquote-marker");
+    if (!blockquoteMarkerElement && range.startOffset === 0 && textElement && textElement.previousElementSibling &&
+        textElement.previousElementSibling.getAttribute("data-type") === "blockquote-marker") {
+        blockquoteMarkerElement = textElement.previousElementSibling as HTMLElement;
+    }
+    // 回车逐个删除 blockquote marker 标记
+    if (blockquoteMarkerElement) {
+        if (event.key === "Enter" && !isCtrl(event) && !event.altKey &&
+            blockquoteMarkerElement.nextElementSibling.textContent.trim() === "" &&
+            getSelectPosition(blockquoteMarkerElement, vditor.sv.element, range).start ===
+            blockquoteMarkerElement.textContent.length) {
+            if (blockquoteMarkerElement.previousElementSibling?.getAttribute("data-type") === "padding") {
+                // 列表中存在多行 BQ 时，标记回车需跳出列表
+                blockquoteMarkerElement.previousElementSibling.setAttribute("data-action", "enter-remove");
+            }
+            blockquoteMarkerElement.remove();
+            processAfterRender(vditor);
+            event.preventDefault();
+            return true;
+        }
+    }
+
+    // list item
+    const listMarkerElement = hasClosestByAttribute(startContainer, "data-type", "li-marker") as HTMLElement;
+    const taskMarkerElement = hasClosestByAttribute(startContainer, "data-type", "task-marker") as HTMLElement;
+    let listLastMarkerElement = listMarkerElement;
+    if (!listLastMarkerElement) {
+        if (taskMarkerElement && taskMarkerElement.nextElementSibling.getAttribute("data-type") !== "task-marker") {
+            listLastMarkerElement = taskMarkerElement;
+        }
+    }
+    if (!listLastMarkerElement && range.startOffset === 0 && textElement && textElement.previousElementSibling &&
+        (textElement.previousElementSibling.getAttribute("data-type") === "li-marker" ||
+            textElement.previousElementSibling.getAttribute("data-type") === "task-marker")) {
+        listLastMarkerElement = textElement.previousElementSibling as HTMLElement;
+    }
+    if (listLastMarkerElement) {
+        const startIndex = getSelectPosition(listLastMarkerElement, vditor.sv.element, range).start;
+        const isTask = listLastMarkerElement.getAttribute("data-type") === "task-marker";
+        let listFirstMarkerElement = listLastMarkerElement;
+        if (isTask) {
+            listFirstMarkerElement = listLastMarkerElement.previousElementSibling.previousElementSibling
+                .previousElementSibling as HTMLElement;
+        }
+        if (startIndex === listLastMarkerElement.textContent.length) {
+            // 回车清空列表标记符
+            if (event.key === "Enter" && !isCtrl(event) && !event.altKey && !event.shiftKey &&
+                listLastMarkerElement.nextElementSibling.textContent.trim() === "") {
+                if (listFirstMarkerElement.previousElementSibling?.getAttribute("data-type") === "padding") {
+                    listFirstMarkerElement.previousElementSibling.remove();
+                    inputEvent(vditor);
+                } else {
+                    if (isTask) {
+                        listFirstMarkerElement.remove();
+                        listLastMarkerElement.previousElementSibling.previousElementSibling.remove();
+                        listLastMarkerElement.previousElementSibling.remove();
+                    }
+                    listLastMarkerElement.nextElementSibling.remove();
+                    listLastMarkerElement.remove();
+                    processAfterRender(vditor);
+                }
+                event.preventDefault();
+                return true;
+            }
+            // 第一个 marker 后 tab 进行缩进
+            if (event.key === "Tab") {
+                if (event.shiftKey) {
+                    if (listFirstMarkerElement.previousElementSibling.getAttribute("data-type") === "padding") {
+                        listFirstMarkerElement.previousElementSibling.remove();
+                    }
+                } else {
+                    listFirstMarkerElement.insertAdjacentHTML("beforebegin",
+                        `<span data-type="padding">${listFirstMarkerElement.textContent.replace(/\S/g, " ")}</span>`);
+                }
+                if (/^\d/.test(listFirstMarkerElement.textContent)) {
+                    listFirstMarkerElement.textContent = listFirstMarkerElement.textContent.replace(/^\d{1,}/, "1");
+                    range.selectNodeContents(listLastMarkerElement.firstChild);
+                    range.collapse(false);
+                }
+                inputEvent(vditor);
+                event.preventDefault();
+                return true;
+            }
+        }
+    }
+
+    // tab
+    if (fixTab(vditor, range, event)) {
+        return true;
+    }
+
+    const blockElement = hasClosestByAttribute(startContainer, "data-block", "0");
+    const spanElement = hasClosestByTag(startContainer, "SPAN");
+    // 回车
+    if (event.key === "Enter" && !isCtrl(event) && !event.altKey && !event.shiftKey && blockElement) {
+        let isFirst = false;
+        const newLineMatch = blockElement.textContent.match(/^\n+/);
+        if (getSelectPosition(blockElement, vditor.sv.element).start <= (newLineMatch ? newLineMatch[0].length : 0)) {
+            // 允许段落开始换行
+            isFirst = true;
+        }
+        let newLineText = "\n";
+        if (spanElement) {
+            if (spanElement.previousElementSibling?.getAttribute("data-action") === "enter-remove") {
+                // https://github.com/Vanessa219/vditor/issues/596
+                spanElement.previousElementSibling.remove();
+                processAfterRender(vditor);
+                event.preventDefault();
+                return true;
+            } else {
+                newLineText += processPreviousMarkers(spanElement);
+            }
+        }
+        range.insertNode(document.createTextNode(newLineText));
+        range.collapse(false);
+        if (blockElement && blockElement.textContent.trim() !== "" && !isFirst) {
+            inputEvent(vditor);
+        } else {
+            processAfterRender(vditor);
+        }
+        event.preventDefault();
+        return true;
+    }
+
+    // 删除后光标前有 newline 的处理
+    if (event.key === "Backspace" && !isCtrl(event) && !event.altKey && !event.shiftKey) {
+        if (spanElement && spanElement.previousElementSibling?.getAttribute("data-type") === "newline" &&
+            getSelectPosition(spanElement, vditor.sv.element, range).start === 1 &&
+            // 飘号的处理需在 inputEvent 中，否则上下飘号对不齐
+            spanElement.getAttribute("data-type").indexOf("code-block-") === -1) {
+            // 光标在每一行的第一个字符后
+            range.setStart(spanElement, 0);
+            range.extractContents();
+            if (spanElement.textContent.trim() !== "") {
+                inputEvent(vditor);
+            } else {
+                processAfterRender(vditor);
+            }
+            event.preventDefault();
+            return true;
+        }
+        // 每一段第一个字符前
+        if (blockElement && getSelectPosition(blockElement, vditor.sv.element, range).start === 0 &&
+            blockElement.previousElementSibling) {
+            range.extractContents();
+            let previousLastElement = blockElement.previousElementSibling.lastElementChild;
+            if (previousLastElement.getAttribute("data-type") === "newline") {
+                previousLastElement.remove();
+                previousLastElement = blockElement.previousElementSibling.lastElementChild;
+            }
+            // 场景：末尾无法删除 [```\ntext\n```\n\n]
+            if (previousLastElement.getAttribute("data-type") !== "newline") {
+                previousLastElement.insertAdjacentHTML("afterend", blockElement.innerHTML);
+                blockElement.remove();
+            }
+            if (blockElement.textContent.trim() !== "" && !blockElement.previousElementSibling?.querySelector('[data-type="code-block-open-marker"]')) {
+                inputEvent(vditor);
+            } else {
+                if (previousLastElement.getAttribute("data-type") !== "newline") {
+                    // https://github.com/Vanessa219/vditor/issues/597
+                    range.selectNodeContents(previousLastElement.lastChild);
+                    range.collapse(false);
+                }
+                processAfterRender(vditor);
+            }
+            event.preventDefault();
+            return true;
+        }
+    }
+    return false;
+};

package/src/ts/tip/index.ts

@@ -0,0 +1,39 @@
+export class Tip {
+    public element: HTMLElement;
+
+    constructor() {
+        this.element = document.createElement("div");
+        this.element.className = "vditor-tip";
+    }
+
+    public show(text: string, time: number = 6000) {
+        this.element.className = "vditor-tip vditor-tip--show";
+        if (time === 0) {
+            this.element.innerHTML = `<div class="vditor-tip__content">${text}
+<div class="vditor-tip__close">X</div></div>`;
+            this.element.querySelector(".vditor-tip__close").addEventListener("click", () => {
+                this.hide();
+            });
+        } else {
+            this.element.innerHTML = `<div class="vditor-tip__content">${text}</div>`;
+            setTimeout(() => {
+                this.hide();
+            }, time);
+        }
+
+        // 需在动画结束后才能确定位置
+        this.element.removeAttribute("style")
+        setTimeout(() => {
+            const rect = this.element.getBoundingClientRect();
+            if (rect.top < 46) {
+                this.element.style.position = "fixed"
+                this.element.style.top = "46px"
+            }
+        }, 150);
+    }
+
+    public hide() {
+        this.element.className = "vditor-messageElementtip";
+        this.element.innerHTML = "";
+    }
+}

package/src/ts/toolbar/Both.ts

@@ -0,0 +1,28 @@
+import {Constants} from "../constants";
+import {setPreviewMode} from "../ui/setPreviewMode";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Both extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        if (vditor.options.preview.mode === "both") {
+            this.element.children[0].classList.add("vditor-menu--current");
+        }
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            const btnElement = this.element.firstElementChild;
+            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            event.preventDefault();
+            if (vditor.currentMode !== "sv") {
+                return;
+            }
+            if (vditor.options.preview.mode === "both") {
+                setPreviewMode("editor", vditor);
+            } else {
+                setPreviewMode("both", vditor);
+            }
+        });
+    }
+}

package/src/ts/toolbar/Br.ts

@@ -0,0 +1,8 @@
+export class Br {
+    public element: HTMLElement;
+
+    constructor() {
+        this.element = document.createElement("div");
+        this.element.className = "vditor-toolbar__br";
+    }
+}

package/src/ts/toolbar/CodeTheme.ts

@@ -0,0 +1,36 @@
+import {Constants} from "../constants";
+import {setCodeTheme} from "../ui/setCodeTheme";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+import {hidePanel, toggleSubMenu} from "./setToolbar";
+
+export class CodeTheme extends MenuItem {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+
+        const actionBtn = this.element.children[0] as HTMLElement;
+
+        const panelElement = document.createElement("div");
+        panelElement.className = `vditor-hint${menuItem.level === 2 ? "" : " vditor-panel--arrow"}`;
+        let innerHTML = "";
+        Constants.CODE_THEME.forEach((theme) => {
+            innerHTML += `<button>${theme}</button>`;
+        });
+        panelElement.innerHTML =
+            `<div style="overflow: auto;max-height:${window.innerHeight / 2}px">${innerHTML}</div>`;
+        panelElement.addEventListener(getEventName(), (event: MouseEvent & { target: HTMLElement }) => {
+            if (event.target.tagName === "BUTTON") {
+                hidePanel(vditor, ["subToolbar"]);
+                vditor.options.preview.hljs.style = event.target.textContent;
+                setCodeTheme(event.target.textContent, vditor.options.cdn);
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        });
+        this.element.appendChild(panelElement);
+
+        toggleSubMenu(vditor, panelElement, actionBtn, menuItem.level);
+    }
+}

package/src/ts/toolbar/ContentTheme.ts

@@ -0,0 +1,44 @@
+import { setContentTheme } from "../ui/setContentTheme";
+import { setTheme } from "../ui/setTheme";
+import { getEventName } from "../util/compatibility";
+import { MenuItem } from "./MenuItem";
+import { hidePanel, toggleSubMenu } from "./setToolbar";
+
+export class ContentTheme extends MenuItem {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+
+        const actionBtn = this.element.children[0] as HTMLElement;
+
+        const panelElement = document.createElement("div");
+        panelElement.className = `vditor-hint${menuItem.level === 2 ? "" : " vditor-panel--arrow"}`;
+        let innerHTML = "";
+        Object.keys(vditor.options.preview.theme.list).forEach((key) => {
+            innerHTML += `<button data-type="${key}">${vditor.options.preview.theme.list[key]}</button>`;
+        });
+        panelElement.innerHTML = `<div style="overflow: auto;max-height:${window.innerHeight / 2}px">${innerHTML}</div>`;
+        panelElement.addEventListener(
+            getEventName(),
+            (event: MouseEvent & { target: HTMLElement }) => {
+                if (event.target.tagName === "BUTTON") {
+                    hidePanel(vditor, ["subToolbar"]);
+                    vditor.options.preview.theme.current =
+                        event.target.getAttribute("data-type");
+                    setContentTheme(
+                        vditor.options.preview.theme.current,
+                        vditor.options.preview.theme.path
+                    );
+                    // 内容主题切换后，依据是否为 dark 同步根节点暗色类
+                    setTheme(vditor);
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            }
+        );
+        this.element.appendChild(panelElement);
+
+        toggleSubMenu(vditor, panelElement, actionBtn, menuItem.level);
+    }
+}

package/src/ts/toolbar/Counter.ts

@@ -0,0 +1,40 @@
+export class Counter {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor) {
+        this.element = document.createElement("span");
+        this.element.className = "vditor-counter vditor-tooltipped vditor-tooltipped__nw";
+
+        this.render(vditor, "");
+
+    }
+
+    public render(vditor: IVditor, mdText: string) {
+        let length = mdText.endsWith("\n") ? mdText.length - 1 : mdText.length;
+        if (vditor.options.counter.type === "text" && vditor[vditor.currentMode]) {
+            const tempElement = vditor[vditor.currentMode].element.cloneNode(true) as HTMLElement;
+            tempElement.querySelectorAll(".vditor-wysiwyg__preview").forEach((item) => {
+                item.remove();
+            });
+            length = tempElement.textContent.length;
+        }
+        if (typeof vditor.options.counter.max === "number") {
+            if (length > vditor.options.counter.max) {
+                this.element.className = "vditor-counter vditor-counter--error";
+            } else {
+                this.element.className = "vditor-counter";
+            }
+            this.element.innerHTML = `${length}/${vditor.options.counter.max}`;
+        } else {
+            this.element.innerHTML = `${length}`;
+        }
+        this.element.setAttribute("aria-label", vditor.options.counter.type);
+        if (vditor.options.counter.after) {
+            vditor.options.counter.after(length, {
+                enable: vditor.options.counter.enable,
+                max: vditor.options.counter.max,
+                type: vditor.options.counter.type,
+            });
+        }
+    }
+}

package/src/ts/toolbar/Custom.ts

@@ -0,0 +1,17 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Custom extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].innerHTML = menuItem.icon;
+        this.element.children[0].addEventListener(getEventName(), (event: Event & { currentTarget: HTMLElement }) => {
+            event.preventDefault();
+            if (event.currentTarget.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            menuItem.click(event, vditor);
+        });
+    }
+}

package/src/ts/toolbar/Devtools.ts

@@ -0,0 +1,28 @@
+import {Constants} from "../constants";
+import {setPadding} from "../ui/initUI";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Devtools extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.firstElementChild.addEventListener(getEventName(), (event) => {
+            const btnElement = this.element.firstElementChild;
+            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+
+            event.preventDefault();
+            if (btnElement.classList.contains("vditor-menu--current")) {
+                btnElement.classList.remove("vditor-menu--current");
+                vditor.devtools.element.style.display = "none";
+                setPadding(vditor);
+            } else {
+                btnElement.classList.add("vditor-menu--current");
+                vditor.devtools.element.style.display = "block";
+                setPadding(vditor);
+                vditor.devtools.renderEchart(vditor);
+            }
+        });
+    }
+}

package/src/ts/toolbar/Divider.ts

@@ -0,0 +1,8 @@
+export class Divider {
+    public element: HTMLElement;
+
+    constructor() {
+        this.element = document.createElement("div");
+        this.element.className = "vditor-toolbar__divider";
+    }
+}

package/src/ts/toolbar/EditMode.ts

@@ -0,0 +1,198 @@
+import {Constants} from "../constants";
+import {processAfterRender} from "../ir/process";
+import {getMarkdown} from "../markdown/getMarkdown";
+import {mathRender} from "../markdown/mathRender";
+import {processAfterRender as processSVAfterRender, processSpinVditorSVDOM} from "../sv/process";
+import {setPadding, setTypewriterPosition} from "../ui/initUI";
+import {getEventName, updateHotkeyTip} from "../util/compatibility";
+import {highlightToolbar} from "../util/highlightToolbar";
+import {processCodeRender} from "../util/processCode";
+import {renderToc} from "../util/toc";
+import {renderDomByMd} from "../wysiwyg/renderDomByMd";
+import {MenuItem} from "./MenuItem";
+import {
+    disableToolbar,
+    enableToolbar,
+    hidePanel,
+    hideToolbar,
+    removeCurrentToolbar,
+    showToolbar, toggleSubMenu,
+} from "./setToolbar";
+import {combineFootnote} from "../sv/combineFootnote";
+import { bindMathInteractionsInContainer } from "../markdown/mathContextMenu";
+
+export const setEditMode = (vditor: IVditor, type: string, event: Event | string) => {
+    let markdownText;
+    if (typeof event !== "string") {
+        hidePanel(vditor, ["subToolbar", "hint"]);
+        event.preventDefault();
+        markdownText = getMarkdown(vditor);
+    } else {
+        markdownText = event;
+    }
+    if (vditor.currentMode === type && typeof event !== "string") {
+        return;
+    }
+    if (vditor.devtools) {
+        vditor.devtools.renderEchart(vditor);
+    }
+    if (vditor.options.preview.mode === "both" && type === "sv") {
+        vditor.preview.element.style.display = "block";
+    } else {
+        vditor.preview.element.style.display = "none";
+    }
+
+    enableToolbar(vditor.toolbar.elements, Constants.EDIT_TOOLBARS);
+    removeCurrentToolbar(vditor.toolbar.elements, Constants.EDIT_TOOLBARS);
+    disableToolbar(vditor.toolbar.elements, ["outdent", "indent"]);
+
+    if (type === "ir") {
+        hideToolbar(vditor.toolbar.elements, ["both"]);
+        showToolbar(vditor.toolbar.elements, ["outdent", "indent", "outline", "insert-before", "insert-after"]);
+        vditor.sv.element.style.display = "none";
+        vditor.wysiwyg.element.parentElement.style.display = "none";
+        vditor.ir.element.parentElement.style.display = "block";
+
+        vditor.lute.SetVditorIR(true);
+        vditor.lute.SetVditorWYSIWYG(false);
+        vditor.lute.SetVditorSV(false);
+
+        vditor.currentMode = "ir";
+        vditor.ir.element.innerHTML = vditor.lute.Md2VditorIRDOM(markdownText);
+        processAfterRender(vditor, {
+            enableAddUndoStack: true,
+            enableHint: false,
+            enableInput: false,
+        });
+
+        setPadding(vditor);
+
+        vditor.ir.element.querySelectorAll(".vditor-ir__preview[data-render='2']").forEach((item: HTMLElement) => {
+            processCodeRender(item, vditor);
+        });
+        vditor.ir.element.querySelectorAll(".vditor-toc").forEach((item: HTMLElement) => {
+            mathRender(item, {
+                cdn: vditor.options.cdn,
+                math: vditor.options.preview.math,
+            });
+        });
+        // IR 模式：为数学公式绑定与 WYSIWYG 一致的交互（右键菜单 + 复制拦截）
+        bindMathInteractionsInContainer(vditor.ir.element);
+    } else if (type === "wysiwyg") {
+        hideToolbar(vditor.toolbar.elements, ["both"]);
+        showToolbar(vditor.toolbar.elements, ["outdent", "indent", "outline", "insert-before", "insert-after"]);
+        vditor.sv.element.style.display = "none";
+        vditor.wysiwyg.element.parentElement.style.display = "block";
+        vditor.ir.element.parentElement.style.display = "none";
+
+        vditor.lute.SetVditorIR(false);
+        vditor.lute.SetVditorWYSIWYG(true);
+        vditor.lute.SetVditorSV(false);
+
+        vditor.currentMode = "wysiwyg";
+
+        setPadding(vditor);
+        renderDomByMd(vditor, markdownText, {
+            enableAddUndoStack: true,
+            enableHint: false,
+            enableInput: false,
+        });
+        vditor.wysiwyg.element.querySelectorAll(".vditor-toc").forEach((item: HTMLElement) => {
+            mathRender(item, {
+                cdn: vditor.options.cdn,
+                math: vditor.options.preview.math,
+            });
+        });
+        vditor.wysiwyg.popover.style.display = "none";
+    } else if (type === "sv") {
+        showToolbar(vditor.toolbar.elements, ["both"]);
+        hideToolbar(vditor.toolbar.elements, ["outdent", "indent", "outline", "insert-before", "insert-after"]);
+        vditor.wysiwyg.element.parentElement.style.display = "none";
+        vditor.ir.element.parentElement.style.display = "none";
+        if (vditor.options.preview.mode === "both") {
+            vditor.sv.element.style.display = "block";
+        } else if (vditor.options.preview.mode === "editor") {
+            vditor.sv.element.style.display = "block";
+        }
+
+        vditor.lute.SetVditorIR(false);
+        vditor.lute.SetVditorWYSIWYG(false);
+        vditor.lute.SetVditorSV(true);
+
+        vditor.currentMode = "sv";
+        let svHTML = processSpinVditorSVDOM(markdownText, vditor);
+        if (svHTML === "<div data-block='0'></div>") {
+            // https://github.com/Vanessa219/vditor/issues/654 SV 模式 Placeholder 显示问题
+            svHTML = "";
+        }
+        vditor.sv.element.innerHTML = svHTML;
+        combineFootnote(vditor.sv.element)
+        processSVAfterRender(vditor, {
+            enableAddUndoStack: true,
+            enableHint: false,
+            enableInput: false,
+        });
+        setPadding(vditor);
+    }
+    vditor.undo.resetIcon(vditor);
+    if (typeof event !== "string") {
+        // 初始化不 focus
+        vditor[vditor.currentMode].element.focus();
+        highlightToolbar(vditor);
+    }
+    renderToc(vditor);
+    setTypewriterPosition(vditor);
+
+    if (vditor.toolbar.elements["edit-mode"]) {
+        vditor.toolbar.elements["edit-mode"].querySelectorAll("button").forEach((item) => {
+            item.classList.remove("vditor-menu--current");
+        });
+        vditor.toolbar.elements["edit-mode"].querySelector(`button[data-mode="${vditor.currentMode}"]`).classList.add("vditor-menu--current");
+    }
+
+    vditor.outline.toggle(vditor, vditor.currentMode !== "sv" && vditor.options.outline.enable, typeof event !== "string");
+};
+
+export class EditMode extends MenuItem {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+
+        const panelElement = document.createElement("div");
+        panelElement.className = `vditor-hint${menuItem.level === 2 ? "" : " vditor-panel--arrow"}`;
+        panelElement.innerHTML = `<button data-mode="wysiwyg">${window.VditorI18n.wysiwyg} &lt;${updateHotkeyTip("⌥⌘7")}></button>
+<button data-mode="ir">${window.VditorI18n.instantRendering} &lt;${updateHotkeyTip("⌥⌘8")}></button>
+<button data-mode="sv">${window.VditorI18n.splitView} &lt;${updateHotkeyTip("⌥⌘9")}></button>`;
+
+        this.element.appendChild(panelElement);
+
+        this._bindEvent(vditor, panelElement, menuItem);
+    }
+
+    public _bindEvent(vditor: IVditor, panelElement: HTMLElement, menuItem: IMenuItem) {
+        const actionBtn = this.element.children[0] as HTMLElement;
+        toggleSubMenu(vditor, panelElement, actionBtn, menuItem.level);
+
+        panelElement.children.item(0).addEventListener(getEventName(), (event: Event) => {
+            // wysiwyg
+            setEditMode(vditor, "wysiwyg", event);
+            event.preventDefault();
+            event.stopPropagation();
+        });
+
+        panelElement.children.item(1).addEventListener(getEventName(), (event: Event) => {
+            // ir
+            setEditMode(vditor, "ir", event);
+            event.preventDefault();
+            event.stopPropagation();
+        });
+
+        panelElement.children.item(2).addEventListener(getEventName(), (event: Event) => {
+            // markdown
+            setEditMode(vditor, "sv", event);
+            event.preventDefault();
+            event.stopPropagation();
+        });
+    }
+}