vditor 3.8.7

package/src/ts/ir/process.ts

@@ -0,0 +1,220 @@
+import {Constants} from "../constants";
+import {getMarkdown} from "../markdown/getMarkdown";
+import {removeCurrentToolbar} from "../toolbar/setToolbar";
+import {accessLocalStorage} from "../util/compatibility";
+import {listToggle} from "../util/fixBrowserBehavior";
+import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
+import {getEditorRange, getSelectPosition, setRangeByWbr, setSelectionFocus} from "../util/selection";
+import {highlightToolbarIR} from "./highlightToolbarIR";
+import {input} from "./input";
+
+export const processHint = (vditor: IVditor) => {
+    vditor.hint.render(vditor);
+    const startContainer = getEditorRange(vditor).startContainer;
+    // 代码块语言提示
+    const preBeforeElement = hasClosestByAttribute(startContainer, "data-type", "code-block-info");
+    if (preBeforeElement) {
+        if (preBeforeElement.textContent.replace(Constants.ZWSP, "") === "" && vditor.hint.recentLanguage) {
+            preBeforeElement.textContent = Constants.ZWSP + vditor.hint.recentLanguage;
+            const range = getEditorRange(vditor);
+            range.selectNodeContents(preBeforeElement);
+        } else {
+            const matchLangData: IHintData[] = [];
+            const key =
+                preBeforeElement.textContent.substring(0, getSelectPosition(preBeforeElement, vditor.ir.element).start)
+                    .replace(Constants.ZWSP, "");
+            Constants.CODE_LANGUAGES.forEach((keyName) => {
+                if (keyName.indexOf(key.toLowerCase()) > -1) {
+                    matchLangData.push({
+                        html: keyName,
+                        value: keyName,
+                    });
+                }
+            });
+            vditor.hint.genHTML(matchLangData, key, vditor);
+        }
+    }
+};
+
+export const processAfterRender = (vditor: IVditor, options = {
+    enableAddUndoStack: true,
+    enableHint: false,
+    enableInput: true,
+}) => {
+    if (options.enableHint) {
+        processHint(vditor);
+    }
+
+    clearTimeout(vditor.ir.processTimeoutId);
+    vditor.ir.processTimeoutId = window.setTimeout(() => {
+        if (vditor.ir.composingLock) {
+            return;
+        }
+        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);
+        }
+
+        if (options.enableAddUndoStack) {
+            vditor.undo.addToUndoStack(vditor);
+        }
+    }, vditor.options.undoDelay);
+};
+
+export const processHeading = (vditor: IVditor, value: string) => {
+    const range = getEditorRange(vditor);
+    const headingElement = hasClosestBlock(range.startContainer) || range.startContainer as HTMLElement;
+    if (headingElement) {
+        const headingMarkerElement = headingElement.querySelector(".vditor-ir__marker--heading");
+        if (headingMarkerElement) {
+            headingMarkerElement.innerHTML = value;
+        } else {
+            headingElement.insertAdjacentText("afterbegin", value);
+            range.selectNodeContents(headingElement);
+            range.collapse(false);
+        }
+        input(vditor, range.cloneRange());
+        highlightToolbarIR(vditor);
+    }
+};
+
+const removeInline = (range: Range, vditor: IVditor, type: string) => {
+    const inlineElement = hasClosestByAttribute(range.startContainer, "data-type", type) as HTMLElement;
+    if (inlineElement) {
+        inlineElement.firstElementChild.remove();
+        inlineElement.lastElementChild.remove();
+        range.insertNode(document.createElement("wbr"));
+        const tempElement = document.createElement("div");
+        tempElement.innerHTML = vditor.lute.SpinVditorIRDOM(inlineElement.outerHTML);
+        inlineElement.outerHTML = tempElement.firstElementChild.innerHTML.trim();
+    }
+};
+
+export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: string, suffix: string) => {
+    const range = getEditorRange(vditor);
+    const commandName = actionBtn.getAttribute("data-type");
+    let typeElement = range.startContainer as HTMLElement;
+    if (typeElement.nodeType === 3) {
+        typeElement = typeElement.parentElement;
+    }
+    let useHighlight = true;
+    // 移除
+    if (actionBtn.classList.contains("vditor-menu--current")) {
+        if (commandName === "quote") {
+            const quoteElement = hasClosestByMatchTag(typeElement, "BLOCKQUOTE");
+            if (quoteElement) {
+                range.insertNode(document.createElement("wbr"));
+                quoteElement.outerHTML = quoteElement.innerHTML.trim() === "" ?
+                    `<p data-block="0">${quoteElement.innerHTML}</p>` : quoteElement.innerHTML;
+            }
+        } else if (commandName === "link") {
+            const aElement = hasClosestByAttribute(range.startContainer, "data-type", "a") as HTMLElement;
+            if (aElement) {
+                const aTextElement = hasClosestByClassName(range.startContainer, "vditor-ir__link");
+                if (aTextElement) {
+                    range.insertNode(document.createElement("wbr"));
+                    aElement.outerHTML = aTextElement.innerHTML;
+                } else {
+                    aElement.outerHTML = aElement.querySelector(".vditor-ir__link").innerHTML + "<wbr>";
+                }
+            }
+        } else if (commandName === "italic") {
+            removeInline(range, vditor, "em");
+        } else if (commandName === "bold") {
+            removeInline(range, vditor, "strong");
+        } else if (commandName === "strike") {
+            removeInline(range, vditor, "s");
+        } else if (commandName === "inline-code") {
+            removeInline(range, vditor, "code");
+        } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
+            listToggle(vditor, range, commandName);
+            useHighlight = false;
+            actionBtn.classList.remove("vditor-menu--current");
+        }
+    } else {
+        // 添加
+        if (vditor.ir.element.childNodes.length === 0) {
+            vditor.ir.element.innerHTML = '<p data-block="0"><wbr></p>';
+            setRangeByWbr(vditor.ir.element, range);
+        }
+        const blockElement = hasClosestBlock(range.startContainer);
+        if (commandName === "line") {
+            if (blockElement) {
+                const hrHTML = '<hr data-block="0"><p data-block="0"><wbr>\n</p>';
+                if (blockElement.innerHTML.trim() === "") {
+                    blockElement.outerHTML = hrHTML;
+                } else {
+                    blockElement.insertAdjacentHTML("afterend", hrHTML);
+                }
+            }
+        } else if (commandName === "quote") {
+            if (blockElement) {
+                range.insertNode(document.createElement("wbr"));
+                blockElement.outerHTML = `<blockquote data-block="0">${blockElement.outerHTML}</blockquote>`;
+                useHighlight = false;
+                actionBtn.classList.add("vditor-menu--current");
+            }
+        } else if (commandName === "link") {
+            let html;
+            if (range.toString() === "") {
+                html = `${prefix}<wbr>${suffix}`;
+            } else {
+                html = `${prefix}${range.toString()}${suffix.replace(")", "<wbr>)")}`;
+            }
+            document.execCommand("insertHTML", false, html);
+            useHighlight = false;
+            actionBtn.classList.add("vditor-menu--current");
+        } else if (commandName === "italic" || commandName === "bold" || commandName === "strike"
+            || commandName === "inline-code" || commandName === "code" || commandName === "table") {
+            let html;
+            if (range.toString() === "") {
+                html = `${prefix}<wbr>${suffix}`;
+            } else {
+                if (commandName === "code" || commandName === "table") {
+                    html = `${prefix}${range.toString()}<wbr>${suffix}`;
+                } else {
+                    html = `${prefix}${range.toString()}${suffix}<wbr>`;
+                }
+                range.deleteContents();
+            }
+            if (commandName === "table" || commandName === "code") {
+                html = "\n" + html + "\n\n";
+            }
+
+            const spanElement = document.createElement("span");
+            spanElement.innerHTML = html;
+            range.insertNode(spanElement);
+            input(vditor, range);
+
+            if (commandName === "table") {
+                range.selectNodeContents(getSelection().getRangeAt(0).startContainer.parentElement);
+                setSelectionFocus(range);
+            }
+        } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
+            listToggle(vditor, range, commandName, false);
+            useHighlight = false;
+            removeCurrentToolbar(vditor.toolbar.elements, ["check", "list", "ordered-list"]);
+            actionBtn.classList.add("vditor-menu--current");
+        }
+    }
+    setRangeByWbr(vditor.ir.element, range);
+    processAfterRender(vditor);
+    if (useHighlight) {
+        highlightToolbarIR(vditor);
+    }
+};

