vditor 3.10.6 → 3.10.7

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/undo/index.ts

@@ -149,6 +149,10 @@ 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) => {
+                    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,