vditor 3.8.7

package/src/ts/markdown/getMarkdown.ts

@@ -0,0 +1,12 @@
+import {code160to32} from "../util/code160to32";
+
+export const getMarkdown = (vditor: IVditor) => {
+    if (vditor.currentMode === "sv") {
+        return code160to32(`${vditor.sv.element.textContent}\n`.replace(/\n\n$/, "\n"));
+    } else if (vditor.currentMode === "wysiwyg") {
+        return vditor.lute.VditorDOM2Md(vditor.wysiwyg.element.innerHTML);
+    } else if (vditor.currentMode === "ir") {
+        return vditor.lute.VditorIRDOM2Md(vditor.ir.element.innerHTML);
+    }
+    return "";
+};

package/src/ts/markdown/graphvizRender.ts

@@ -0,0 +1,49 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {graphvizRenderAdapter} from "./adapterRender";
+
+declare class Viz {
+    public renderSVGElement: (code: string) => Promise<any>;
+
+    constructor({ }: { worker: Worker });
+}
+
+export const graphvizRender = (element: HTMLElement, cdn = Constants.CDN) => {
+    const graphvizElements = graphvizRenderAdapter.getElements(element);
+
+    if (graphvizElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/dist/js/graphviz/viz.js`, "vditorGraphVizScript").then(() => {
+        graphvizElements.forEach((e: HTMLDivElement) => {
+            const code = graphvizRenderAdapter.getCode(e);
+            if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                return;
+            }
+
+            if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
+                return;
+            }
+
+            try {
+                const blob = new Blob([`importScripts('${(document.getElementById("vditorGraphVizScript") as HTMLScriptElement).src.replace("viz.js", "full.render.js")}');`],
+                    { type: "application/javascript" });
+                const url = window.URL || window.webkitURL;
+                const blobUrl = url.createObjectURL(blob);
+                const worker = new Worker(blobUrl);
+                new Viz({ worker })
+                    .renderSVGElement(code).then((result: HTMLElement) => {
+                        e.innerHTML = result.outerHTML;
+                    }).catch((error) => {
+                        e.innerHTML = `graphviz render error: <br>${error}`;
+                        e.className = "vditor-reset--error";
+                    });
+            } catch (e) {
+                console.error("graphviz error", e);
+            }
+
+            e.setAttribute("data-processed", "true");
+        });
+    });
+};

package/src/ts/markdown/highlightRender.ts

@@ -0,0 +1,82 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {addStyle} from "../util/addStyle";
+
+declare const hljs: {
+    highlightElement(element: Element): void;
+};
+
+export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Document = document,
+                                cdn = Constants.CDN) => {
+    let style = hljsOption.style;
+    if (!Constants.CODE_THEME.includes(style)) {
+        style = "github";
+    }
+    const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
+    const href = `${cdn}/dist/js/highlight.js/styles/${style}.css`;
+    if (vditorHljsStyle && vditorHljsStyle.href !== href) {
+        vditorHljsStyle.remove();
+    }
+    addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.css`, "vditorHljsStyle");
+
+    if (hljsOption.enable === false) {
+        return;
+    }
+
+    const codes = element.querySelectorAll("pre > code");
+    if (codes.length === 0) {
+        return;
+    }
+
+    addScript(`${cdn}/dist/js/highlight.js/highlight.pack.js`, "vditorHljsScript").then(() => {
+        element.querySelectorAll("pre > code").forEach((block) => {
+            // ir & wysiwyg 区域不渲染
+            if (block.parentElement.classList.contains("vditor-ir__marker--pre") ||
+                block.parentElement.classList.contains("vditor-wysiwyg__pre")) {
+                return;
+            }
+
+            if (block.classList.contains("language-mermaid") || block.classList.contains("language-flowchart") ||
+                block.classList.contains("language-echarts") || block.classList.contains("language-mindmap") ||
+                block.classList.contains("language-plantuml") ||
+                block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
+                block.classList.contains("language-math")) {
+                return;
+            }
+            hljs.highlightElement(block);
+
+            if (!hljsOption.lineNumber) {
+                return;
+            }
+
+            block.classList.add("vditor-linenumber");
+            let linenNumberTemp: HTMLDivElement = block.querySelector(".vditor-linenumber__temp");
+            if (!linenNumberTemp) {
+                linenNumberTemp = document.createElement("div");
+                linenNumberTemp.className = "vditor-linenumber__temp";
+                block.insertAdjacentElement("beforeend", linenNumberTemp);
+            }
+            const whiteSpace = getComputedStyle(block).whiteSpace;
+            let isSoftWrap = false;
+            if (whiteSpace === "pre-wrap" || whiteSpace === "pre-line") {
+                isSoftWrap = true;
+            }
+            let lineNumberHTML = "";
+            const lineList = block.textContent.split(/\r\n|\r|\n/g);
+            lineList.pop();
+            lineList.map((line) => {
+                let lineHeight = "";
+                if (isSoftWrap) {
+                    linenNumberTemp.textContent = line || "\n";
+                    lineHeight = ` style="height:${linenNumberTemp.getBoundingClientRect().height}px"`;
+                }
+                lineNumberHTML += `<span${lineHeight}></span>`;
+            });
+
+            linenNumberTemp.style.display = "none";
+            lineNumberHTML = `<span class="vditor-linenumber__rows">${lineNumberHTML}</span>`;
+            block.insertAdjacentHTML("beforeend", lineNumberHTML);
+        });
+    });
+
+};