package/src/ts/ir/processKeydown.ts

@@ -0,0 +1,238 @@
+import {Constants} from "../constants";
+import {hidePanel} from "../toolbar/setToolbar";
+import {isCtrl} from "../util/compatibility";
+import {
+    fixBlockquote, fixCJKPosition,
+    fixCodeBlock, fixCursorDownInlineMath,
+    fixDelete, fixFirefoxArrowUpTable, fixGSKeyBackspace, fixHR,
+    fixList,
+    fixMarkdown,
+    fixTab,
+    fixTable,
+    fixTask,
+    insertAfterBlock, insertBeforeBlock, isFirstCell, isLastCell,
+} from "../util/fixBrowserBehavior";
+import {
+    hasClosestBlock,
+    hasClosestByAttribute,
+    hasClosestByClassName,
+    hasClosestByMatchTag,
+} from "../util/hasClosest";
+import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
+import {matchHotKey} from "../util/hotKey";
+import {getEditorRange, getSelectPosition, setSelectionFocus} from "../util/selection";
+import {keydownToc} from "../util/toc";
+import {expandMarker} from "./expandMarker";
+import {processAfterRender, processHeading} from "./process";
+
+export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
+    vditor.ir.composingLock = event.isComposing;
+    if (event.isComposing) {
+        return false;
+    }
+
+    // 添加第一次记录 undo 的光标
+    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);
+    }
+
+    const range = getEditorRange(vditor);
+    const startContainer = range.startContainer;
+
+    if (!fixGSKeyBackspace(event, vditor, startContainer)) {
+        return false;
+    }
+
+    fixCJKPosition(range, vditor, event);
+
+    fixHR(range);
+
+    // 仅处理以下快捷键操作
+    if (event.key !== "Enter" && event.key !== "Tab" && event.key !== "Backspace" && event.key.indexOf("Arrow") === -1
+        && !isCtrl(event) && event.key !== "Escape" && event.key !== "Delete") {
+        return false;
+    }
+
+    // 斜体、粗体、内联代码块中换行
+    const newlineElement = hasClosestByAttribute(startContainer, "data-newline", "1");
+    if (!isCtrl(event) && !event.altKey && !event.shiftKey && event.key === "Enter" && newlineElement
+        && range.startOffset < newlineElement.textContent.length) {
+        const beforeMarkerElement = newlineElement.previousElementSibling;
+        if (beforeMarkerElement) {
+            range.insertNode(document.createTextNode(beforeMarkerElement.textContent));
+            range.collapse(false);
+        }
+        const afterMarkerElement = newlineElement.nextSibling;
+        if (afterMarkerElement) {
+            range.insertNode(document.createTextNode(afterMarkerElement.textContent));
+            range.collapse(true);
+        }
+    }
+
+    const pElement = hasClosestByMatchTag(startContainer, "P");
+    // md 处理
+    if (fixMarkdown(event, vditor, pElement, range)) {
+        return true;
+    }
+    // li
+    if (fixList(range, vditor, pElement, event)) {
+        return true;
+    }
+    // blockquote
+    if (fixBlockquote(vditor, range, event, pElement)) {
+        return true;
+    }
+    // 代码块
+    const preRenderElement = hasClosestByClassName(startContainer, "vditor-ir__marker--pre");
+    if (preRenderElement && preRenderElement.tagName === "PRE") {
+        const codeRenderElement = preRenderElement.firstChild as HTMLElement;
+        if (fixCodeBlock(vditor, event, preRenderElement, range)) {
+            return true;
+        }
+        // 数学公式上无元素，按上或左将添加新块
+        if ((codeRenderElement.getAttribute("data-type") === "math-block"
+            || codeRenderElement.getAttribute("data-type") === "html-block") &&
+            insertBeforeBlock(vditor, event, range, codeRenderElement, preRenderElement.parentElement)) {
+            return true;
+        }
+
+        // 代码块下无元素或者为代码块/table 元素，添加空块
+        if (insertAfterBlock(vditor, event, range, codeRenderElement, preRenderElement.parentElement)) {
+            return true;
+        }
+    }
+    // 代码块语言
+    const preBeforeElement = hasClosestByAttribute(startContainer, "data-type", "code-block-info");
+    if (preBeforeElement) {
+        if (event.key === "Enter" || event.key === "Tab") {
+            range.selectNodeContents(preBeforeElement.nextElementSibling.firstChild);
+            range.collapse(true);
+            event.preventDefault();
+            hidePanel(vditor, ["hint"]);
+            return true;
+        }
+
+        if (event.key === "Backspace") {
+            const start = getSelectPosition(preBeforeElement, vditor.ir.element).start;
+            if (start === 1) { // 删除零宽空格
+                range.setStart(startContainer, 0);
+            }
+            if (start === 2) { // 删除时清空自动补全语言
+                vditor.hint.recentLanguage = "";
+            }
+        }
+        if (insertBeforeBlock(vditor, event, range, preBeforeElement, preBeforeElement.parentElement)) {
+            // 上无元素，按上或左将添加新块
+            hidePanel(vditor, ["hint"]);
+            return true;
+        }
+    }
+
+    // table
+    const cellElement = hasClosestByMatchTag(startContainer, "TD") ||
+        hasClosestByMatchTag(startContainer, "TH");
+    if (event.key.indexOf("Arrow") > -1 && cellElement) {
+        const tableElement = isFirstCell(cellElement);
+        if (tableElement && insertBeforeBlock(vditor, event, range, cellElement, tableElement)) {
+            return true;
+        }
+
+        const table2Element = isLastCell(cellElement);
+        if (table2Element && insertAfterBlock(vditor, event, range, cellElement, table2Element)) {
+            return true;
+        }
+    }
+    if (fixTable(vditor, event, range)) {
+        return true;
+    }
+
+    // task list
+    if (fixTask(vditor, range, event)) {
+        return true;
+    }
+
+    // tab
+    if (fixTab(vditor, range, event)) {
+        return true;
+    }
+
+    const headingElement = hasClosestByHeadings(startContainer);
+    if (headingElement) {
+        // enter++: 标题变大
+        if (matchHotKey("⌘=", event)) {
+            const headingMarkerElement = headingElement.querySelector(".vditor-ir__marker--heading");
+            if (headingMarkerElement && headingMarkerElement.textContent.trim().length > 1) {
+                processHeading(vditor, headingMarkerElement.textContent.substr(1));
+            }
+            event.preventDefault();
+            return true;
+        }
+
+        // enter++: 标题变小
+        if (matchHotKey("⌘-", event)) {
+            const headingMarkerElement = headingElement.querySelector(".vditor-ir__marker--heading");
+            if (headingMarkerElement && headingMarkerElement.textContent.trim().length < 6) {
+                processHeading(vditor, headingMarkerElement.textContent.trim() + "# ");
+            }
+            event.preventDefault();
+            return true;
+        }
+    }
+    const blockElement = hasClosestBlock(startContainer);
+    if (event.key === "Backspace" && !isCtrl(event) && !event.shiftKey && !event.altKey && range.toString() === "") {
+        if (fixDelete(vditor, range, event, pElement)) {
+            return true;
+        }
+
+        if (blockElement && blockElement.previousElementSibling
+            && blockElement.tagName !== "UL" && blockElement.tagName !== "OL"
+            && (blockElement.previousElementSibling.getAttribute("data-type") === "code-block" ||
+                blockElement.previousElementSibling.getAttribute("data-type") === "math-block")) {
+            const rangeStart = getSelectPosition(blockElement, vditor.ir.element, range).start;
+            if (rangeStart === 0 || (rangeStart === 1 && blockElement.innerText.startsWith(Constants.ZWSP))) {
+                // 当前块删除后光标落于代码渲染块上，当前块会被删除，因此需要阻止事件，不能和 keyup 中的代码块处理合并
+                range.selectNodeContents(blockElement.previousElementSibling.querySelector(".vditor-ir__marker--pre code"));
+                range.collapse(false);
+                expandMarker(range, vditor);
+                if (blockElement.textContent.trim().replace(Constants.ZWSP, "") === "") {
+                    // 当前块为空且不是最后一个时，需要删除
+                    blockElement.remove();
+                    processAfterRender(vditor);
+                }
+                event.preventDefault();
+                return true;
+            }
+        }
+
+        // 光标位于标题前，marker 后
+        if (headingElement) {
+            const headingLength = headingElement.firstElementChild.textContent.length;
+            if (getSelectPosition(headingElement, vditor.ir.element).start === headingLength) {
+                range.setStart(headingElement.firstElementChild.firstChild, headingLength - 1);
+                range.collapse(true);
+                setSelectionFocus(range);
+            }
+        }
+    }
+
+    if ((event.key === "ArrowUp" || event.key === "ArrowDown") && blockElement) {
+        // https://github.com/Vanessa219/vditor/issues/358
+        blockElement.querySelectorAll(".vditor-ir__node").forEach((item: HTMLElement) => {
+            if (!item.contains(startContainer)) {
+                item.classList.add("vditor-ir__node--hidden");
+            }
+        });
+
+        if (fixFirefoxArrowUpTable(event, blockElement, range)) {
+            return true;
+        }
+    }
+    fixCursorDownInlineMath(range, event.key);
+
+    if (blockElement && keydownToc(blockElement, vditor, event, range)) {
+        event.preventDefault();
+        return true;
+    }
+    return false;
+};

