vditor 3.8.7

package/src/ts/sv/process.ts

@@ -0,0 +1,210 @@
+import {getMarkdown} from "../markdown/getMarkdown";
+import {accessLocalStorage} from "../util/compatibility";
+import {scrollCenter} from "../util/editorCommonEvent";
+import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
+import {log} from "../util/log";
+import {getEditorRange, setRangeByWbr} from "../util/selection";
+import {inputEvent} from "./inputEvent";
+
+export const processPaste = (vditor: IVditor, text: string) => {
+    const range = getEditorRange(vditor);
+    range.extractContents();
+    range.insertNode(document.createTextNode(Lute.Caret));
+    range.insertNode(document.createTextNode(text));
+    let blockElement = hasClosestByAttribute(range.startContainer, "data-block", "0");
+    if (!blockElement) {
+        blockElement = vditor.sv.element;
+    }
+    const html = "<div data-block='0'>" +
+        vditor.lute.Md2VditorSVDOM(blockElement.textContent).replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
+        "</div>";
+    if (blockElement.isEqualNode(vditor.sv.element)) {
+        blockElement.innerHTML = html;
+    } else {
+        blockElement.outerHTML = html;
+    }
+    setRangeByWbr(vditor.sv.element, range);
+
+    scrollCenter(vditor);
+};
+
+export const getSideByType = (spanNode: Node, type: string, isPrevious = true) => {
+    let sideElement = spanNode as Element;
+    if (sideElement.nodeType === 3) {
+        sideElement = sideElement.parentElement;
+    }
+    while (sideElement) {
+        if (sideElement.getAttribute("data-type") === type) {
+            return sideElement;
+        }
+        if (isPrevious) {
+            sideElement = sideElement.previousElementSibling;
+        } else {
+            sideElement = sideElement.nextElementSibling;
+        }
+    }
+    return false;
+};
+
+export const processSpinVditorSVDOM = (html: string, vditor: IVditor) => {
+    log("SpinVditorSVDOM", html, "argument", vditor.options.debugger);
+    html = "<div data-block='0'>" +
+        vditor.lute.SpinVditorSVDOM(html).replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
+        "</div>";
+    log("SpinVditorSVDOM", html, "result", vditor.options.debugger);
+    return html;
+};
+
+export const processPreviousMarkers = (spanElement: HTMLElement) => {
+    const spanType = spanElement.getAttribute("data-type");
+    let previousElement = spanElement.previousElementSibling;
+    // 有内容的子列表/标题，在其 marker 后换行
+    let markerText = (spanType && spanType !== "text" && spanType !== "table" && spanType !== "heading-marker" &&
+        spanType !== "newline" && spanType !== "yaml-front-matter-open-marker" && spanType !== "yaml-front-matter-close-marker"
+        && spanType !== "code-block-info" && spanType !== "code-block-close-marker" && spanType !== "code-block-open-marker") ?
+        spanElement.textContent : "";
+    let hasNL = false;
+    if (spanType === "newline") {
+        hasNL = true;
+    }
+    while (previousElement && !hasNL) {
+        const previousType = previousElement.getAttribute("data-type");
+        if (previousType === "li-marker" || previousType === "blockquote-marker" || previousType === "task-marker" ||
+            previousType === "padding") {
+            const previousText = previousElement.textContent;
+            if (previousType === "li-marker" &&
+                (spanType === "code-block-open-marker" || spanType === "code-block-info")) {
+                // https://github.com/Vanessa219/vditor/issues/586
+                markerText = previousText.replace(/\S/g, " ") + markerText;
+            } else if (spanType === "code-block-close-marker" &&
+                previousElement.nextElementSibling.isSameNode(spanElement)) {
+                // https://github.com/Vanessa219/vditor/issues/594
+                const openMarker = getSideByType(spanElement, "code-block-open-marker");
+                if (openMarker && openMarker.previousElementSibling) {
+                    previousElement = openMarker.previousElementSibling;
+                    markerText = previousText + markerText;
+                }
+            } else {
+                markerText = previousText + markerText;
+            }
+        } else if (previousType === "newline") {
+            hasNL = true;
+        }
+        previousElement = previousElement.previousElementSibling;
+    }
+    return markerText;
+};
+
+export const processAfterRender = (vditor: IVditor, options = {
+    enableAddUndoStack: true,
+    enableHint: false,
+    enableInput: true,
+}) => {
+    if (options.enableHint) {
+        vditor.hint.render(vditor);
+    }
+
+    vditor.preview.render(vditor);
+
+    const text = getMarkdown(vditor);
+    if (typeof vditor.options.input === "function" && options.enableInput) {
+        vditor.options.input(text);
+    }
+
+    if (vditor.options.counter.enable) {
+        vditor.counter.render(vditor, text);
+    }
+
+    if (vditor.options.cache.enable && accessLocalStorage()) {
+        localStorage.setItem(vditor.options.cache.id, text);
+        if (vditor.options.cache.after) {
+            vditor.options.cache.after(text);
+        }
+    }
+
+    if (vditor.devtools) {
+        vditor.devtools.renderEchart(vditor);
+    }
+
+    clearTimeout(vditor.sv.processTimeoutId);
+    vditor.sv.processTimeoutId = window.setTimeout(() => {
+        if (options.enableAddUndoStack && !vditor.sv.composingLock) {
+            vditor.undo.addToUndoStack(vditor);
+        }
+    }, vditor.options.undoDelay);
+};
+
+export const processHeading = (vditor: IVditor, value: string) => {
+    const range = getEditorRange(vditor);
+    const headingElement = hasClosestByTag(range.startContainer, "SPAN");
+    if (headingElement && headingElement.textContent.trim() !== "") {
+        value = "\n" + value;
+    }
+    range.collapse(true);
+    document.execCommand("insertHTML", false, value);
+};
+
+export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: string, suffix: string) => {
+    const range = getEditorRange(vditor);
+    const commandName = actionBtn.getAttribute("data-type");
+    // 添加
+    if (vditor.sv.element.childNodes.length === 0) {
+        vditor.sv.element.innerHTML = `<span data-type="p" data-block="0"><span data-type="text"><wbr></span></span><span data-type="newline"><br><span style="display: none">
+</span></span>`;
+        setRangeByWbr(vditor.sv.element, range);
+    }
+    const blockElement = hasClosestBlock(range.startContainer);
+    const spanElement = hasClosestByTag(range.startContainer, "SPAN");
+    if (!blockElement) {
+        return;
+    }
+    if (commandName === "link") {
+        let html;
+        if (range.toString() === "") {
+            html = `${prefix}${Lute.Caret}${suffix}`;
+        } else {
+            html = `${prefix}${range.toString()}${suffix.replace(")", Lute.Caret + ")")}`;
+        }
+        document.execCommand("insertHTML", false, html);
+        return;
+    } else if (commandName === "italic" || commandName === "bold" || commandName === "strike" ||
+        commandName === "inline-code" || commandName === "code" || commandName === "table" || commandName === "line") {
+        let html;
+        // https://github.com/Vanessa219/vditor/issues/563 代码块不需要后面的 ```
+        if (range.toString() === "") {
+            html = `${prefix}${Lute.Caret}${commandName === "code" ? "" : suffix}`;
+        } else {
+            html = `${prefix}${range.toString()}${Lute.Caret}${commandName === "code" ? "" : suffix}`;
+        }
+        if (commandName === "table" || (commandName === "code" && spanElement && spanElement.textContent !== "")) {
+            html = "\n\n" + html;
+        } else if (commandName === "line") {
+            html = `\n\n${prefix}\n${Lute.Caret}`;
+        }
+        document.execCommand("insertHTML", false, html);
+        return;
+    } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list" ||
+        commandName === "quote") {
+        if (spanElement) {
+            let marker = "* ";
+            if (commandName === "check") {
+                marker = "* [ ] ";
+            } else if (commandName === "ordered-list") {
+                marker = "1. ";
+            } else if (commandName === "quote") {
+                marker = "> ";
+            }
+            const newLine = getSideByType(spanElement, "newline");
+            if (newLine) {
+                newLine.insertAdjacentText("afterend", marker);
+            } else {
+                blockElement.insertAdjacentText("afterbegin", marker);
+            }
+            inputEvent(vditor);
+            return;
+        }
+    }
+    setRangeByWbr(vditor.sv.element, range);
+    processAfterRender(vditor);
+};

package/src/ts/sv/processKeydown.ts

@@ -0,0 +1,196 @@
+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") {
+                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,31 @@
+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();
+            });
+            return;
+        }
+
+        this.element.innerHTML = `<div class="vditor-tip__content">${text}</div>`;
+        setTimeout(() => {
+            this.hide();
+        }, time);
+    }
+
+    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,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";
+    }
+}