package/src/ts/markdown/lazyLoadImageRender.ts

@@ -0,0 +1,56 @@
+declare global {
+    interface Window {
+        vditorImageIntersectionObserver: IntersectionObserver;
+    }
+}
+
+export const lazyLoadImageRender = (element: (HTMLElement | Document) = document) => {
+    const loadImg = (it: HTMLImageElement) => {
+        const testImage = document.createElement("img");
+        testImage.src = it.getAttribute("data-src");
+        testImage.addEventListener("load", () => {
+            if (!it.getAttribute("style") && !it.getAttribute("class") &&
+                !it.getAttribute("width") && !it.getAttribute("height")) {
+                if (testImage.naturalHeight > testImage.naturalWidth &&
+                    testImage.naturalWidth / testImage.naturalHeight <
+                    document.querySelector(".vditor-reset").clientWidth / (window.innerHeight - 40) &&
+                    testImage.naturalHeight > (window.innerHeight - 40)) {
+                    it.style.height = (window.innerHeight - 40) + "px";
+                }
+            }
+
+            it.src = testImage.src;
+        });
+        it.removeAttribute("data-src");
+    };
+
+    if (!("IntersectionObserver" in window)) {
+        element.querySelectorAll("img").forEach((imgElement: HTMLImageElement) => {
+            if (imgElement.getAttribute("data-src")) {
+                loadImg(imgElement);
+            }
+        });
+        return false;
+    }
+
+    if (window.vditorImageIntersectionObserver) {
+        window.vditorImageIntersectionObserver.disconnect();
+        element.querySelectorAll("img").forEach((imgElement) => {
+            window.vditorImageIntersectionObserver.observe(imgElement);
+        });
+    } else {
+        window.vditorImageIntersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entrie: IntersectionObserverEntry & { target: HTMLImageElement }) => {
+                if ((typeof entrie.isIntersecting === "undefined"
+                    ? entrie.intersectionRatio !== 0
+                    : entrie.isIntersecting)
+                    && entrie.target.getAttribute("data-src")) {
+                    loadImg(entrie.target);
+                }
+            });
+        });
+        element.querySelectorAll("img").forEach((imgElement) => {
+            window.vditorImageIntersectionObserver.observe(imgElement);
+        });
+    }
+};

package/src/ts/markdown/mathRender.ts

