vditor 3.10.6 → 3.10.8

package/src/ts/constants.ts

@@ -5,65 +5,84 @@ const _VDITOR_VERSION = VDITOR_VERSION;
 export {_VDITOR_VERSION as VDITOR_VERSION};
 
 export abstract class Constants {
-  public static readonly ZWSP: string = "\u200b";
-  public static readonly DROP_EDITOR: string = "application/editor";
-  public static readonly MOBILE_WIDTH: number = 520;
-  public static readonly CLASS_MENU_DISABLED: string = "vditor-menu--disabled";
-  public static readonly EDIT_TOOLBARS: string[] = ["emoji", "headings", "bold", "italic", "strike", "link", "list",
-    "ordered-list", "outdent", "indent", "check", "line", "quote", "code", "inline-code", "insert-after",
-    "insert-before", "upload", "record", "table"];
-  public static readonly CODE_THEME: string[] = ["abap", "algol", "algol_nu", "arduino", "autumn", "borland", "bw",
-    "colorful", "dracula", "emacs", "friendly", "fruity", "github", "igor", "lovelace", "manni", "monokai",
-    "monokailight", "murphy", "native", "paraiso-dark", "paraiso-light", "pastie", "perldoc", "pygments",
-    "rainbow_dash", "rrt", "solarized-dark", "solarized-dark256", "solarized-light", "swapoff", "tango", "trac",
-    "vim", "vs", "xcode", "ant-design"];
-  public static readonly CODE_LANGUAGES: string[] = ["mermaid", "echarts", "mindmap", "plantuml", "abc", "graphviz", "flowchart", "apache",
-    "js", "ts", "html","markmap",
-    // common
-    "properties", "apache", "bash", "c", "csharp", "cpp", "css", "coffeescript", "diff", "go", "xml", "http",
-    "json", "java", "javascript", "kotlin", "less", "lua", "makefile", "markdown", "nginx", "objectivec", "php",
-    "php-template", "perl", "plaintext", "python", "python-repl", "r", "ruby", "rust", "scss", "sql", "shell",
-    "swift", "ini", "typescript", "vbnet", "yaml",
-    "ada", "clojure", "dart", "erb", "fortran", "gradle", "haskell", "julia", "julia-repl", "lisp", "matlab",
-    "pgsql", "powershell", "sql_more", "stata", "cmake", "mathematica",
-    // ext
-    "solidity", "yul"
-  ];
-  public static readonly CDN = `https://unpkg.com/vditor@${VDITOR_VERSION}`;
-  public static readonly MARKDOWN_OPTIONS = {
-    autoSpace: false,
-    gfmAutoLink: true,
-    codeBlockPreview: true,
-    fixTermTypo: false,
-    footnotes: true,
-    linkBase: "",
-    linkPrefix: "",
-    listStyle: false,
-    mark: false,
-    mathBlockPreview: true,
-    paragraphBeginningSpace: false,
-    sanitize: true,
-    toc: false,
-  };
-  public static readonly HLJS_OPTIONS = {
-    enable: true,
-    lineNumber: false,
-    defaultLang: "",
-    style: "github",
-  };
-  public static readonly MATH_OPTIONS: IMath = {
-    engine: "KaTeX",
-    inlineDigit: false,
-    macros: {},
-  };
-  public static readonly THEME_OPTIONS = {
-    current: "light",
-    list: {
-      "ant-design": "Ant Design",
-      "dark": "Dark",
-      "light": "Light",
-      "wechat": "WeChat",
-    },
-    path: `${Constants.CDN}/dist/css/content-theme`,
-  };
+    public static readonly ZWSP: string = "\u200b";
+    public static readonly DROP_EDITOR: string = "application/editor";
+    public static readonly MOBILE_WIDTH: number = 520;
+    public static readonly CLASS_MENU_DISABLED: string = "vditor-menu--disabled";
+    public static readonly EDIT_TOOLBARS: string[] = ["emoji", "headings", "bold", "italic", "strike", "link", "list",
+        "ordered-list", "outdent", "indent", "check", "line", "quote", "code", "inline-code", "insert-after",
+        "insert-before", "upload", "record", "table"];
+    public static readonly CODE_THEME: string[] = ["a11y-dark", "agate", "an-old-hope", "androidstudio",
+        "arta", "atom-one-dark", "atom-one-dark-reasonable", "base16/3024", "base16/apathy", "base16/apprentice", "base16/ashes", "base16/atelier-cave", "base16/atelier-dune",
+        "base16/atelier-estuary", "base16/atelier-forest", "base16/atelier-heath", "base16/atelier-lakeside", "base16/atelier-plateau", "base16/atelier-savanna", "base16/atelier-seaside", "base16/atelier-sulphurpool",
+        "base16/atlas", "base16/bespin", "base16/black-metal", "base16/black-metal-bathory", "base16/black-metal-burzum", "base16/black-metal-dark-funeral", "base16/black-metal-gorgoroth", "base16/black-metal-immortal", "base16/black-metal-khold", "base16/black-metal-marduk", "base16/black-metal-mayhem", "base16/black-metal-nile", "base16/black-metal-venom", "base16/brewer", "base16/bright", "base16/brogrammer",
+        "base16/brush-trees-dark", "base16/chalk", "base16/circus", "base16/classic-dark", "base16/codeschool", "base16/colors", "base16/danqing", "base16/darcula", "base16/dark-violet",
+        "base16/darkmoss", "base16/darktooth", "base16/decaf", "base16/default-dark", "base16/dracula", "base16/edge-dark", "base16/eighties", "base16/embers", "base16/equilibrium-dark",
+        "base16/equilibrium-gray-dark", "base16/espresso", "base16/eva", "base16/eva-dim", "base16/flat", "base16/framer", "base16/gigavolt", "base16/google-dark", "base16/grayscale-dark", "base16/green-screen", "base16/gruvbox-dark-hard", "base16/gruvbox-dark-medium",
+        "base16/gruvbox-dark-pale", "base16/gruvbox-dark-soft", "base16/hardcore", "base16/harmonic16-dark", "base16/heetch-dark", "base16/helios", "base16/hopscotch", "base16/horizon-dark", "base16/humanoid-dark", "base16/ia-dark", "base16/icy-dark", "base16/ir-black", "base16/isotope",
+        "base16/kimber", "base16/london-tube", "base16/macintosh", "base16/marrakesh", "base16/materia", "base16/material", "base16/material-darker", "base16/material-palenight", "base16/material-vivid",
+        "base16/mellow-purple", "base16/mocha", "base16/monokai", "base16/nebula", "base16/nord", "base16/nova", "base16/ocean", "base16/oceanicnext", "base16/onedark", "base16/outrun-dark",
+        "base16/papercolor-dark", "base16/paraiso", "base16/pasque", "base16/phd", "base16/pico", "base16/pop", "base16/porple", "base16/qualia", "base16/railscasts", "base16/rebecca",
+        "base16/ros-pine", "base16/ros-pine-moon", "base16/sandcastle", "base16/seti-ui", "base16/silk-dark", "base16/snazzy", "base16/solar-flare", "base16/solarized-dark", "base16/spacemacs", "base16/summercamp", "base16/summerfruit-dark",
+        "base16/synth-midnight-terminal-dark", "base16/tango", "base16/tender", "base16/tomorrow-night", "base16/twilight", "base16/unikitty-dark", "base16/vulcan",
+        "base16/windows-10", "base16/windows-95", "base16/windows-high-contrast", "base16/windows-nt", "base16/woodland", "base16/xcode-dusk", "base16/zenburn", "codepen-embed", "dark",
+        "devibeans", "far", "felipec", "github-dark", "github-dark-dimmed", "gml", "gradient-dark", "hybrid", "ir-black", "isbl-editor-dark", "kimbie-dark", "lioshi",
+        "monokai", "monokai-sublime", "night-owl", "nnfx-dark", "nord", "obsidian", "panda-syntax-dark", "paraiso-dark", "pojoaque", "qtcreator-dark", "rainbow", "shades-of-purple", "srcery", "stackoverflow-dark",
+        "sunburst", "tomorrow-night-blue", "tomorrow-night-bright", "tokyo-night-dark", "vs2015", "xt256",
+        "ant-design",
+        "a11y-light", "arduino-light", "ascetic", "atom-one-light", "base16/atelier-cave-light",
+        "base16/atelier-dune-light", "base16/atelier-estuary-light", "base16/atelier-forest-light", "base16/atelier-heath-light",
+        "base16/atelier-lakeside-light", "base16/atelier-plateau-light", "base16/atelier-savanna-light", "base16/atelier-seaside-light", "base16/atelier-sulphurpool-light", "base16/brush-trees",
+        "base16/classic-light", "base16/cupcake", "base16/cupertino", "base16/default-light", "base16/dirtysea", "base16/edge-light", "base16/equilibrium-gray-light", "base16/equilibrium-light",
+        "base16/fruit-soda", "base16/github", "base16/google-light", "base16/grayscale-light", "base16/gruvbox-light-hard", "base16/gruvbox-light-medium", "base16/gruvbox-light-soft",
+        "base16/harmonic16-light", "base16/heetch-light", "base16/humanoid-light", "base16/horizon-light", "base16/ia-light", "base16/material-lighter", "base16/mexico-light",
+        "base16/one-light", "base16/papercolor-light", "base16/ros-pine-dawn", "base16/sagelight", "base16/shapeshifter",
+        "base16/silk-light", "base16/solar-flare-light", "base16/solarized-light", "base16/summerfruit-light", "base16/synth-midnight-terminal-light", "base16/tomorrow",
+        "base16/unikitty-light", "base16/windows-10-light", "base16/windows-95-light", "base16/windows-high-contrast-light", "brown-paper", "base16/windows-nt-light",
+        "color-brewer", "docco", "foundation", "github", "googlecode", "gradient-light", "grayscale", "idea", "intellij-light", "isbl-editor-light", "kimbie-light",
+        "lightfair", "magula", "mono-blue", "nnfx-light", "panda-syntax-light", "paraiso-light", "purebasic", "qtcreator-light", "routeros", "school-book",
+        "stackoverflow-light", "tokyo-night-light", "vs", "xcode", "default"];
+    public static readonly ALIAS_CODE_LANGUAGES: string[] = [
+        // 自定义
+        "abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math", "markmap", "smiles",
+        // 别名
+        "js", "ts", "html", "toml", "c#", "bat"
+    ];
+    public static readonly CDN = `https://unpkg.com/vditor@${VDITOR_VERSION}`;
+    public static readonly MARKDOWN_OPTIONS = {
+        autoSpace: false,
+        gfmAutoLink: true,
+        codeBlockPreview: true,
+        fixTermTypo: false,
+        footnotes: true,
+        linkBase: "",
+        linkPrefix: "",
+        listStyle: false,
+        mark: false,
+        mathBlockPreview: true,
+        paragraphBeginningSpace: false,
+        sanitize: true,
+        toc: false,
+    };
+    public static readonly HLJS_OPTIONS = {
+        enable: true,
+        lineNumber: false,
+        defaultLang: "",
+        style: "github",
+    };
+    public static readonly MATH_OPTIONS: IMath = {
+        engine: "KaTeX",
+        inlineDigit: false,
+        macros: {},
+    };
+    public static readonly THEME_OPTIONS = {
+        current: "light",
+        list: {
+            "ant-design": "Ant Design",
+            "dark": "Dark",
+            "light": "Light",
+            "wechat": "WeChat",
+        },
+        path: `${Constants.CDN}/dist/css/content-theme`,
+    };
 }

