vditor 3.8.7

package/src/ts/toolbar/EditMode.ts

@@ -0,0 +1,193 @@
+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";
+
+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,
+            });
+        });
+    } 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;
+        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);
+};
+
+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();
+        });
+    }
+}

package/src/ts/toolbar/Emoji.ts

@@ -0,0 +1,75 @@
+import {getEventName} from "../util/compatibility";
+import {execAfterRender} from "../util/fixBrowserBehavior";
+import {getEditorRange, insertHTML, setSelectionFocus} from "../util/selection";
+import {MenuItem} from "./MenuItem";
+import {toggleSubMenu} from "./setToolbar";
+
+export class Emoji extends MenuItem {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        const panelElement = document.createElement("div");
+        panelElement.className = "vditor-panel vditor-panel--arrow";
+
+        let commonEmojiHTML = "";
+        Object.keys(vditor.options.hint.emoji).forEach((key) => {
+            const emojiValue = vditor.options.hint.emoji[key];
+            if (emojiValue.indexOf(".") > -1) {
+                commonEmojiHTML += `<button data-value=":${key}: " data-key=":${key}:"><img
+data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${emojiValue}"/></button>`;
+            } else {
+                commonEmojiHTML += `<button data-value="${emojiValue} "
+ data-key="${key}"><span class="vditor-emojis__icon">${emojiValue}</span></button>`;
+            }
+        });
+
+        const tailHTML = `<div class="vditor-emojis__tail">
+    <span class="vditor-emojis__tip"></span><span>${vditor.options.hint.emojiTail || ""}</span>
+</div>`;
+
+        panelElement.innerHTML = `<div class="vditor-emojis" style="max-height: ${
+            vditor.options.height === "auto" ? "auto" : vditor.options.height as number - 80
+        }px">${commonEmojiHTML}</div>${tailHTML}`;
+
+        this.element.appendChild(panelElement);
+
+        toggleSubMenu(vditor, panelElement, this.element.children[0], menuItem.level);
+        this._bindEvent(vditor, panelElement);
+    }
+
+    public _bindEvent(vditor: IVditor, panelElement: HTMLElement) {
+        panelElement.querySelectorAll(".vditor-emojis button").forEach((element: HTMLElement) => {
+            element.addEventListener(getEventName(), (event: Event) => {
+                event.preventDefault();
+                const value = element.getAttribute("data-value");
+                const range = getEditorRange(vditor);
+                let html = value;
+                if (vditor.currentMode === "wysiwyg") {
+                    html = vditor.lute.SpinVditorDOM(value);
+                } else if (vditor.currentMode === "ir") {
+                    html = vditor.lute.SpinVditorIRDOM(value);
+                }
+                if (value.indexOf(":") > -1 && vditor.currentMode !== "sv") {
+                    const tempElement = document.createElement("div");
+                    tempElement.innerHTML = html;
+                    html = tempElement.firstElementChild.firstElementChild.outerHTML + " ";
+                    insertHTML(html, vditor);
+                } else {
+                    range.extractContents();
+                    range.insertNode(document.createTextNode(value));
+                }
+                range.collapse(false);
+                setSelectionFocus(range);
+                panelElement.style.display = "none";
+                execAfterRender(vditor);
+            });
+            element.addEventListener("mouseover", (event: Event) => {
+                if ((event.target as HTMLElement).tagName === "BUTTON") {
+                    panelElement.querySelector(".vditor-emojis__tip").innerHTML =
+                        (event.target as HTMLElement).getAttribute("data-key");
+                }
+            });
+        });
+    }
+}

package/src/ts/toolbar/Export.ts

@@ -0,0 +1,41 @@
+import {exportHTML, exportMarkdown, exportPDF} from "../export";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+import {hidePanel, toggleSubMenu} from "./setToolbar";
+
+export class Export 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"}`;
+        panelElement.innerHTML = `<button data-type="markdown">Markdown</button>
+<button data-type="pdf">PDF</button>
+<button data-type="html">HTML</button>`;
+        panelElement.addEventListener(getEventName(), (event: MouseEvent & { target: HTMLElement }) => {
+            const btnElement = event.target;
+            if (btnElement.tagName === "BUTTON") {
+                switch (btnElement.getAttribute("data-type")) {
+                    case "markdown":
+                        exportMarkdown(vditor);
+                        break;
+                    case "pdf":
+                        exportPDF(vditor);
+                        break;
+                    case "html":
+                        exportHTML(vditor);
+                        break;
+                    default:
+                        break;
+                }
+                hidePanel(vditor, ["subToolbar"]);
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        });
+        this.element.appendChild(panelElement);
+        toggleSubMenu(vditor, panelElement, actionBtn, menuItem.level);
+    }
+}