@@ -0,0 +1,142 @@
+import {Constants} from "../constants";
+import {addScript, addScriptSync} from "../util/addScript";
+import {addStyle} from "../util/addStyle";
+import {code160to32} from "../util/code160to32";
+import {mathRenderAdapter} from "./adapterRender";
+
+declare const katex: {
+    renderToString(math: string, option: {
+        displayMode: boolean;
+        output: string;
+    }): string;
+};
+
+declare global {
+    interface Window {
+        MathJax: any;
+    }
+}
+
+export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?: IMath }) => {
+    const mathElements = mathRenderAdapter.getElements(element);
+
+    if (mathElements.length === 0) {
+        return;
+    }
+
+    const defaultOptions = {
+        cdn: Constants.CDN,
+        math: {
+            engine: "KaTeX",
+            inlineDigit: false,
+            macros: {},
+        },
+    };
+
+    if (options && options.math) {
+        options.math =
+            Object.assign({}, defaultOptions.math, options.math);
+    }
+    options = Object.assign({}, defaultOptions, options);
+
+    if (options.math.engine === "KaTeX") {
+        addStyle(`${options.cdn}/dist/js/katex/katex.min.css`, "vditorKatexStyle");
+        addScript(`${options.cdn}/dist/js/katex/katex.min.js`, "vditorKatexScript").then(() => {
+            mathElements.forEach((mathElement) => {
+                if (mathElement.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                    mathElement.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                    return;
+                }
+                if (mathElement.getAttribute("data-math")) {
+                    return;
+                }
+                const math = code160to32(mathRenderAdapter.getCode(mathElement));
+                mathElement.setAttribute("data-math", math);
+                try {
+                    mathElement.innerHTML = katex.renderToString(math, {
+                        displayMode: mathElement.tagName === "DIV",
+                        output: "html",
+                    });
+                } catch (e) {
+                    mathElement.innerHTML = e.message;
+                    mathElement.className = "language-math vditor-reset--error";
+                }
+
+                mathElement.addEventListener("copy", (event: ClipboardEvent) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    const vditorMathElement = (event.currentTarget as HTMLElement).closest(".language-math");
+                    event.clipboardData.setData("text/html", vditorMathElement.innerHTML);
+                    event.clipboardData.setData("text/plain",
+                        vditorMathElement.getAttribute("data-math"));
+                });
+            });
+        });
+    } else if (options.math.engine === "MathJax") {
+        const chainAsync = (fns: any) => {
+            if (fns.length === 0) {
+                return;
+            }
+            let curr = 0;
+            const last = fns[fns.length - 1];
+            const next = () => {
+                const fn = fns[curr++];
+                fn === last ? fn() : fn(next);
+            };
+            next();
+        };
+        if (!window.MathJax) {
+            window.MathJax = {
+                loader: {
+                    paths: { mathjax: `${options.cdn}/dist/js/mathjax` },
+                },
+                startup: {
+                    typeset: false,
+                },
+                tex: {
+                    macros: options.math.macros,
+                },
+            };
+        }
+        // 循环加载会抛异常
+        addScriptSync(`${options.cdn}/dist/js/mathjax/tex-svg-full.js`, "protyleMathJaxScript");
+        const renderMath = (mathElement: Element, next?: () => void) => {
+            const math = code160to32(mathElement.textContent).trim();
+            const mathOptions = window.MathJax.getMetricsFor(mathElement);
+            mathOptions.display = mathElement.tagName === "DIV";
+            window.MathJax.tex2svgPromise(math, mathOptions).then((node: Element) => {
+                mathElement.innerHTML = "";
+                mathElement.setAttribute("data-math", math);
+                mathElement.append(node);
+                window.MathJax.startup.document.clear();
+                window.MathJax.startup.document.updateDocument();
+                const errorTextElement = node.querySelector('[data-mml-node="merror"]');
+                if (errorTextElement && errorTextElement.textContent.trim() !== "") {
+                    mathElement.innerHTML = errorTextElement.textContent.trim();
+                    mathElement.className = "vditor-reset--error";
+                }
+                if (next) {
+                    next();
+                }
+            });
+        };
+        window.MathJax.startup.promise.then(() => {
+            const chains: any[] = [];
+            for (let i = 0; i < mathElements.length; i++) {
+                const mathElement = mathElements[i];
+                if (!mathElement.parentElement.classList.contains("vditor-wysiwyg__pre") &&
+                    !mathElement.parentElement.classList.contains("vditor-ir__marker--pre") &&
+                    !mathElement.getAttribute("data-math") && code160to32(mathElement.textContent).trim()) {
+                    chains.push((next: () => void) => {
+                        if (i === mathElements.length - 1) {
+                            renderMath(mathElement);
+                        } else {
+                            renderMath(mathElement, next);
+                        }
+                    });
+                }
+            }
+            chainAsync(chains);
+        });
+    }
+};

