vditor 3.8.9 → 3.8.12

package/dist/ts/toolbar/Emoji.d.ts

@@ -3,5 +3,5 @@ import { MenuItem } from "./MenuItem";
 export declare class Emoji extends MenuItem {
     element: HTMLElement;
     constructor(vditor: IVditor, menuItem: IMenuItem);
-    _bindEvent(vditor: IVditor, panelElement: HTMLElement): void;
+    private bindEvent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "3.8.9",
+  "version": "3.8.12",
   "description": "♏ 易于使用的 Markdown 编辑器，为适配不同的应用场景而生",
   "author": "Vanessa <v@b3log.org> (http://vanessa.b3log.org)",
   "homepage": "https://b3log.org/vditor",
@@ -24,7 +24,7 @@
     "@types/diff-match-patch": "^1.0.32",
     "@types/jest": "^26.0.23",
     "@types/puppeteer": "^2.1.5",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "copy-webpack-plugin": "^6.4.1",
@@ -39,14 +39,14 @@
     "puppeteer": "^1.20.0",
     "sass-loader": "^12.4.0",
     "style-loader": "^1.3.0",
-    "terser-webpack-plugin": "^5.1.2",
+    "terser-webpack-plugin": "^5.3.0",
     "ts-jest": "^26.5.6",
     "ts-loader": "^6.2.2",
     "tslint": "^5.20.1",
     "typescript": "^3.9.9",
-    "webpack": "^5.37.0",
+    "webpack": "^5.66.0",
     "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^4.7.0",
+    "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.1.0"
   },
   "license": "MIT",

package/src/ts/markdown/codeRender.ts

@@ -33,13 +33,17 @@ export const codeRender = (element: HTMLElement) => {
             codeText = codeElement.innerText;
         }
 
+        let iconHTML = '<svg><use xlink:href="#vditor-icon-copy"></use></svg>';
+        if (!document.getElementById("vditorIconScript")) {
+            iconHTML = '<svg viewBox="0 0 32 32"><path d="M22.545-0h-17.455c-1.6 0-2.909 1.309-2.909 2.909v20.364h2.909v-20.364h17.455v-2.909zM26.909 5.818h-16c-1.6 0-2.909 1.309-2.909 2.909v20.364c0 1.6 1.309 2.909 2.909 2.909h16c1.6 0 2.909-1.309 2.909-2.909v-20.364c0-1.6-1.309-2.909-2.909-2.909zM26.909 29.091h-16v-20.364h16v20.364z"></path></svg>';
+        }
+
         const divElement = document.createElement("div");
         divElement.className = "vditor-copy";
-        divElement.innerHTML = `<span aria-label="${window.VditorI18n.copy}"
-onmouseover="this.setAttribute('aria-label', '${window.VditorI18n.copy}')"
+        divElement.innerHTML = `<span aria-label="${window.VditorI18n?.copy || "复制"}"
+onmouseover="this.setAttribute('aria-label', '${window.VditorI18n?.copy || "复制"}')"
 class="vditor-tooltipped vditor-tooltipped__w"