package/src/ts/toolbar/Fullscreen.ts

@@ -0,0 +1,61 @@
+import {setPadding, setTypewriterPosition} from "../ui/initUI";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Fullscreen extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this._bindEvent(vditor, menuItem);
+    }
+
+    public _bindEvent(vditor: IVditor, menuItem: IMenuItem) {
+        this.element.children[0].addEventListener(getEventName(), function(event) {
+            event.preventDefault();
+            if (vditor.element.className.includes("vditor--fullscreen")) {
+                if (!menuItem.level) {
+                    this.innerHTML = menuItem.icon;
+                }
+                vditor.element.style.zIndex = "";
+                document.body.style.overflow = "";
+                vditor.element.classList.remove("vditor--fullscreen");
+                Object.keys(vditor.toolbar.elements).forEach((key) => {
+                    const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;
+                    if (svgElement) {
+                        svgElement.className = svgElement.className.replace("__s", "__n");
+                    }
+                });
+                if (vditor.counter) {
+                    vditor.counter.element.className = vditor.counter.element.className.replace("__s", "__n");
+                }
+            } else {
+                if (!menuItem.level) {
+                    this.innerHTML = '<svg><use xlink:href="#vditor-icon-contract"></use></svg>';
+                }
+                vditor.element.style.zIndex = vditor.options.fullscreen.index.toString();
+                document.body.style.overflow = "hidden";
+                vditor.element.classList.add("vditor--fullscreen");
+                Object.keys(vditor.toolbar.elements).forEach((key) => {
+                    const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;
+                    if (svgElement) {
+                        svgElement.className = svgElement.className.replace("__n", "__s");
+                    }
+                });
+                if (vditor.counter) {
+                    vditor.counter.element.className = vditor.counter.element.className.replace("__n", "__s");
+                }
+            }
+
+            if (vditor.devtools) {
+                vditor.devtools.renderEchart(vditor);
+            }
+
+            if (menuItem.click) {
+                menuItem.click(event, vditor);
+            }
+
+            setPadding(vditor);
+
+            setTypewriterPosition(vditor);
+        });
+    }
+}

package/src/ts/toolbar/Headings.ts

@@ -0,0 +1,69 @@
+import {Constants} from "../constants";
+import {processHeading} from "../ir/process";
+import {processHeading as processHeadingSV} from "../sv/process";
+import {getEventName, updateHotkeyTip} from "../util/compatibility";
+import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
+import {removeHeading, setHeading} from "../wysiwyg/setHeading";
+import {MenuItem} from "./MenuItem";
+import {hidePanel} from "./setToolbar";
+
+export class Headings extends MenuItem {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+
+        const panelElement = document.createElement("div");
+        panelElement.className = "vditor-hint vditor-panel--arrow";
+        panelElement.innerHTML = `<button data-tag="h1" data-value="# ">${window.VditorI18n.heading1} ${updateHotkeyTip("&lt;⌥⌘1>")}</button>
+<button data-tag="h2" data-value="## ">${window.VditorI18n.heading2} &lt;${updateHotkeyTip("⌥⌘2")}></button>
+<button data-tag="h3" data-value="### ">${window.VditorI18n.heading3} &lt;${updateHotkeyTip("⌥⌘3")}></button>
+<button data-tag="h4" data-value="#### ">${window.VditorI18n.heading4} &lt;${updateHotkeyTip("⌥⌘4")}></button>
+<button data-tag="h5" data-value="##### ">${window.VditorI18n.heading5} &lt;${updateHotkeyTip("⌥⌘5")}></button>
+<button data-tag="h6" data-value="###### ">${window.VditorI18n.heading6} &lt;${updateHotkeyTip("⌥⌘6")}></button>`;
+
+        this.element.appendChild(panelElement);
+
+        this._bindEvent(vditor, panelElement);
+    }
+
+    public _bindEvent(vditor: IVditor, panelElement: HTMLElement) {
+        const actionBtn = this.element.children[0] as HTMLElement;
+        actionBtn.addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (actionBtn.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            actionBtn.blur();
+            if (actionBtn.classList.contains("vditor-menu--current")) {
+                if (vditor.currentMode === "wysiwyg") {
+                    removeHeading(vditor);
+                    afterRenderEvent(vditor);
+                } else if (vditor.currentMode === "ir") {
+                    processHeading(vditor, "");
+                }
+                actionBtn.classList.remove("vditor-menu--current");
+            } else {
+                hidePanel(vditor, ["subToolbar"]);
+                panelElement.style.display = "block";
+            }
+        });
+
+        for (let i = 0; i < 6; i++) {
+            panelElement.children.item(i).addEventListener(getEventName(), (event: Event) => {
+                event.preventDefault();
+                if (vditor.currentMode === "wysiwyg") {
+                    setHeading(vditor, (event.target as HTMLElement).getAttribute("data-tag"));
+                    afterRenderEvent(vditor);
+                    actionBtn.classList.add("vditor-menu--current");
+                } else if (vditor.currentMode === "ir") {
+                    processHeading(vditor, (event.target as HTMLElement).getAttribute("data-value"));
+                    actionBtn.classList.add("vditor-menu--current");
+                } else {
+                    processHeadingSV(vditor, (event.target as HTMLElement).getAttribute("data-value"));
+                }
+                panelElement.style.display = "none";
+            });
+        }
+    }
+}