package/src/ts/markdown/mediaRender.ts

@@ -0,0 +1,78 @@
+const videoRender = (element: HTMLElement, url: string) => {
+    element.insertAdjacentHTML("afterend", `<video controls="controls" src="${url}"></video>`);
+    element.remove();
+};
+
+const audioRender = (element: HTMLElement, url: string) => {
+    element.insertAdjacentHTML("afterend", `<audio controls="controls" src="${url}"></audio>`);
+    element.remove();
+};
+
+const iframeRender = (element: HTMLElement, url: string) => {
+    const youtubeMatch = url.match(/\/\/(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w|-]{11})(?:(?:[\?&]t=)(\S+))?/);
+    const youkuMatch = url.match(/\/\/v\.youku\.com\/v_show\/id_(\w+)=*\.html/);
+    const qqMatch = url.match(/\/\/v\.qq\.com\/x\/cover\/.*\/([^\/]+)\.html\??.*/);
+    const coubMatch = url.match(/(?:www\.|\/\/)coub\.com\/view\/(\w+)/);
+    const facebookMatch = url.match(/(?:www\.|\/\/)facebook\.com\/([^\/]+)\/videos\/([0-9]+)/);
+    const dailymotionMatch = url.match(/.+dailymotion.com\/(video|hub)\/(\w+)\?/);
+    const bilibiliMatch = url.match(/(?:www\.|\/\/)bilibili\.com\/video\/(\w+)/);
+    const tedMatch = url.match(/(?:www\.|\/\/)ted\.com\/talks\/(\w+)/);
+
+    if (youtubeMatch && youtubeMatch[1].length === 11) {
+        element.insertAdjacentHTML("afterend",
+            `<iframe class="iframe__video" src="//www.youtube.com/embed/${youtubeMatch[1] +
+            (youtubeMatch[2] ? "?start=" + youtubeMatch[2] : "")}"></iframe>`);
+        element.remove();
+    } else if (youkuMatch && youkuMatch[1]) {
+        element.insertAdjacentHTML("afterend",
+            `<iframe class="iframe__video" src="//player.youku.com/embed/${youkuMatch[1]}"></iframe>`);
+        element.remove();
+    } else if (qqMatch && qqMatch[1]) {
+        element.insertAdjacentHTML("afterend",
+            `<iframe class="iframe__video" src="https://v.qq.com/txp/iframe/player.html?vid=${qqMatch[1]}"></iframe>`);
+        element.remove();
+    } else if (coubMatch && coubMatch[1]) {
+        element.insertAdjacentHTML("afterend",
+            `<iframe class="iframe__video"
+ src="//coub.com/embed/${coubMatch[1]}?muted=false&autostart=false&originalSize=true&startWithHD=true"></iframe>`);
+        element.remove();
+    } else if (facebookMatch && facebookMatch[0]) {
+        element.insertAdjacentHTML("afterend",
+            `<iframe class="iframe__video"
+ src="https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(facebookMatch[0])}"></iframe>`);
+        element.remove();
+    } else if (dailymotionMatch && dailymotionMatch[2]) {
+        element.insertAdjacentHTML("afterend",
+            `<iframe class="iframe__video"
+ src="https://www.dailymotion.com/embed/video/${dailymotionMatch[2]}"></iframe>`);
+        element.remove();
+    } else if (bilibiliMatch && bilibiliMatch[1]) {
+        element.insertAdjacentHTML("afterend",
+            `<iframe class="iframe__video"
+ src="//player.bilibili.com/player.html?bvid=${bilibiliMatch[1]}"></iframe>`);
+        element.remove();
+    } else if (tedMatch && tedMatch[1]) {
+        element.insertAdjacentHTML("afterend",
+            `<iframe class="iframe__video" src="//embed.ted.com/talks/${tedMatch[1]}"></iframe>`);
+        element.remove();
+    }
+};
+
+export const mediaRender = (element: HTMLElement) => {
+    if (!element) {
+        return;
+    }
+    element.querySelectorAll("a").forEach((aElement) => {
+        const url = aElement.getAttribute("href");
+        if (!url) {
+            return;
+        }
+        if (url.match(/^.+.(mp4|m4v|ogg|ogv|webm)$/)) {
+            videoRender(aElement, url);
+        } else if (url.match(/^.+.(mp3|wav|flac)$/)) {
+            audioRender(aElement, url);
+        } else {
+            iframeRender(aElement, url);
+        }
+    });
+};