package/src/ts/markdown/abcRender.ts

@@ -0,0 +1,27 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {abcRenderAdapter} from "./adapterRender";
+
+declare const ABCJS: {
+    renderAbc(element: HTMLElement, text: string): void;
+};
+
+export const abcRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
+    const abcElements = abcRenderAdapter.getElements(element);
+    if (abcElements.length > 0) {
+        addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript").then(() => {
+            abcElements.forEach((item: HTMLDivElement) => {
+                if (item.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                    item.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                    return;
+                }
+                if (item.getAttribute("data-processed") === "true") {
+                    return;
+                }
+                ABCJS.renderAbc(item, abcRenderAdapter.getCode(item).trim());
+                item.style.overflowX = "auto";
+                item.setAttribute("data-processed", "true");
+            });
+        });
+    }
+};

package/src/ts/markdown/adapterRender.ts

@@ -0,0 +1,33 @@
+export const mathRenderAdapter = {
+    getCode: (mathElement: Element) => mathElement.textContent,
+    getElements: (element: HTMLElement) => element.querySelectorAll(".language-math"),
+};
+export const mermaidRenderAdapter = {
+    /** 不仅要返回code，并且需要将 code 设置为 el 的 innerHTML */
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement) => element.querySelectorAll(".language-mermaid"),
+};
+export const mindmapRenderAdapter = {
+    getCode: (el: Element) => el.getAttribute("data-code"),
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-mindmap"),
+};
+export const chartRenderAdapter = {
+    getCode: (el: HTMLElement) => el.innerText,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-echarts"),
+};
+export const abcRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-abc"),
+};
+export const graphvizRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-graphviz"),
+};
+export const flowchartRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-flowchart"),
+};
+export const plantumlRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-plantuml"),
+};

