@8btc/mditor 0.0.1

package/src/ts/ir/process.ts

@@ -0,0 +1,222 @@
+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, "");
+            (vditor.options.preview.hljs.langs || Constants.ALIAS_CODE_LANGUAGES.concat((window.hljs?.listLanguages() ?? []).sort())).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") {
+                    html = `${prefix}\n${range.toString()}<wbr>${suffix}`;
+                } else if (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 && headingLength !== 0) {
+                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/SMILESRender.ts

@@ -0,0 +1,29 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {SMILESRenderAdapter} from "./adapterRender";
+import {genUUID} from "../util/function";
+
+declare class SmiDrawer {
+    constructor(moleculeOptions: IObject, reactionOptions: IObject);
+
+    public draw: (code: string, id: string, theme?: string) => void;
+}
+
+export const SMILESRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
+    const SMILESElements = SMILESRenderAdapter.getElements(element);
+    if (SMILESElements.length > 0) {
+        addScript(`${cdn}/dist/js/smiles-drawer/smiles-drawer.min.js?v=2.1.7`, "vditorAbcjsScript").then(() => {
+            let sd = new SmiDrawer({}, {});
+            SMILESElements.forEach((item: HTMLDivElement) => {
+                const code = SMILESRenderAdapter.getCode(item).trim();
+                if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
+                    return;
+                }
+                const id = "smiles" + genUUID()
+                item.innerHTML = `<svg id="${id}"></svg>`;
+                sd.draw(code, '#' + id, theme === "dark" ? "dark" : undefined)
+                item.setAttribute("data-processed", "true");
+            });
+        });
+    }
+};

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,96 @@
+export const mathRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-math"),
+};
+export const SMILESRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-smiles"),
+};
+export const mermaidRenderAdapter = {
+    /** 不仅要返回code，并且需要将 code 设置为 el 的 innerHTML */
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-mermaid"),
+};
+export const markmapRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-markmap"),
+};
+export const mindmapRenderAdapter = {
+    getCode: (el: Element) => el.getAttribute("data-code"),
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-mindmap"),
+};
+import { hasClosestByClassName } from "../util/hasClosest";
+
+/**
+ * ECharts 渲染适配器：获取/定位 `.language-echarts` 代码块与相关元素。
+ */
+export const chartRenderAdapter = {
+    getCode: (el: HTMLElement) => el.innerText,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-echarts"),
+    /**
+     * 更新同级别的 Markdown 源代码（vditor-wysiwyg__pre > code），并进行“一个字段一行”的轻量格式化。
+     * 不修改渲染区域（canvas），避免过度格式化数组/内层对象。
+     * @param el 预览区域中的 `.language-echarts` 元素或其子孙节点
+     * @param code 新的 ECharts 配置文本（JSON/JS 字符串）
+     */
+    setCode: (el: HTMLElement, code: string) => {
+        // 轻量格式化：顶层字段一行，数组与子对象保持紧凑（单行 JSON）
+        const formatTopLevelOneLine = (obj: any): string => {
+            try {
+                const keys = Object.keys(obj);
+                const lines = keys.map((key) => {
+                    const val = (obj as any)[key];
+                    let vStr = "";
+                    if (Array.isArray(val)) {
+                        vStr = JSON.stringify(val);
+                    } else if (val && typeof val === "object") {
+                        vStr = JSON.stringify(val);
+                    } else {
+                        vStr = JSON.stringify(val);
+                    }
+                    return `"${key}": ${vStr}`;
+                });
+                return `{\n${lines.join(",\n")}\n}`;
+            } catch {
+                return JSON.stringify(obj);
+            }
+        };
+
+        let finalText = code ?? "";
+        try {
+            const parsed = JSON.parse(code);
+            finalText = formatTopLevelOneLine(parsed);
+        } catch {
+        }
+
+        // 寻找同级 vditor-wysiwyg__block，然后定位源代码 pre > code
+        const block = hasClosestByClassName(el, "vditor-wysiwyg__block") as HTMLElement | false;
+        if (block) {
+            const sourcePre = block.firstElementChild as HTMLElement | null;
+            if (sourcePre && sourcePre.classList.contains("vditor-wysiwyg__pre")) {
+                const sourceCode = sourcePre.querySelector("code") as HTMLElement | null;
+                if (sourceCode) {
+                    sourceCode.textContent = finalText;
+                    sourceCode.classList.add("language-echarts");
+                    return;
+                }
+            }
+        }
+    },
+};
+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;
+        }
+    };
+};