@yltrcc/vditor 0.0.1

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,35 @@
+import {setContentTheme} from "../ui/setContentTheme";
+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);
+                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,195 @@
+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";
+
+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;
+        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();
+        });
+    }
+}

package/src/ts/toolbar/Emoji.ts

@@ -0,0 +1,79 @@
+import {getEventName} from "../util/compatibility";
+import {execAfterRender} from "../util/fixBrowserBehavior";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
+import {getEditorRange, insertHTML, setSelectionFocus} from "../util/selection";
+import {MenuItem} from "./MenuItem";
+import {toggleSubMenu} from "./setToolbar";
+import {hasClosestBlock} from "../util/hasClosest";
+import {modifyPre} from "../wysiwyg/inlineTag";
+
+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>`;
+            }
+        });
+        panelElement.innerHTML = `<div class="vditor-emojis" style="max-height: ${
+            vditor.options.height === "auto" ? "auto" : vditor.options.height as number - 80
+        }px">${commonEmojiHTML}</div><div class="vditor-emojis__tail">
+    <span class="vditor-emojis__tip"></span><span>${vditor.options.hint.emojiTail || ""}</span>
+</div>`;
+
+        this.element.appendChild(panelElement);
+
+        toggleSubMenu(vditor, panelElement, this.element.firstElementChild, menuItem.level);
+        this.bindEvent(vditor);
+    }
+
+    private bindEvent(vditor: IVditor) {
+        this.element.lastElementChild.addEventListener(getEventName(), (event: Event & { target: Element }) => {
+            const btnElement = hasClosestByTag(event.target, "BUTTON");
+            if (btnElement) {
+                event.preventDefault();
+                const value = btnElement.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));
+                    if (!hasClosestBlock(range.startContainer)) {
+                        modifyPre(vditor, range);
+                    }
+                }
+                range.collapse(false);
+                setSelectionFocus(range);
+                (this.element.lastElementChild as HTMLElement).style.display = "none";
+                execAfterRender(vditor);
+            }
+        });
+        this.element.lastElementChild.addEventListener("mouseover", (event: Event & { target: Element }) => {
+            const btnElement = hasClosestByTag(event.target, "BUTTON");
+            if (btnElement) {
+                this.element.querySelector(".vditor-emojis__tip").innerHTML = btnElement.getAttribute("data-key");
+            }
+        });
+    }
+}

package/src/ts/toolbar/Export.ts

@@ -0,0 +1,41 @@
+import {exportHTML, exportMarkdown, exportPDF} from "../export/index";
+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,66 @@
+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");
+                        vditor.options.toolbar.forEach(item => {
+                            if (typeof item !== "string" && item.tipPosition && item.name === svgElement.dataset.type) {
+                                svgElement.className = `vditor-tooltipped vditor-tooltipped__${item.tipPosition}`;
+                            }
+                        })
+                    }
+                });
+                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,73 @@
+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();
+            // https://github.com/Vanessa219/vditor/issues/1391
+            clearTimeout(vditor.wysiwyg.afterRenderTimeoutId);
+            clearTimeout(vditor.ir.processTimeoutId);
+            clearTimeout(vditor.sv.processTimeoutId);
+            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);
+        });
+    }
+}