package/src/ts/markdown/anchorRender.ts

@@ -0,0 +1,19 @@
+export const anchorRender = (type: number) => {
+    document.querySelectorAll(".vditor-anchor").forEach((anchor: HTMLLinkElement) => {
+        if (type === 1) {
+            anchor.classList.add("vditor-anchor--left");
+        }
+        anchor.onclick = () => {
+            const id = anchor.getAttribute("href").substr(1);
+            const top = document.getElementById("vditorAnchor-" + id).offsetTop;
+            document.querySelector("html").scrollTop = top;
+        };
+    });
+
+    window.onhashchange = () => {
+        const element = document.getElementById("vditorAnchor-" + decodeURIComponent(window.location.hash.substr(1)));
+        if (element) {
+            document.querySelector("html").scrollTop = element.offsetTop;
+        }
+    };
+};

package/src/ts/markdown/chartRender.ts

@@ -0,0 +1,37 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {chartRenderAdapter} from "./adapterRender";
+
+declare const echarts: {
+    init(element: HTMLElement, theme?: string): IEChart;
+};
+
+export const chartRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
+    const echartsElements = chartRenderAdapter.getElements(element);
+    if (echartsElements.length > 0) {
+        addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
+            echartsElements.forEach((e: HTMLDivElement) => {
+                if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                    e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                    return;
+                }
+
+                const text = chartRenderAdapter.getCode(e).trim();
+                if (!text) {
+                    return;
+                }
+                try {
+                    if (e.getAttribute("data-processed") === "true") {
+                        return;
+                    }
+                    const option = JSON.parse(text);
+                    echarts.init(e, theme === "dark" ? "dark" : undefined).setOption(option);
+                    e.setAttribute("data-processed", "true");
+                } catch (error) {
+                    e.className = "vditor-reset--error";
+                    e.innerHTML = `echarts render error: <br>${error}`;
+                }
+            });
+        });
+    }
+};