-onclick="this.previousElementSibling.select();document.execCommand('copy');` +
-            `this.setAttribute('aria-label', '${window.VditorI18n.copied}')"><svg><use xlink:href="#vditor-icon-copy"></use></svg></span>`;
+onclick="this.previousElementSibling.select();document.execCommand('copy');this.setAttribute('aria-label', '${window.VditorI18n?.copy || "已复制"}')">${iconHTML}</span>`;
         const textarea = document.createElement("textarea");
         textarea.value = code160to32(codeText);
         divElement.insertAdjacentElement("afterbegin", textarea);

package/src/ts/markdown/mathRender.ts

@@ -42,33 +42,35 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
     if (options.math.engine === "KaTeX") {
         addStyle(`${options.cdn}/dist/js/katex/katex.min.css`, "vditorKatexStyle");
         addScript(`${options.cdn}/dist/js/katex/katex.min.js`, "vditorKatexScript").then(() => {
-            mathElements.forEach((mathElement) => {
-                if (mathElement.parentElement.classList.contains("vditor-wysiwyg__pre") ||
-                    mathElement.parentElement.classList.contains("vditor-ir__marker--pre")) {
-                    return;
-                }
-                if (mathElement.getAttribute("data-math")) {
-                    return;
-                }
-                const math = code160to32(mathRenderAdapter.getCode(mathElement));
-                mathElement.setAttribute("data-math", math);
-                try {
-                    mathElement.innerHTML = katex.renderToString(math, {
-                        displayMode: mathElement.tagName === "DIV",
-                        output: "html",
-                    });
-                } catch (e) {
-                    mathElement.innerHTML = e.message;
-                    mathElement.className = "language-math vditor-reset--error";
-                }
+            addScript(`${options.cdn}/dist/js/katex/mhchem.min.js`, "vditorKatexChemScript").then(() => {
+                mathElements.forEach((mathElement) => {
+                    if (mathElement.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                        mathElement.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                        return;
+                    }
+                    if (mathElement.getAttribute("data-math")) {
+                        return;
+                    }
+                    const math = code160to32(mathRenderAdapter.getCode(mathElement));
+                    mathElement.setAttribute("data-math", math);
+                    try {
+                        mathElement.innerHTML = katex.renderToString(math, {
+                            displayMode: mathElement.tagName === "DIV",
+                            output: "html",
+                        });
+                    } catch (e) {
+                        mathElement.innerHTML = e.message;
+                        mathElement.className = "language-math vditor-reset--error";
+                    }
 
-                mathElement.addEventListener("copy", (event: ClipboardEvent) => {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    const vditorMathElement = (event.currentTarget as HTMLElement).closest(".language-math");
-                    event.clipboardData.setData("text/html", vditorMathElement.innerHTML);
-                    event.clipboardData.setData("text/plain",
-                        vditorMathElement.getAttribute("data-math"));
+                    mathElement.addEventListener("copy", (event: ClipboardEvent) => {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        const vditorMathElement = (event.currentTarget as HTMLElement).closest(".language-math");
+                        event.clipboardData.setData("text/html", vditorMathElement.innerHTML);
+                        event.clipboardData.setData("text/plain",
+                            vditorMathElement.getAttribute("data-math"));
+                    });
                 });
             });
         });
@@ -88,7 +90,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
         if (!window.MathJax) {
             window.MathJax = {
                 loader: {
-                    paths: { mathjax: `${options.cdn}/dist/js/mathjax` },
+                    paths: {mathjax: `${options.cdn}/dist/js/mathjax`},
                 },
                 startup: {
                     typeset: false,

package/src/ts/markdown/outlineRender.ts

@@ -38,7 +38,11 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
     const headingsElement = tempElement.firstElementChild.querySelectorAll("li > span[data-target-id]");
     headingsElement.forEach((item, index) => {
         if (item.nextElementSibling && item.nextElementSibling.tagName === "UL") {
-            item.innerHTML = `<svg class='vditor-outline__action'><use xlink:href='#vditor-icon-down'></use></svg><span>${item.innerHTML}</span>`;
+            let iconHTML = "<svg class='vditor-outline__action'><use xlink:href='#vditor-icon-down'></use></svg>";
+            if (!document.getElementById("vditorIconScript")) {
+                iconHTML = '<svg class="vditor-outline__action" viewBox="0 0 32 32"><path d="M3.76 6.12l12.24 12.213 12.24-12.213 3.76 3.76-16 16-16-16 3.76-3.76z"></path></svg>';
+            }
+            item.innerHTML = `${iconHTML}<span>${item.innerHTML}</span>`;
         } else {
             item.innerHTML = `<svg></svg><span>${item.innerHTML}</span>`;
         }

package/src/ts/markdown/previewRender.ts

@@ -103,6 +103,10 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
         window.VditorI18n = mergedOptions.i18n;
     }
 
+    if (mergedOptions.icon) {
+        await addScript(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
+    }
+
     setContentTheme(mergedOptions.theme.current, mergedOptions.theme.path);
     if (mergedOptions.anchor === 1) {
         previewElement.classList.add("vditor-reset--anchor");
@@ -133,9 +137,6 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     if (mergedOptions.lazyLoadImage) {
         lazyLoadImageRender(previewElement);
     }
-    if (mergedOptions.icon) {
-        addScript(`${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`, "vditorIconScript");
-    }
     previewElement.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => {
         const spanElement = hasClosestByMatchTag(event.target, "SPAN");
         if (spanElement && hasClosestByClassName(spanElement, "vditor-toc")) {

package/src/ts/markdown/speechRender.ts

@@ -9,8 +9,12 @@ export const speechRender = (element: HTMLElement, lang: keyof II18n = "zh_CN")
     if (typeof speechSynthesis === "undefined" || typeof SpeechSynthesisUtterance === "undefined") {
         return;
     }
-    const playSVG = '<svg><use xlink:href="#vditor-icon-play"></use></svg>';
-    const pauseSVG = '<svg><use xlink:href="#vditor-icon-pause"></use></svg>';
+    let playSVG = '<svg><use xlink:href="#vditor-icon-play"></use></svg>';
+    let pauseSVG = '<svg><use xlink:href="#vditor-icon-pause"></use></svg>';
+    if (!document.getElementById("vditorIconScript")) {
+        playSVG = '<svg viewBox="0 0 32 32"><path d="M3.436 0l25.128 16-25.128 16v-32z"></path></svg>';
+        pauseSVG = '<svg viewBox="0 0 32 32"><path d="M20.617 0h9.128v32h-9.128v-32zM2.255 32v-32h9.128v32h-9.128z"></path></svg>';
+    }
     let speechDom: HTMLDivElement = document.querySelector(".vditor-speech");
     if (!speechDom) {
         speechDom = document.createElement("div");

package/src/ts/toolbar/Emoji.ts

@@ -1,5 +1,6 @@
 import {getEventName} from "../util/compatibility";
 import {execAfterRender} from "../util/fixBrowserBehavior";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
 import {getEditorRange, insertHTML, setSelectionFocus} from "../util/selection";
 import {MenuItem} from "./MenuItem";
 import {toggleSubMenu} from "./setToolbar";
@@ -23,26 +24,24 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
  data-key="${key}"><span class="vditor-emojis__icon">${emojiValue}</span></button>`;
             }
         });