package/src/ts/markdown/mermaidRender.ts

@@ -0,0 +1,127 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {mermaidRenderAdapter} from "./adapterRender";
+
+declare const mermaid: {
+    initialize(options: any): void,
+    init(options: any, element: Element): void,
+};
+
+export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
+    const mermaidElements = mermaidRenderAdapter.getElements(element);
+    if (mermaidElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js`, "vditorMermaidScript").then(() => {
+        const config: any = {
+            altFontFamily: "sans-serif",
+            flowchart: {
+                htmlLabels: true,
+                useMaxWidth: true,
+            },
+            fontFamily: "sans-serif",
+            gantt: {
+                leftPadding: 75,
+                rightPadding: 20,
+            },
+            securityLevel: "loose",
+            sequence: {
+                boxMargin: 8,
+                diagramMarginX: 8,
+                diagramMarginY: 8,
+                useMaxWidth: true,
+            },
+            startOnLoad: false,
+        };
+        if (theme === "dark") {
+            config.theme = "dark";
+            config.themeVariables = {
+                activationBkgColor: "hsl(180, 1.5873015873%, 28.3529411765%)",
+                activationBorderColor: "#81B1DB",
+                activeTaskBkgColor: "#81B1DB",
+                activeTaskBorderColor: "#ffffff",
+                actorBkg: "#1f2020",
+                actorBorder: "#81B1DB",
+                actorLineColor: "lightgrey",
+                actorTextColor: "lightgrey",
+                altBackground: "hsl(0, 0%, 40%)",
+                altSectionBkgColor: "#333",
+                arrowheadColor: "lightgrey",
+                background: "#333",
+                border1: "#81B1DB",
+                border2: "rgba(255, 255, 255, 0.25)",
+                classText: "#e0dfdf",
+                clusterBkg: "hsl(180, 1.5873015873%, 28.3529411765%)",
+                clusterBorder: "rgba(255, 255, 255, 0.25)",
+                critBkgColor: "#E83737",
+                critBorderColor: "#E83737",
+                darkTextColor: "hsl(28.5714285714, 17.3553719008%, 86.2745098039%)",
+                defaultLinkColor: "lightgrey",
+                doneTaskBkgColor: "lightgrey",
+                doneTaskBorderColor: "grey",
+                edgeLabelBackground: "hsl(0, 0%, 34.4117647059%)",
+                errorBkgColor: "#a44141",
+                errorTextColor: "#ddd",
+                fillType0: "#1f2020",
+                fillType1: "hsl(180, 1.5873015873%, 28.3529411765%)",
+                fillType2: "hsl(244, 1.5873015873%, 12.3529411765%)",
+                fillType3: "hsl(244, 1.5873015873%, 28.3529411765%)",
+                fillType4: "hsl(116, 1.5873015873%, 12.3529411765%)",
+                fillType5: "hsl(116, 1.5873015873%, 28.3529411765%)",
+                fillType6: "hsl(308, 1.5873015873%, 12.3529411765%)",
+                fillType7: "hsl(308, 1.5873015873%, 28.3529411765%)",
+                fontFamily: "\"trebuchet ms\", verdana, arial",
+                fontSize: "16px",
+                gridColor: "lightgrey",
+                labelBackground: "#181818",
+                labelBoxBkgColor: "#1f2020",
+                labelBoxBorderColor: "#81B1DB",
+                labelColor: "#ccc",
+                labelTextColor: "lightgrey",
+                lineColor: "lightgrey",
+                loopTextColor: "lightgrey",
+                mainBkg: "#1f2020",
+                mainContrastColor: "lightgrey",
+                nodeBkg: "#1f2020",
+                nodeBorder: "#81B1DB",
+                noteBkgColor: "#fff5ad",
+                noteBorderColor: "rgba(255, 255, 255, 0.25)",
+                noteTextColor: "#1f2020",
+                primaryBorderColor: "hsl(180, 0%, 2.3529411765%)",
+                primaryColor: "#1f2020",
+                primaryTextColor: "#e0dfdf",
+                secondBkg: "hsl(180, 1.5873015873%, 28.3529411765%)",
+                secondaryBorderColor: "hsl(180, 0%, 18.3529411765%)",
+                secondaryColor: "hsl(180, 1.5873015873%, 28.3529411765%)",
+                secondaryTextColor: "rgb(183.8476190475, 181.5523809523, 181.5523809523)",
+                sectionBkgColor: "hsl(52.9411764706, 28.813559322%, 58.431372549%)",
+                sectionBkgColor2: "#EAE8D9",
+                sequenceNumberColor: "black",
+                signalColor: "lightgrey",
+                signalTextColor: "lightgrey",
+                taskBkgColor: "hsl(180, 1.5873015873%, 35.3529411765%)",
+                taskBorderColor: "#ffffff",
+                taskTextClickableColor: "#003163",
+                taskTextColor: "hsl(28.5714285714, 17.3553719008%, 86.2745098039%)",
+                taskTextDarkColor: "hsl(28.5714285714, 17.3553719008%, 86.2745098039%)",
+                taskTextLightColor: "lightgrey",
+                taskTextOutsideColor: "lightgrey",
+                tertiaryBorderColor: "hsl(20, 0%, 2.3529411765%)",
+                tertiaryColor: "hsl(20, 1.5873015873%, 12.3529411765%)",
+                tertiaryTextColor: "rgb(222.9999999999, 223.6666666666, 223.9999999999)",
+                textColor: "#ccc",
+                titleColor: "#F9FFFE",
+                todayLineColor: "#DB5757",
+            };
+        }
+        mermaid.initialize(config);
+        mermaidElements.forEach((item) => {
+            const code = mermaidRenderAdapter.getCode(item);
+            if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
+                return;
+            }
+            mermaid.init(undefined, item);
+            item.setAttribute("data-processed", "true");
+        });
+    });
+};

package/src/ts/markdown/mindmapRender.ts

@@ -0,0 +1,74 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {mindmapRenderAdapter} from "./adapterRender";
+
+declare const echarts: {
+    init(element: HTMLElement, theme?: string): IEChart;
+};
+
+export const mindmapRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
+    const mindmapElements = mindmapRenderAdapter.getElements(element);
+    if (mindmapElements.length > 0) {
+        addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
+            mindmapElements.forEach((e: HTMLDivElement) => {
+                if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                    e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                    return;
+                }
+                const text = mindmapRenderAdapter.getCode(e);
+                if (!text) {
+                    return;
+                }
+                try {
+                    if (e.getAttribute("data-processed") === "true") {
+                        return;
+                    }
+                    echarts.init(e, theme === "dark" ? "dark" : undefined).setOption({
+                        series: [
+                            {
+                                data: [JSON.parse(decodeURIComponent(text))],
+                                initialTreeDepth: -1,
+                                itemStyle: {
+                                    borderWidth: 0,
+                                    color: "#4285f4",
+                                },
+                                label: {
+                                    backgroundColor: "#f6f8fa",
+                                    borderColor: "#d1d5da",
+                                    borderRadius: 5,
+                                    borderWidth: 0.5,
+                                    color: "#586069",
+                                    lineHeight: 20,
+                                    offset: [-5, 0],
+                                    padding: [0, 5],
+                                    position: "insideRight",
+                                },
+                                lineStyle: {
+                                    color: "#d1d5da",
+                                    width: 1,
+                                },
+                                roam: true,
+                                symbol: (value: number, params: { data?: { children?: object } }) => {
+                                    if (params?.data?.children) {
+                                        return "circle";
+                                    } else {
+                                        return "path://";
+                                    }
+                                },
+                                type: "tree",
+                            },
+                        ],
+                        tooltip: {
+                            trigger: "item",
+                            triggerOn: "mousemove",
+                        },
+                    });
+                    e.setAttribute("data-processed", "true");
+                } catch (error) {
+                    e.className = "vditor-reset--error";
+                    e.innerHTML = `mindmap render error: <br>${error}`;
+                }
+            });
+        });
+    }
+};