package/src/ts/export/index.ts

@@ -69,7 +69,8 @@ export const exportHTML = (vditor: IVditor) => {
         math: ${JSON.stringify(vditor.options.preview.math)},
     });
     Vditor.mermaidRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
-    Vditor.markmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
+    Vditor.SMILESRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
+    Vditor.markmapRender(previewElement, '${vditor.options.cdn}');
     Vditor.flowchartRender(previewElement, '${vditor.options.cdn}');
     Vditor.graphvizRender(previewElement, '${vditor.options.cdn}');
     Vditor.chartRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');

package/src/ts/ir/process.ts

@@ -23,7 +23,7 @@ export const processHint = (vditor: IVditor) => {
             const key =
                 preBeforeElement.textContent.substring(0, getSelectPosition(preBeforeElement, vditor.ir.element).start)
                     .replace(Constants.ZWSP, "");
-            (vditor.options.preview.hljs.langs || Constants.CODE_LANGUAGES).forEach((keyName) => {
+            (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,

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/adapterRender.ts

@@ -1,15 +1,19 @@
 export const mathRenderAdapter = {
-    getCode: (mathElement: Element) => mathElement.textContent,
-    getElements: (element: HTMLElement) => element.querySelectorAll(".language-math"),
+    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) => element.querySelectorAll(".language-mermaid"),
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-mermaid"),
 };
 export const markmapRenderAdapter = {
     getCode: (el: Element) => el.textContent,
-    getElements: (element: HTMLElement) => element.querySelectorAll(".language-markmap"),
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-markmap"),
 };
 export const mindmapRenderAdapter = {
     getCode: (el: Element) => el.getAttribute("data-code"),

package/src/ts/markdown/codeRender.ts

@@ -11,7 +11,7 @@ export const codeRender = (element: HTMLElement, option?: IHljs) => {
             e.classList.contains("language-echarts") || e.classList.contains("language-mindmap") ||
             e.classList.contains("language-plantuml") || e.classList.contains("language-markmap") ||
             e.classList.contains("language-abc") || e.classList.contains("language-graphviz") ||
-            e.classList.contains("language-math")) {
+            e.classList.contains("language-math") || e.classList.contains("language-smiles")) {
             return false;
         }
 

package/src/ts/markdown/highlightRender.ts

@@ -2,10 +2,6 @@ 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;
@@ -13,11 +9,11 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
         style = "github";
     }
     const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
-    const href = `${cdn}/dist/js/highlight.js/styles/${style}.css`;
+    const href = `${cdn}/dist/js/highlight.js/styles/${style}.min.css`;
     if (vditorHljsStyle && vditorHljsStyle.getAttribute('href') !== href) {
         vditorHljsStyle.remove();
     }
-    addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.css`, "vditorHljsStyle");
+    addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.min.css`, "vditorHljsStyle");
 
     if (hljsOption.enable === false) {
         return;
@@ -28,62 +24,70 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
         return;
     }
 
-    addScript(`${cdn}/dist/js/highlight.js/highlight.pack.js`, "vditorHljsScript").then(() => {
-        addScript(`${cdn}/dist/js/highlight.js/solidity.min.js`, "vditorHljsSolidityScript").then(() => {
-            addScript(`${cdn}/dist/js/highlight.js/yul.min.js`, "vditorHljsYulScript").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;
-                    }
+    addScript(`${cdn}/dist/js/highlight.js/highlight.min.js?v=11.7.0`, "vditorHljsScript").then(() => {
+        addScript(`${cdn}/dist/js/highlight.js/third-languages.js?v=1.0.1`, "vditorHljsThirdScript").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;
-                    }
+                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-smiles") ||
+                    block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
+                    block.classList.contains("language-math")) {
+                    return;
+                }
 
-                    if (hljsOption.defaultLang !== "" && block.className.indexOf("language-") === -1) {
-                        block.classList.add("language-" + hljsOption.defaultLang)
-                    }
+                if (hljsOption.defaultLang !== "" && block.className.indexOf("language-") === -1) {
+                    block.classList.add("language-" + hljsOption.defaultLang)
+                }
 
-                    hljs.highlightElement(block);
+                let language =  hljsOption.defaultLang || block.className.replace("language-", "");
+                if (!window.hljs.getLanguage(language)) {
+                    language = "plaintext";
+                }
+                block.innerHTML = window.hljs.highlight(
+                    block.textContent,
+                    {
+                        language,
+                        ignoreIllegals: true
+                    }).value;
 
-                    if (!hljsOption.lineNumber) {
-                        return;
-                    }
+                block.classList.add("hljs");
+                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;
+                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"`;
                     }
-                    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);
+                    lineNumberHTML += `<span${lineHeight}></span>`;
                 });
+
+                linenNumberTemp.style.display = "none";
+                lineNumberHTML = `<span class="vditor-linenumber__rows">${lineNumberHTML}</span>`;
+                block.insertAdjacentHTML("beforeend", lineNumberHTML);
             })
         })
     });