-
-        const tailHTML = `<div class="vditor-emojis__tail">
-    <span class="vditor-emojis__tip"></span><span>${vditor.options.hint.emojiTail || ""}</span>
-</div>`;
-
         panelElement.innerHTML = `<div class="vditor-emojis" style="max-height: ${
             vditor.options.height === "auto" ? "auto" : vditor.options.height as number - 80
-        }px">${commonEmojiHTML}</div>${tailHTML}`;
+        }px">${commonEmojiHTML}</div><div class="vditor-emojis__tail">
+    <span class="vditor-emojis__tip"></span><span>${vditor.options.hint.emojiTail || ""}</span>
+</div>`;
 
         this.element.appendChild(panelElement);
 
-        toggleSubMenu(vditor, panelElement, this.element.children[0], menuItem.level);
-        this._bindEvent(vditor, panelElement);
+        toggleSubMenu(vditor, panelElement, this.element.firstElementChild, menuItem.level);
+        this.bindEvent(vditor);
     }
 
-    public _bindEvent(vditor: IVditor, panelElement: HTMLElement) {
-        panelElement.querySelectorAll(".vditor-emojis button").forEach((element: HTMLElement) => {
-            element.addEventListener(getEventName(), (event: Event) => {
+    private bindEvent(vditor: IVditor) {
+        this.element.lastElementChild.addEventListener(getEventName(), (event: Event & { target: Element }) => {
+            const btnElement = hasClosestByTag(event.target, "BUTTON");
+            if (btnElement) {
                 event.preventDefault();
-                const value = element.getAttribute("data-value");
+                const value = btnElement.getAttribute("data-value");
                 const range = getEditorRange(vditor);
                 let html = value;
                 if (vditor.currentMode === "wysiwyg") {
@@ -61,15 +60,15 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
                 }
                 range.collapse(false);
                 setSelectionFocus(range);
-                panelElement.style.display = "none";
+                (this.element.lastElementChild as HTMLElement).style.display = "none";
                 execAfterRender(vditor);
-            });
-            element.addEventListener("mouseover", (event: Event) => {
-                if ((event.target as HTMLElement).tagName === "BUTTON") {
-                    panelElement.querySelector(".vditor-emojis__tip").innerHTML =
-                        (event.target as HTMLElement).getAttribute("data-key");
-                }
-            });
+            }
+        });
+        this.element.lastElementChild.addEventListener("mouseover", (event: Event & { target: Element }) => {
+            const btnElement = hasClosestByTag(event.target, "BUTTON");
+            if (btnElement) {
+                this.element.querySelector(".vditor-emojis__tip").innerHTML = btnElement.getAttribute("data-key");
+            }
         });
     }
 }

package/src/ts/undo/index.ts

@@ -6,6 +6,7 @@ import {execAfterRender} from "../util/fixBrowserBehavior";
 import {highlightToolbar} from "../util/highlightToolbar";
 import {processCodeRender} from "../util/processCode";
 import {setRangeByWbr, setSelectionFocus} from "../util/selection";
+import {renderToc} from "../util/toc";
 
 interface IUndo {
     hasUndo: boolean;
@@ -165,6 +166,8 @@ class Undo {
             scrollCenter(vditor);
         }
 
+        renderToc(vditor);
+
         execAfterRender(vditor, {
             enableAddUndoStack: false,
             enableHint: false,

package/src/ts/upload/index.ts

@@ -108,7 +108,7 @@ const genUploadedLabel = (responseText: string, vditor: IVditor) => {
         if (type.indexOf(".wav") === 0 || type.indexOf(".mp3") === 0 || type.indexOf(".ogg") === 0) {
             if (vditor.currentMode === "wysiwyg") {
                 succFileText += `<div class="vditor-wysiwyg__block" data-type="html-block"
