@8btc/mditor 0.0.1

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);
+        });
+    }
+}

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,28 @@
+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://unpkg.com/vditor/dist/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 和 Svelte 等框架。
+    </div>
+</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);
+            }
+        });
+    }
+}

package/src/ts/toolbar/Outline.ts

@@ -0,0 +1,21 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Outline extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        if (vditor.options.outline) {
+            this.element.firstElementChild.classList.add("vditor-menu--current");
+        }
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            const btnElement = vditor.toolbar.elements.outline.firstElementChild;
+            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            vditor.options.outline.enable = !this.element.firstElementChild.classList.contains("vditor-menu--current");
+            vditor.outline.toggle(vditor, vditor.options.outline.enable);
+        });
+    }
+}

package/src/ts/toolbar/Preview.ts

@@ -0,0 +1,55 @@
+import {Constants} from "../constants";
+import {setPadding} from "../ui/initUI";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+import {disableToolbar, enableToolbar, hidePanel} from "./setToolbar";
+
+export class Preview extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this._bindEvent(vditor);
+    }
+
+    public _bindEvent(vditor: IVditor) {
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            const btnElement = this.element.firstElementChild;
+            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+
+            const toolbars = Constants.EDIT_TOOLBARS.concat(["both", "edit-mode", "devtools"]);
+            if (btnElement.classList.contains("vditor-menu--current")) {
+                btnElement.classList.remove("vditor-menu--current");
+                if (vditor.currentMode === "sv") {
+                    vditor.sv.element.style.display = "block";
+                    if (vditor.options.preview.mode === "both") {
+                        vditor.preview.element.style.display = "block";
+                    } else {
+                        vditor.preview.element.style.display = "none";
+                    }
+                } else {
+                    vditor[vditor.currentMode].element.parentElement.style.display = "block";
+                    vditor.preview.element.style.display = "none";
+                }
+                enableToolbar(vditor.toolbar.elements, toolbars);
+                vditor.outline.render(vditor);
+            } else {
+                disableToolbar(vditor.toolbar.elements, toolbars);
+                vditor.preview.element.style.display = "block";
+                if (vditor.currentMode === "sv") {
+                    vditor.sv.element.style.display = "none";
+                } else {
+                    vditor[vditor.currentMode].element.parentElement.style.display = "none";
+                }
+                vditor.preview.render(vditor);
+                btnElement.classList.add("vditor-menu--current");
+                hidePanel(vditor, ["subToolbar", "hint", "popover"]);
+                setTimeout(() => {
+                    vditor.outline.render(vditor);
+                }, vditor.options.preview.delay + 10);
+            }
+            setPadding(vditor);
+        });
+    }
+}

package/src/ts/toolbar/Record.ts

@@ -0,0 +1,60 @@
+import {Constants} from "../constants";
+import {uploadFiles} from "../upload/index";
+import {getEventName} from "../util/compatibility";
+import {RecordMedia} from "../util/RecordMedia";
+import {MenuItem} from "./MenuItem";
+
+export class Record extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this._bindEvent(vditor);
+    }
+
+    public _bindEvent(vditor: IVditor) {
+        let mediaRecorder: RecordMedia;
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            const editorElement = vditor[vditor.currentMode].element;
+            if (!mediaRecorder) {
+                navigator.mediaDevices.getUserMedia({audio: true}).then((mediaStream: MediaStream) => {
+                    mediaRecorder = new RecordMedia(mediaStream);
+                    mediaRecorder.recorder.onaudioprocess = (e: AudioProcessingEvent) => {
+                        // Do nothing if not recording:
+                        if (!mediaRecorder.isRecording) {
+                            return;
+                        }
+
+                        // Copy the data from the input buffers;
+                        const left = e.inputBuffer.getChannelData(0);
+                        const right = e.inputBuffer.getChannelData(1);
+                        mediaRecorder.cloneChannelData(left, right);
+                    };
+                    mediaRecorder.startRecordingNewWavFile();
+                    vditor.tip.show(window.VditorI18n.recording);
+                    editorElement.setAttribute("contenteditable", "false");
+                    this.element.children[0].classList.add("vditor-menu--current");
+                }).catch(() => {
+                    vditor.tip.show(window.VditorI18n["record-tip"]);
+                });
+                return;
+            }
+
+            if (mediaRecorder.isRecording) {
+                mediaRecorder.stopRecording();
+                vditor.tip.hide();
+                const file: File = new File([mediaRecorder.buildWavFileBlob()],
+                    `record${(new Date()).getTime()}.wav`, {type: "video/webm"});
+                uploadFiles(vditor, [file]);
+                this.element.children[0].classList.remove("vditor-menu--current");
+            } else {
+                vditor.tip.show(window.VditorI18n.recording);
+                editorElement.setAttribute("contenteditable", "false");
+                mediaRecorder.startRecordingNewWavFile();
+                this.element.children[0].classList.add("vditor-menu--current");
+            }
+        });
+    }
+}

package/src/ts/toolbar/Redo.ts

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

package/src/ts/toolbar/Undo.ts

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