package/src/ts/toolbar/Help.ts

@@ -0,0 +1,30 @@
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Help extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            vditor.tip.show(`<div style="margin-bottom:14px;font-size: 14px;line-height: 22px;min-width:300px;max-width: 360px;display: flex;">
+<div style="margin-top: 14px;flex: 1">
+    <div>Markdown 使用指南</div>
+    <ul style="list-style: none">
+        <li><a href="https://ld246.com/article/1583308420519" target="_blank">语法速查手册</a></li>
+        <li><a href="https://ld246.com/article/1583129520165" target="_blank">基础语法</a></li>
+        <li><a href="https://ld246.com/article/1583305480675" target="_blank">扩展语法</a></li>
+        <li><a href="https://ld246.com/article/1582778815353" target="_blank">键盘快捷键</a></li>
+    </ul>
+</div>
+<div style="margin-top: 14px;flex: 1">
+    <div>Vditor 支持</div>
+    <ul style="list-style: none">
+        <li><a href="https://github.com/Vanessa219/vditor/issues" target="_blank">Issues</a></li>
+        <li><a href="https://ld246.com/tag/vditor" target="_blank">官方讨论区</a></li>
+        <li><a href="https://ld246.com/article/1549638745630" target="_blank">开发手册</a></li>
+        <li><a href="https://ld246.com/guide/markdown" target="_blank">演示地址</a></li>
+    </ul>
+</div></div>`, 0);
+        });
+    }
+}

package/src/ts/toolbar/Indent.ts

@@ -0,0 +1,25 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {listIndent} from "../util/fixBrowserBehavior";
+import {hasClosestByMatchTag} from "../util/hasClosest";
+import {getEditorRange} from "../util/selection";
+import {MenuItem} from "./MenuItem";
+
+export class Indent extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED) ||
+                vditor.currentMode === "sv") {
+                return;
+            }
+            const range = getEditorRange(vditor);
+            const liElement = hasClosestByMatchTag(range.startContainer, "LI");
+            if (liElement) {
+                listIndent(vditor, liElement, range);
+            }
+        });
+    }
+}

package/src/ts/toolbar/Info.ts

@@ -0,0 +1,43 @@
+import {VDITOR_VERSION} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Info extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            vditor.tip.show(`<div style="max-width: 520px; font-size: 14px;line-height: 22px;margin-bottom: 14px;">
+<p style="text-align: center;margin: 14px 0">
+    <em>下一代的 Markdown 编辑器，为未来而构建</em>
+</p>
+<div style="display: flex;margin-bottom: 14px;flex-wrap: wrap;align-items: center">
+    <img src="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png" style="margin: 0 auto;height: 68px"/>
+    <div>&nbsp;&nbsp;</div>
+    <div style="flex: 1;min-width: 250px">
+        Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。
+        它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供<a target="_blank" href="https://b3log.org/siyuan">桌面版</a>。
+    </div>
+</div>
+<div style="display: flex;flex-wrap: wrap;">
+    <ul style="list-style: none;flex: 1;min-width:148px">
+        <li>
+        项目地址：<a href="https://b3log.org/vditor" target="_blank">b3log.org/vditor</a>
+        </li>
+        <li>
+        开源协议：MIT
+        </li>
+    </ul>
+    <ul style="list-style: none;margin-right: 18px">
+        <li>
+        组件版本：Vditor v${VDITOR_VERSION} / Lute v${Lute.Version}
+        </li>
+        <li>
+        赞助捐赠：<a href="https://ld246.com/sponsor" target="_blank">https://ld246.com/sponsor</a>
+        </li>
+    </ul>
+</div>
+</div>`, 0);
+        });
+    }
+}