package/src/ts/markdown/markmapRender.ts

@@ -32,12 +32,12 @@ const init = (el: HTMLElement,code: string) => {
   }
 
 
-export const markmapRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
+export const markmapRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
     const markmapElements = markmapRenderAdapter.getElements(element);
     if (markmapElements.length === 0) {
         return;
     }
-    addScript(`${cdn}/dist/js/markmap/markmap.min.js`, "vditorMermaidScript").then(() => {
+    addScript(`${cdn}/dist/js/markmap/markmap.min.js`, "vditorMarkerScript").then(() => {
         markmapElements.forEach((item) => {
             const code = markmapRenderAdapter.getCode(item);
             if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
@@ -53,5 +53,4 @@ export const markmapRender = (element: HTMLElement, cdn = Constants.CDN, theme:
             }
         });
     });
-
 };

package/src/ts/markdown/mathRender.ts

@@ -18,7 +18,7 @@ declare global {
     }
 }
 
-export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?: IMath }) => {
+export const mathRender = (element: (HTMLElement | Document) = document, options?: { cdn?: string, math?: IMath }) => {
     const mathElements = mathRenderAdapter.getElements(element);
 
     if (mathElements.length === 0) {

package/src/ts/markdown/mermaidRender.ts

@@ -8,7 +8,7 @@ declare const mermaid: {
     render(id: string, text: string): { svg: string }
 };
 
-export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
+export const mermaidRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
     const mermaidElements = mermaidRenderAdapter.getElements(element);
     if (mermaidElements.length === 0) {
         return;
@@ -44,7 +44,7 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme:
             if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
                 return;
             }
-            const id = "mermaid"+genUUID()
+            const id = "mermaid" + genUUID()
             try {
                 const mermaidData = await mermaid.render(id, item.textContent);
                 item.innerHTML = mermaidData.svg;

package/src/ts/markdown/previewRender.ts

@@ -1,6 +1,6 @@
 import {Constants} from "../constants";
 import {setContentTheme} from "../ui/setContentTheme";
-import {addScript, addScriptSync} from "../util/addScript";
+import {addScript} from "../util/addScript";
 import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {merge} from "../util/merge";
 import {abcRender} from "./abcRender";
@@ -14,7 +14,8 @@ import {lazyLoadImageRender} from "./lazyLoadImageRender";
 import {mathRender} from "./mathRender";
 import {mediaRender} from "./mediaRender";
 import {mermaidRender} from "./mermaidRender";
-import {markmapRender} from "../markdown/markmapRender";
+import {markmapRender} from "./markmapRender";
+import {SMILESRender} from "./SMILESRender";
 import {mindmapRender} from "./mindmapRender";
 import {plantumlRender} from "./plantumlRender";
 import {setLute} from "./setLute";
@@ -131,7 +132,8 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
         math: mergedOptions.math,
     });
     mermaidRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
-    markmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
+    SMILESRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
+    markmapRender(previewElement, mergedOptions.cdn);
     flowchartRender(previewElement, mergedOptions.cdn);
     graphvizRender(previewElement, mergedOptions.cdn);
     chartRender(previewElement, mergedOptions.cdn, mergedOptions.mode);

package/src/ts/preview/index.ts

@@ -8,6 +8,7 @@ import {highlightRender} from "../markdown/highlightRender";
 import {mathRender} from "../markdown/mathRender";
 import {mediaRender} from "../markdown/mediaRender";
 import {mermaidRender} from "../markdown/mermaidRender";
+import {SMILESRender} from "../markdown/SMILESRender";
 import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
@@ -224,7 +225,8 @@ export class Preview {
         highlightRender(vditor.options.preview.hljs, vditor.preview.previewElement,
             vditor.options.cdn);
         mermaidRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
-        markmapRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
+        markmapRender(vditor.preview.previewElement, vditor.options.cdn);
+        SMILESRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         flowchartRender(vditor.preview.previewElement, vditor.options.cdn);
         graphvizRender(vditor.preview.previewElement, vditor.options.cdn);
         chartRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);

package/src/ts/toolbar/Emoji.ts

@@ -4,6 +4,8 @@ import {hasClosestByTag} from "../util/hasClosestByHeadings";
 import {getEditorRange, insertHTML, setSelectionFocus} from "../util/selection";
 import {MenuItem} from "./MenuItem";
 import {toggleSubMenu} from "./setToolbar";
+import {hasClosestBlock} from "../util/hasClosest";
+import {modifyPre} from "../wysiwyg/inlineTag";
 
 export class Emoji extends MenuItem {
     public element: HTMLElement;
@@ -57,6 +59,9 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
                 } else {
                     range.extractContents();
                     range.insertNode(document.createTextNode(value));
+                    if (!hasClosestBlock(range.startContainer)) {
+                        modifyPre(vditor, range);
+                    }
                 }
                 range.collapse(false);
                 setSelectionFocus(range);

package/src/ts/toolbar/Export.ts

@@ -1,4 +1,4 @@
-import {exportHTML, exportMarkdown, exportPDF} from "../export";
+import {exportHTML, exportMarkdown, exportPDF} from "../export/index";
 import {getEventName} from "../util/compatibility";
 import {MenuItem} from "./MenuItem";
 import {hidePanel, toggleSubMenu} from "./setToolbar";

package/src/ts/ui/setCodeTheme.ts

@@ -6,7 +6,7 @@ export const setCodeTheme = (codeTheme: string, cdn = Constants.CDN) => {
         codeTheme = "github";
     }
     const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
-    const href = `${cdn}/dist/js/highlight.js/styles/${codeTheme}.css`;
+    const href = `${cdn}/dist/js/highlight.js/styles/${codeTheme}.min.css`;
     if (!vditorHljsStyle) {
         addStyle(href, "vditorHljsStyle");
     } else if (vditorHljsStyle.getAttribute('href') !== href) {

package/src/ts/undo/index.ts

@@ -149,6 +149,12 @@ class Undo {
         this[vditor.currentMode].lastText = text;
         vditor[vditor.currentMode].element.innerHTML = text;
         if (vditor.currentMode !== "sv") {
+            vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview`)
+                .forEach((blockElement: HTMLElement) => {
+                    if (blockElement.parentElement.querySelector(".language-echarts")) {
+                        blockElement.outerHTML = vditor.lute.SpinVditorDOM(blockElement.parentElement.outerHTML);
+                    }
+                });
             vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview[data-render='2']`)
                 .forEach((blockElement: HTMLElement) => {
                     processCodeRender(blockElement, vditor);

package/src/ts/util/processCode.ts

@@ -9,6 +9,7 @@ import {mermaidRender} from "../markdown/mermaidRender";
 import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
+import {SMILESRender} from "../markdown/SMILESRender";
 
 export const processPasteCode = (html: string, text: string, type = "sv") => {
     const tempElement = document.createElement("div");
@@ -67,8 +68,10 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         abcRender(previewPanel, vditor.options.cdn);
     } else if (language === "mermaid") {
         mermaidRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+    } else if (language === "smiles") {
+        SMILESRender(previewPanel, vditor.options.cdn, vditor.options.theme);
     } else if (language === "markmap") {
-        markmapRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+        markmapRender(previewPanel, vditor.options.cdn);
     } else if (language === "flowchart") {
         flowchartRender(previewPanel, vditor.options.cdn);
     } else if (language === "echarts") {

package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -684,7 +684,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                     }
                     const matchLangData: IHintData[] = [];
                     const key = language.value.substring(0, language.selectionStart);
-                    (vditor.options.preview.hljs.langs || Constants.CODE_LANGUAGES).forEach((keyName) => {
+                    (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,

package/src/ts/wysiwyg/index.ts

@@ -20,8 +20,8 @@ import {
     getCursorPosition,
     getEditorRange,
     getSelectPosition,
-    setRangeByWbr,
-} from "../util/selection";
+    setRangeByWbr, setSelectionFocus,
+} from "../util/selection"
 import {clickToc, renderToc} from "../util/toc";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {genImagePopover, genLinkRefPopover, highlightToolbarWYSIWYG} from "./highlightToolbarWYSIWYG";
@@ -417,6 +417,9 @@ class WYSIWYG {
                     checkElement.removeAttribute("checked");
                 }
                 this.preventInput = true;
+                if (getSelection().rangeCount > 0) {
+                    setSelectionFocus(getSelection().getRangeAt(0));
+                }
                 afterRenderEvent(vditor);
                 return;
             }