vditor 3.8.5 → 3.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "3.8.5",
+  "version": "3.8.9",
   "description": "♏ 易于使用的 Markdown 编辑器，为适配不同的应用场景而生",
   "author": "Vanessa <v@b3log.org> (http://vanessa.b3log.org)",
   "homepage": "https://b3log.org/vditor",
@@ -34,10 +34,10 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "mini-css-extract-plugin": "^0.8.2",
-    "node-sass": "^4.14.1",
+    "node-sass": "^7.0.0",
     "postcss-loader": "^5.2.0",
     "puppeteer": "^1.20.0",
-    "sass-loader": "^10.2.0",
+    "sass-loader": "^12.4.0",
     "style-loader": "^1.3.0",
     "terser-webpack-plugin": "^5.1.2",
     "ts-jest": "^26.5.6",
@@ -47,7 +47,7 @@
     "webpack": "^5.37.0",
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^4.1.0"
   },
   "license": "MIT",
   "repository": "git://github.com/Vanessa219/vditor.git",

package/src/assets/scss/_content.scss

@@ -91,6 +91,10 @@
       padding: 10px;
       margin: 0 auto;
     }
+
+    img:not(.emoji) {
+      cursor: pointer;
+    }
   }
 
   &-devtools {

package/src/assets/scss/_reset.scss

@@ -155,6 +155,9 @@
       margin-bottom: 16px;
       overflow: auto;
       border-spacing: 0;
+      display: block;
+      word-break: keep-all;
+      width: 100%;
 
       tr {
         background-color: #fafbfc;
@@ -166,6 +169,14 @@
         padding: 6px 13px;
         border: 1px solid #dfe2e5;
         word-break: normal;
+        white-space: nowrap;
+
+        &:first-child::after {
+          content: "";
+          display: inline-block;
+          vertical-align: top;
+          min-height: 24px;
+        }
       }
 
       th {

package/src/index.ts

@@ -3,42 +3,40 @@ import VditorMethod from "./method";
 import {Constants, VDITOR_VERSION} from "./ts/constants";
 import {DevTools} from "./ts/devtools/index";
 import {Hint} from "./ts/hint/index";
-import {i18n} from "./ts/i18n/index";
 import {IR} from "./ts/ir/index";
 import {input as irInput} from "./ts/ir/input";
 import {processAfterRender} from "./ts/ir/process";
 import {getHTML} from "./ts/markdown/getHTML";
 import {getMarkdown} from "./ts/markdown/getMarkdown";
 import {setLute} from "./ts/markdown/setLute";
-import {Outline} from "./ts/outline";
+import {Outline} from "./ts/outline/index";
 import {Preview} from "./ts/preview/index";
 import {Resize} from "./ts/resize/index";
 import {Editor} from "./ts/sv/index";
 import {inputEvent} from "./ts/sv/inputEvent";
 import {processAfterRender as processSVAfterRender} from "./ts/sv/process";
-import {Tip} from "./ts/tip";
+import {Tip} from "./ts/tip/index";
 import {Toolbar} from "./ts/toolbar/index";
 import {disableToolbar, hidePanel} from "./ts/toolbar/setToolbar";
 import {enableToolbar} from "./ts/toolbar/setToolbar";
-import {initUI} from "./ts/ui/initUI";
+import {initUI, UIUnbindListener} from "./ts/ui/initUI";
 import {setCodeTheme} from "./ts/ui/setCodeTheme";
 import {setContentTheme} from "./ts/ui/setContentTheme";
 import {setPreviewMode} from "./ts/ui/setPreviewMode";
 import {setTheme} from "./ts/ui/setTheme";
-import {Undo} from "./ts/undo";
+import {Undo} from "./ts/undo/index";
 import {Upload} from "./ts/upload/index";
 import {addScript, addScriptSync} from "./ts/util/addScript";
 import {getSelectText} from "./ts/util/getSelectText";
 import {Options} from "./ts/util/Options";
 import {processCodeRender} from "./ts/util/processCode";
 import {getCursorPosition, getEditorRange} from "./ts/util/selection";
-import {WYSIWYG} from "./ts/wysiwyg";
 import {afterRenderEvent} from "./ts/wysiwyg/afterRenderEvent";
+import {WYSIWYG} from "./ts/wysiwyg/index";
 import {input} from "./ts/wysiwyg/input";
 import {renderDomByMd} from "./ts/wysiwyg/renderDomByMd";
 
 class Vditor extends VditorMethod {
-
     public readonly version: string;
     public vditor: IVditor;
 
@@ -68,76 +66,37 @@ class Vditor extends VditorMethod {
         const getOptions = new Options(options);
         const mergedOptions = getOptions.merge();
 
-        if (!["en_US", "ja_JP", "ko_KR", "ru_RU", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
-            throw new Error("options.lang error, see https://ld246.com/article/1549638745630#options");
-        }
-
-        this.vditor = {
-            currentMode: mergedOptions.mode,
-            element: id,
-            hint: new Hint(mergedOptions.hint.extend),
-            lute: undefined,
-            options: mergedOptions,
-            originalInnerHTML: id.innerHTML,
-            outline: new Outline(i18n[mergedOptions.lang].outline),
-            tip: new Tip(),
-        };
-
-        this.vditor.sv = new Editor(this.vditor);
-        this.vditor.undo = new Undo();
-        this.vditor.wysiwyg = new WYSIWYG(this.vditor);
-        this.vditor.ir = new IR(this.vditor);
-        this.vditor.toolbar = new Toolbar(this.vditor);
-
-        if (mergedOptions.resize.enable) {
-            this.vditor.resize = new Resize(this.vditor);
-        }
-
-        if (this.vditor.toolbar.elements.devtools) {
-            this.vditor.devtools = new DevTools();
-        }
-
-        if (mergedOptions.upload.url || mergedOptions.upload.handler) {
-            this.vditor.upload = new Upload();
-        }
-
-        addScript(options._lutePath || `${mergedOptions.cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript")
-            .then(() => {
-                this.vditor.lute = setLute({
-                    autoSpace: this.vditor.options.preview.markdown.autoSpace,
-                    codeBlockPreview: this.vditor.options.preview.markdown.codeBlockPreview,
-                    emojiSite: this.vditor.options.hint.emojiPath,
-                    emojis: this.vditor.options.hint.emoji,
-                    fixTermTypo: this.vditor.options.preview.markdown.fixTermTypo,
-                    footnotes: this.vditor.options.preview.markdown.footnotes,
-                    headingAnchor: false,
-                    inlineMathDigit: this.vditor.options.preview.math.inlineDigit,
-                    linkBase: this.vditor.options.preview.markdown.linkBase,
-                    linkPrefix: this.vditor.options.preview.markdown.linkPrefix,
-                    listStyle: this.vditor.options.preview.markdown.listStyle,
-                    mark: this.vditor.options.preview.markdown.mark,
-                    mathBlockPreview: this.vditor.options.preview.markdown.mathBlockPreview,
-                    paragraphBeginningSpace: this.vditor.options.preview.markdown.paragraphBeginningSpace,
-                    sanitize: this.vditor.options.preview.markdown.sanitize,
-                    toc: this.vditor.options.preview.markdown.toc,
+        // 支持自定义国际化
+        if (!mergedOptions.i18n) {
+            if (!["en_US", "ja_JP", "ko_KR", "ru_RU", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
+                throw new Error(
+                    "options.lang error, see https://ld246.com/article/1549638745630#options",
+                );
+            } else {
+                const i18nScriptPrefix = "vditorI18nScript";
+                const i18nScriptID = i18nScriptPrefix + mergedOptions.lang;
+                document.querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`).forEach((el) => {
+                    if (el.id !== i18nScriptID) {
+                        document.head.removeChild(el);
+                    }
                 });
-
-                this.vditor.preview = new Preview(this.vditor);
-
-                initUI(this.vditor);
-
-                if (mergedOptions.after) {
-                    mergedOptions.after();
-                }
-                if (mergedOptions.icon) {
-                    // 防止初始化 2 个编辑器时加载 2 次
-                    addScriptSync(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
-                }
-            });
+                addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID).then(() => {
+                    this.init(id as HTMLElement, mergedOptions);
+                });
+            }
+        } else {
+            window.VditorI18n = mergedOptions.i18n;
+            this.init(id, mergedOptions);
+        }
     }
 
     /** 设置主题 */