- data-block="0"><pre><code>&lt;audio controls="controls" src="${path}"&gt;&lt;/audio&gt;</code></pre>\n`;
+ data-block="0"><pre><code>&lt;audio controls="controls" src="${path}"&gt;&lt;/audio&gt;</code></pre><pre class="vditor-wysiwyg__preview" data-render="1"><audio controls="controls" src="${path}"></audio></pre></div>\n`;
             } else if (vditor.currentMode === "ir") {
                 succFileText += `<audio controls="controls" src="${path}"></audio>\n`;
             } else {

package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -588,14 +588,18 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             setPopoverPosition(vditor, footnotesRefElement);
         }
 
-        let blockRenderElement = hasClosestByClassName(typeElement, "vditor-wysiwyg__block") as HTMLElement;
         // block popover: math-inline, math-block, html-block, html-inline, code-block, html-entity
-        if (
-            blockRenderElement &&
-            blockRenderElement.getAttribute("data-type").indexOf("block") > -1
-        ) {
-            const lang: keyof II18n | "" = vditor.options.lang;
-            const options: IOptions = vditor.options;
+        let blockRenderElement = hasClosestByClassName(typeElement, "vditor-wysiwyg__block") as HTMLElement;
+        const isBlock = blockRenderElement ? blockRenderElement.getAttribute("data-type").indexOf("block") > -1 : false;
+        vditor.wysiwyg.element
+            .querySelectorAll(".vditor-wysiwyg__preview")
+            .forEach((itemElement) => {
+                if (!blockRenderElement || (blockRenderElement && isBlock && !blockRenderElement.contains(itemElement))) {
+                    const previousElement = itemElement.previousElementSibling as HTMLElement;
+                    previousElement.style.display = "none";
+                }
+            });
+        if (blockRenderElement && isBlock) {
             vditor.wysiwyg.popover.innerHTML = "";
             genUp(range, blockRenderElement, vditor);
             genDown(range, blockRenderElement, vditor);
@@ -694,17 +698,8 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             }
             setPopoverPosition(vditor, blockRenderElement);
         } else {
-            if (!blockRenderElement) {
-                vditor.wysiwyg.element
-                    .querySelectorAll(".vditor-wysiwyg__preview")
-                    .forEach((itemElement) => {
-                        const previousElement = itemElement.previousElementSibling as HTMLElement;
-                        previousElement.style.display = "none";
-                    });
-            }
             blockRenderElement = undefined;
         }
-
         if (headingElement) {
             vditor.wysiwyg.popover.innerHTML = "";
 
@@ -972,8 +967,6 @@ const linkHotkey = (
 };
 
 export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
-    const lang: keyof II18n | "" = vditor.options.lang;
-    const options: IOptions = vditor.options;
     vditor.wysiwyg.popover.innerHTML = "";
 
     const updateA = () => {
@@ -982,6 +975,7 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
         }
         aElement.setAttribute("href", input1.value);
         aElement.setAttribute("title", input2.value);
+        afterRenderEvent(vditor);
     };
 
     aElement.querySelectorAll("[data-marker]").forEach((item: HTMLElement) => {