package/src/ts/toolbar/InsertAfter.ts

@@ -0,0 +1,18 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {insertEmptyBlock} from "../util/fixBrowserBehavior";
+import {MenuItem} from "./MenuItem";
+
+export class InsertAfter extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED) ||
+                vditor.currentMode === "sv") {
+                return;
+            }
+            insertEmptyBlock(vditor, "afterend");
+        });
+    }
+}

package/src/ts/toolbar/InsertBefore.ts

@@ -0,0 +1,18 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {insertEmptyBlock} from "../util/fixBrowserBehavior";
+import {MenuItem} from "./MenuItem";
+
+export class InsertBefore extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED) ||
+                vditor.currentMode === "sv") {
+                return;
+            }
+            insertEmptyBlock(vditor, "beforebegin");
+        });
+    }
+}

package/src/ts/toolbar/MenuItem.ts

@@ -0,0 +1,54 @@
+import {Constants} from "../constants";
+import {processToolbar} from "../ir/process";
+import {processToolbar as processToolbarSV} from "../sv/process";
+import {getEventName} from "../util/compatibility";
+import {updateHotkeyTip} from "../util/compatibility";
+import {toolbarEvent} from "../wysiwyg/toolbarEvent";
+
+export class MenuItem {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        this.element = document.createElement("div");
+        if (menuItem.className) {
+            this.element.classList.add(...menuItem.className.split(" "));
+        }
+
+        let hotkey = menuItem.hotkey ? ` <${updateHotkeyTip(menuItem.hotkey)}>` : "";
+        if (menuItem.level === 2) {
+            hotkey = menuItem.hotkey ? ` &lt;${updateHotkeyTip(menuItem.hotkey)}&gt;` : "";
+        }
+        const tip = menuItem.tip ? menuItem.tip + hotkey : `${window.VditorI18n[menuItem.name]}${hotkey}`;
+        const tagName = menuItem.name === "upload" ? "div" : "button";
+        if (menuItem.level === 2) {
+            this.element.innerHTML = `<${tagName} data-type="${menuItem.name}">${tip}</${tagName}>`;
+        } else {
+            this.element.classList.add("vditor-toolbar__item");
+            const iconElement = document.createElement(tagName);
+            iconElement.setAttribute("data-type", menuItem.name);
+            iconElement.className = `vditor-tooltipped vditor-tooltipped__${menuItem.tipPosition}`;
+            iconElement.setAttribute("aria-label", tip);
+            iconElement.innerHTML = menuItem.icon;
+            this.element.appendChild(iconElement);
+        }
+
+        if (!menuItem.prefix) {
+            return;
+        }
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            if (vditor.currentMode === "wysiwyg") {
+                toolbarEvent(vditor, this.element.children[0], event);
+            } else if (vditor.currentMode === "ir") {
+                processToolbar(vditor, this.element.children[0],
+                    menuItem.prefix || "", menuItem.suffix || "");
+            } else {
+                processToolbarSV(vditor, this.element.children[0],
+                    menuItem.prefix || "", menuItem.suffix || "");
+            }
+        });
+    }
+}

package/src/ts/toolbar/Outdent.ts

@@ -0,0 +1,24 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import { listOutdent} from "../util/fixBrowserBehavior";
+import {hasClosestByMatchTag} from "../util/hasClosest";
+import {getEditorRange} from "../util/selection";
+import {MenuItem} from "./MenuItem";
+
+export class Outdent extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED) ||
+                vditor.currentMode === "sv") {
+                return;
+            }
+            const range = getEditorRange(vditor);
+            const liElement = hasClosestByMatchTag(range.startContainer, "LI");
+            if (liElement) {
+                listOutdent(vditor, liElement, range, liElement.parentElement);
+            }
+        });
+    }
+}