-    public setTheme(theme: "dark" | "classic", contentTheme?: string, codeTheme?: string, contentThemePath?: string) {
+    public setTheme(
+        theme: "dark" | "classic",
+        contentTheme?: string,
+        codeTheme?: string,
+        contentThemePath?: string,
+    ) {
         this.vditor.options.theme = theme;
         setTheme(this.vditor);
         if (contentTheme) {
@@ -185,15 +144,22 @@ class Vditor extends VditorMethod {
     /** 禁用编辑器 */
     public disabled() {
         hidePanel(this.vditor, ["subToolbar", "hint", "popover"]);
-        disableToolbar(this.vditor.toolbar.elements, Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen",
-            "edit-mode"]));
-        this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "false");
+        disableToolbar(
+            this.vditor.toolbar.elements,
+            Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
+        );
+        this.vditor[this.vditor.currentMode].element.setAttribute(
+            "contenteditable",
+            "false",
+        );
     }
 
     /** 解除编辑器禁用 */
     public enable() {
-        enableToolbar(this.vditor.toolbar.elements, Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen",
-            "edit-mode"]));
+        enableToolbar(
+            this.vditor.toolbar.elements,
+            Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
+        );
         this.vditor.undo.resetIcon(this.vditor);
         this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "true");
     }
@@ -237,8 +203,9 @@ class Vditor extends VditorMethod {
     /** 启用缓存 */
     public enableCache() {
         if (!this.vditor.options.cache.id) {
-            throw new Error("need options.cache.id, see https://ld246.com/article/1549638745630#options");
-            return;
+            throw new Error(
+                "need options.cache.id, see https://ld246.com/article/1549638745630#options",
+            );
         }
         this.vditor.options.cache.enable = true;
     }
@@ -248,6 +215,11 @@ class Vditor extends VditorMethod {
         return this.vditor.lute.HTML2Md(value);
     }
 
+    /** markdown 转 JSON 输出 */
+    public exportJSON(value: string) {
+        return this.vditor.lute.RenderJSON(value);
+    }
+
     /** 获取 HTML */
     public getHTML() {
         return getHTML(this.vditor);
@@ -318,8 +290,9 @@ class Vditor extends VditorMethod {
             });
         } else {
             this.vditor.ir.element.innerHTML = this.vditor.lute.Md2VditorIRDOM(markdown);
-            this.vditor.ir.element.querySelectorAll(".vditor-ir__preview[data-render='2']").forEach(
-                (item: HTMLElement) => {
+            this.vditor.ir.element
+                .querySelectorAll(".vditor-ir__preview[data-render='2']")
+                .forEach((item: HTMLElement) => {
                     processCodeRender(item, this.vditor);
                 });
             processAfterRender(this.vditor, {
@@ -356,6 +329,9 @@ class Vditor extends VditorMethod {
         this.vditor.element.removeAttribute("style");
         document.getElementById("vditorIconScript").remove();
         this.clearCache();
+
+        UIUnbindListener();
+        this.vditor.wysiwyg.unbindListener();
     }
 
     /** 获取评论 ID */
@@ -379,13 +355,17 @@ class Vditor extends VditorMethod {
                 }
             });
         };
-        this.vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-            hlItem(item);
-        });
-        if (this.vditor.preview.element.style.display !== "none") {
-            this.vditor.preview.element.querySelectorAll(".vditor-comment").forEach((item) => {
+        this.vditor.wysiwyg.element
+            .querySelectorAll(".vditor-comment")
+            .forEach((item) => {
                 hlItem(item);
             });
+        if (this.vditor.preview.element.style.display !== "none") {
+            this.vditor.preview.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
+                    hlItem(item);
+                });
         }
     }
 