package/src/ts/markdown/codeRender.ts

@@ -0,0 +1,50 @@
+import {code160to32} from "../util/code160to32";
+
+export const codeRender = (element: HTMLElement) => {
+    element.querySelectorAll("pre > code").forEach((e: HTMLElement, index: number) => {
+        if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+            e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+            return;
+        }
+        if (e.classList.contains("language-mermaid") || e.classList.contains("language-flowchart") ||
+            e.classList.contains("language-echarts") || e.classList.contains("language-mindmap") ||
+            e.classList.contains("language-plantuml") ||
+            e.classList.contains("language-abc") || e.classList.contains("language-graphviz") ||
+            e.classList.contains("language-math")) {
+            return;
+        }
+
+        if (e.style.maxHeight.indexOf("px") > -1) {
+            return;
+        }
+
+        // 避免预览区在渲染后由于代码块过多产生性能问题 https://github.com/b3log/vditor/issues/67
+        if (element.classList.contains("vditor-preview") && index > 5) {
+            return;
+        }
+
+        let codeText = e.innerText;
+        if (e.classList.contains("highlight-chroma")) {
+            const codeElement = document.createElement("code");
+            codeElement.innerHTML = e.innerHTML;
+            codeElement.querySelectorAll(".highlight-ln").forEach((item: HTMLElement) => {
+                item.remove();
+            });
+            codeText = codeElement.innerText;
+        }
+
+        const divElement = document.createElement("div");
+        divElement.className = "vditor-copy";
+        divElement.innerHTML = `<span aria-label="${window.VditorI18n.copy}"
+onmouseover="this.setAttribute('aria-label', '${window.VditorI18n.copy}')"
+class="vditor-tooltipped vditor-tooltipped__w"
+onclick="this.previousElementSibling.select();document.execCommand('copy');` +
+            `this.setAttribute('aria-label', '${window.VditorI18n.copied}')"><svg><use xlink:href="#vditor-icon-copy"></use></svg></span>`;
+        const textarea = document.createElement("textarea");
+        textarea.value = code160to32(codeText);
+        divElement.insertAdjacentElement("afterbegin", textarea);
+
+        e.before(divElement);
+        e.style.maxHeight = (window.outerHeight - 40) + "px";
+    });
+};