@@ -401,13 +381,17 @@ class Vditor extends VditorMethod {
                 }
             });
         };
-        this.vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-            unHlItem(item);
-        });
-        if (this.vditor.preview.element.style.display !== "none") {
-            this.vditor.preview.element.querySelectorAll(".vditor-comment").forEach((item) => {
+        this.vditor.wysiwyg.element
+            .querySelectorAll(".vditor-comment")
+            .forEach((item) => {
                 unHlItem(item);
             });
+        if (this.vditor.preview.element.style.display !== "none") {
+            this.vditor.preview.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
+                    unHlItem(item);
+                });
         }
     }
 
@@ -433,13 +417,17 @@ class Vditor extends VditorMethod {
             }
         };
         removeIds.forEach((removeId) => {
-            this.vditor.wysiwyg.element.querySelectorAll(".vditor-comment").forEach((item) => {
-                removeItem(item, removeId);
-            });
-            if (this.vditor.preview.element.style.display !== "none") {
-                this.vditor.preview.element.querySelectorAll(".vditor-comment").forEach((item) => {
+            this.vditor.wysiwyg.element
+                .querySelectorAll(".vditor-comment")
+                .forEach((item) => {
                     removeItem(item, removeId);
                 });
+            if (this.vditor.preview.element.style.display !== "none") {
+                this.vditor.preview.element
+                    .querySelectorAll(".vditor-comment")
+                    .forEach((item) => {
+                        removeItem(item, removeId);
+                    });
             }
         });
         afterRenderEvent(this.vditor, {
@@ -448,6 +436,77 @@ class Vditor extends VditorMethod {
             enableInput: false,
         });
     }
+
+    private init(id: HTMLElement, mergedOptions: IOptions) {
+        this.vditor = {
+            currentMode: mergedOptions.mode,
+            element: id,
+            hint: new Hint(mergedOptions.hint.extend),
+            lute: undefined,
+            options: mergedOptions,
+            originalInnerHTML: id.innerHTML,
+            outline: new Outline(window.VditorI18n.outline),
+            tip: new Tip(),
+        };
+
+        this.vditor.sv = new Editor(this.vditor);
+        this.vditor.undo = new Undo();
+        this.vditor.wysiwyg = new WYSIWYG(this.vditor);
+        this.vditor.ir = new IR(this.vditor);
+        this.vditor.toolbar = new Toolbar(this.vditor);
+
+        if (mergedOptions.resize.enable) {
+            this.vditor.resize = new Resize(this.vditor);
+        }
+
+        if (this.vditor.toolbar.elements.devtools) {
+            this.vditor.devtools = new DevTools();
+        }
+
+        if (mergedOptions.upload.url || mergedOptions.upload.handler) {
+            this.vditor.upload = new Upload();
+        }
+
+        addScript(
+            mergedOptions._lutePath ||
+            `${mergedOptions.cdn}/dist/js/lute/lute.min.js`,
+            "vditorLuteScript",
+        ).then(() => {
+            this.vditor.lute = setLute({
+                autoSpace: this.vditor.options.preview.markdown.autoSpace,
+                codeBlockPreview: this.vditor.options.preview.markdown
+                    .codeBlockPreview,
+                emojiSite: this.vditor.options.hint.emojiPath,
+                emojis: this.vditor.options.hint.emoji,
+                fixTermTypo: this.vditor.options.preview.markdown.fixTermTypo,
+                footnotes: this.vditor.options.preview.markdown.footnotes,
+                headingAnchor: false,
+                inlineMathDigit: this.vditor.options.preview.math.inlineDigit,
+                linkBase: this.vditor.options.preview.markdown.linkBase,
+                linkPrefix: this.vditor.options.preview.markdown.linkPrefix,
+                listStyle: this.vditor.options.preview.markdown.listStyle,
+                mark: this.vditor.options.preview.markdown.mark,
+                mathBlockPreview: this.vditor.options.preview.markdown
+                    .mathBlockPreview,
+                paragraphBeginningSpace: this.vditor.options.preview.markdown
+                    .paragraphBeginningSpace,
+                sanitize: this.vditor.options.preview.markdown.sanitize,
+                toc: this.vditor.options.preview.markdown.toc,
+            });
+
+            this.vditor.preview = new Preview(this.vditor);
+
+            initUI(this.vditor);
+
+            if (mergedOptions.after) {
+                mergedOptions.after();
+            }
+            if (mergedOptions.icon) {
+                // 防止初始化 2 个编辑器时加载 2 次
+                addScriptSync(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
+            }
+        });
+    }
 }
 
 export default Vditor;

package/src/method.ts

@@ -1,4 +1,5 @@
 import {abcRender} from "./ts/markdown/abcRender";
+import * as adapterRender from "./ts/markdown/adapterRender";
 import {chartRender} from "./ts/markdown/chartRender";
 import {codeRender} from "./ts/markdown/codeRender";
 import {flowchartRender} from "./ts/markdown/flowchartRender";
@@ -13,11 +14,14 @@ import {outlineRender} from "./ts/markdown/outlineRender";
 import {plantumlRender} from "./ts/markdown/plantumlRender";
 import {md2html, previewRender} from "./ts/markdown/previewRender";
 import {speechRender} from "./ts/markdown/speechRender";
-import { previewImage } from "./ts/preview/image";
-import { setCodeTheme } from "./ts/ui/setCodeTheme";
+import {previewImage} from "./ts/preview/image";
+import {setCodeTheme} from "./ts/ui/setCodeTheme";
 import {setContentTheme} from "./ts/ui/setContentTheme";
+
 class Vditor {
 
+    /** 点击图片放大 */
+    public static adapterRender = adapterRender;
     /** 点击图片放大 */
     public static previewImage = previewImage;
     /** 为 element 中的代码块添加复制按钮 */

package/src/ts/export/index.ts

@@ -1,4 +1,3 @@
-import {i18n} from "../i18n";
 import {getHTML} from "../markdown/getHTML";
 import {getMarkdown} from "../markdown/getMarkdown";
 
@@ -13,7 +12,7 @@ export const download = (vditor: IVditor, content: string, filename: string) =>
         aElement.click();
         aElement.remove();
     } else {
-        vditor.tip.show(i18n[vditor.options.lang].downloadTip, 0);
+        vditor.tip.show(window.VditorI18n.downloadTip, 0);
     }
 };
 
@@ -23,7 +22,7 @@ export const exportMarkdown = (vditor: IVditor) => {
 };
 
 export const exportPDF = (vditor: IVditor) => {
-    vditor.tip.show(i18n[vditor.options.lang].generate, 3800);
+    vditor.tip.show(window.VditorI18n.generate, 3800);
     const iframe = document.querySelector("iframe");
     iframe.contentDocument.open();
     iframe.contentDocument.write(`<link rel="stylesheet" href="${vditor.options.cdn}/dist/index.css"/>
@@ -56,12 +55,13 @@ window.addEventListener("message", (e) => {
 export const exportHTML = (vditor: IVditor) => {
     const content = getHTML(vditor);
     const html = `<html><head><link rel="stylesheet" type="text/css" href="${vditor.options.cdn}/dist/index.css"/>
+<script src="${vditor.options.cdn}/dist/js/i18n/${vditor.options.lang}.js"></script>
 <script src="${vditor.options.cdn}/dist/method.min.js"></script></head>
 <body><div class="vditor-reset" id="preview">${content}</div>
 <script>
     const previewElement = document.getElementById('preview')
     Vditor.setContentTheme('${vditor.options.preview.theme.current}', '${vditor.options.preview.theme.path}');
-    Vditor.codeRender(previewElement, '${vditor.options.lang}');
+    Vditor.codeRender(previewElement);
     Vditor.highlightRender(${JSON.stringify(vditor.options.preview.hljs)}, previewElement, '${vditor.options.cdn}');
     Vditor.mathRender(previewElement, {
         cdn: '${vditor.options.cdn}',
@@ -74,6 +74,8 @@ export const exportHTML = (vditor: IVditor) => {
     Vditor.mindmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
     Vditor.abcRender(previewElement, '${vditor.options.cdn}');
     Vditor.mediaRender(previewElement);
-</script></body></html>`;
+    Vditor.speechRender(previewElement);
+</script>
+<script src="${vditor.options.cdn}/dist/js/icons/${vditor.options.icon}.js"></script></body></html>`;
     download(vditor, html, content.substr(0, 10) + ".html");
 };

package/src/ts/hint/index.ts

@@ -59,8 +59,8 @@ export class Hint {
                 vditor.options.hint.extend.forEach((item) => {
                     if (item.key === this.splitChar) {
                         clearTimeout(this.timeId);
-                        this.timeId = window.setTimeout(() => {
-                            this.genHTML(item.hint(key), key, vditor);
+                        this.timeId = window.setTimeout(async () => {
+                            this.genHTML(await item.hint(key), key, vditor);
                         }, vditor.options.hint.delay);
                     }
                 });
@@ -148,15 +148,24 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
                 return;
             }
         }
-        if (vditor.currentMode === "wysiwyg" && range.startContainer.nodeType !== 3 &&
-            (range.startContainer as HTMLElement).firstElementChild.classList.contains("vditor-input")) {
-            const inputElement = (range.startContainer as HTMLElement).firstElementChild as HTMLInputElement;
-            inputElement.value = value.trimRight();
-            range.selectNodeContents(inputElement);
-            range.collapse(false);
-            inputElement.dispatchEvent(new CustomEvent("input"));
-            this.recentLanguage = value.trimRight();
-            return;
+        if (vditor.currentMode === "wysiwyg" && range.startContainer.nodeType !== 3 ) {
+            const startContainer = range.startContainer as HTMLElement;
+            let inputElement: HTMLInputElement;
+            if (startContainer.classList.contains("vditor-input")) {
+                inputElement = startContainer as HTMLInputElement;
+            } else {
+                inputElement = startContainer.firstElementChild as HTMLInputElement;
+            }
+            if (inputElement && inputElement.classList.contains("vditor-input")) {
+                inputElement.value = value.trimRight();
+                range.selectNodeContents(inputElement);
+                range.collapse(false);
+                // {detail: 1}用于标识这个自定义事件是在编程语言选择后触发的
+                // 用于在鼠标选择语言后，自动聚焦到代码输入框
+                inputElement.dispatchEvent(new CustomEvent("input", {detail: 1}));
+                this.recentLanguage = value.trimRight();
+                return;
+            }
         }
 
         range.setStart(range.startContainer, this.lastIndex);

package/src/ts/markdown/abcRender.ts

@@ -1,12 +1,13 @@
 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 = element.querySelectorAll(".language-abc");
+    const abcElements = abcRenderAdapter.getElements(element);
     if (abcElements.length > 0) {
         addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript").then(() => {
             abcElements.forEach((item: HTMLDivElement) => {
@@ -17,7 +18,7 @@ export const abcRender = (element: (HTMLElement | Document) = document, cdn = Co
                 if (item.getAttribute("data-processed") === "true") {
                     return;
                 }
-                ABCJS.renderAbc(item, item.textContent.trim());
+                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/chartRender.ts

@@ -1,12 +1,13 @@
 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 = element.querySelectorAll(".language-echarts");
+    const echartsElements = chartRenderAdapter.getElements(element);
     if (echartsElements.length > 0) {
         addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
             echartsElements.forEach((e: HTMLDivElement) => {
@@ -15,7 +16,7 @@ export const chartRender = (element: (HTMLElement | Document) = document, cdn =
                     return;
                 }
 
-                const text = e.innerText.trim();
+                const text = chartRenderAdapter.getCode(e).trim();
                 if (!text) {
                     return;
                 }