package/src/ts/markdown/flowchartRender.ts

@@ -0,0 +1,25 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {flowchartRenderAdapter} from "./adapterRender";
+
+declare const flowchart: {
+    parse(text: string): { drawSVG: (type: HTMLElement) => void };
+};
+
+export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
+    const flowchartElements = flowchartRenderAdapter.getElements(element);
+    if (flowchartElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/dist/js/flowchart.js/flowchart.min.js`, "vditorFlowchartScript").then(() => {
+        flowchartElements.forEach((item: HTMLElement) => {
+            if (item.getAttribute("data-processed") === "true") {
+                return;
+            }
+            const flowchartObj = flowchart.parse(flowchartRenderAdapter.getCode(item));
+            item.innerHTML = "";
+            flowchartObj.drawSVG(item);
+            item.setAttribute("data-processed", "true");
+        });
+    });
+};

package/src/ts/markdown/getHTML.ts

@@ -0,0 +1,11 @@
+import {getMarkdown} from "./getMarkdown";
+
+export const getHTML = (vditor: IVditor) => {
+    if (vditor.currentMode === "sv") {
+        return vditor.lute.Md2HTML(getMarkdown(vditor));
+    } else if (vditor.currentMode === "wysiwyg") {
+        return vditor.lute.VditorDOM2HTML(vditor.wysiwyg.element.innerHTML);
+    } else if (vditor.currentMode === "ir") {
+        return vditor.lute.VditorIRDOM2HTML(vditor.ir.element.innerHTML);
+    }
+};