@8btc/mditor 0.0.32 → 0.0.34

package/src/ts/markdown/mathRender.ts

@@ -50,8 +50,8 @@ const normalizeTex = (tex: string): string => {
 /**
  * 数学公式渲染入口
  *
- * 默认使用 MathJax 渲染（SVG 输出），并在需要时按需加载相关脚本与样式。
- * 支持通过 options.math.engine 切换为 KaTeX。
+ * 默认使用 KaTeX 渲染，并在需要时按需加载相关脚本与样式。
+ * 支持通过 options.math.engine 切换为 MathJax。
  *
  * 参数说明：
  * - element: 需要进行数学渲染的根容器（默认 document）
@@ -70,7 +70,7 @@ export const mathRender = (
     const defaultOptions = {
         cdn: Constants.CDN,
         math: {
-            engine: "MathJax",
+            engine: "KaTeX",
             inlineDigit: true,
             macros: {},
         },
@@ -180,82 +180,26 @@ export const mathRender = (
             next();
         };
         if (!window.MathJax) {
-            // typeset 设为 true 以正常完成公式渲染；elements 限定为传入的容器，外部使用本包时仅处理该容器，不影响编辑器以外的公式。
-            // 渲染时会将 startup.elements 临时设为传入的 element（当前预览/编辑容器），再 clear/updateDocument。
             window.MathJax = {
                 loader: {
                     paths: { mathjax: `${options.cdn}/dist/js/mathjax` },
                 },
                 startup: {
-                    typeset: true,
-                    elements: element instanceof HTMLElement ? [element] : [],
+                    typeset: false,
+                    elements:
+                        element instanceof HTMLElement ? [element] : [],
                 },
                 tex: {
-                    inlineMath: [
-                        ["$", "$"],
-                        ["\\(", "\\)"],
-                    ],
-                    displayMath: [
-                        ["$$", "$$"],
-                        ["\\[", "\\]"],
-                    ],
-                    processEscapes: true, // 允许转义字符（可选，确保分隔符不被误解析）
                     macros: options.math.macros,
-                    // 启用 ams 与 unicode，支持 \unicode 宏以渲染 ∯（oiint）
-                    packages: { "[+]": ["ams", "unicode", "noerrors"] },
-                },
-                // 关闭 MathJax 自带右键菜单，使用自定义菜单
-                options: {
-                    enableMenu: false,
                 },
             };
-            // https://github.com/Vanessa219/vditor/issues/1453
+            // https://github.com/Vanessa219/vditor/issues/1453 额外配置（packages、inlineMath、displayMath 等）由调用方通过 mathJaxOptions 传入
             Object.assign(window.MathJax, options.math.mathJaxOptions);
         }
-        const mathJaxScriptUrl = `${options.cdn}/dist/js/mathjax/tex-svg-full.js`;
-        const mathJaxScriptId = "protyleMathJaxScript";
-        // Qt WebView 中同步 XHR 被限制，addScriptSync 无法加载脚本，改为异步 addScript
-        const isQtWebView =
-            typeof navigator !== "undefined" &&
-            /Qt|QtWebEngine/i.test(navigator.userAgent);
-        const runRenderChain = () => {
-            window.MathJax.startup.promise.then(() => {
-                if (window.MathJax.startup) {
-                    window.MathJax.startup.typeset = true;
-                    window.MathJax.startup.elements =
-                        element instanceof HTMLElement ? [element] : [];
-                }
-                const chains: any[] = [];
-                for (let i = 0; i < mathElements.length; i++) {
-                    const mathElement = mathElements[i];
-                    if (
-                        !mathElement.parentElement.classList.contains(
-                            "vditor-wysiwyg__pre"
-                        ) &&
-                        !mathElement.parentElement.classList.contains(
-                            "vditor-ir__marker--pre"
-                        ) &&
-                        !mathElement.getAttribute("data-math") &&
-                        code160to32(mathElement.textContent).trim()
-                    ) {
-                        chains.push((next: () => void) => {
-                            if (i === mathElements.length - 1) {
-                                renderMath(mathElement);
-                            } else {
-                                renderMath(mathElement, next);
-                            }
-                        });
-                    }
-                }
-                chainAsync(chains);
-            });
-        };
-        if (isQtWebView) {
-            addScript(mathJaxScriptUrl, mathJaxScriptId).then(runRenderChain);
-        } else {
-            addScriptSync(mathJaxScriptUrl, mathJaxScriptId);
-            runRenderChain();
-        }
+        addScriptSync(
+            `${options.cdn}/dist/js/mathjax/tex-svg-full.js`,
+            "protyleMathJaxScript"
+        );
         const renderMath = (mathElement: Element, next?: () => void) => {
             const rawText = code160to32(mathElement.textContent).trim();
             const math = normalizeTex(rawText);
@@ -273,29 +217,16 @@ export const mathRender = (
                         const pre = mathElement.parentElement as HTMLElement;
                         pre.classList.add("vditor-wysiwyg__preview--math");
                     }
-                    // 绑定自定义右键菜单（编辑区生效，预览区自动跳过）
                     bindMathContextMenu(mathElement as HTMLElement);
-                    // 限定 document 范围为当前容器后再 clear/updateDocument，避免处理整页导致编辑器外的 $...$ 被重新渲染；不调用会导致同一公式被渲染 2 次
-                    // Qt WebView 中 clear/updateDocument 可能清掉刚插入的节点或抛错，故跳过
-                    if (!isQtWebView) {
-                        try {
-                            const startup = window.MathJax.startup;
-                            const prevElements = startup.elements;
-                            if (element instanceof HTMLElement) {
-                                startup.elements = [element];
-                            }
-                            startup.document.clear();
-                            startup.document.updateDocument();
-                            startup.elements =
-                                prevElements !== undefined ? prevElements : [];
-                        } catch (_) {
-                            if (
-                                window.MathJax?.startup?.elements !== undefined
-                            ) {
-                                window.MathJax.startup.elements = [];
-                            }
-                        }
+                    const startup = window.MathJax.startup;
+                    const prevElements = startup.elements;
+                    if (element instanceof HTMLElement) {
+                        startup.elements = [element];
                     }
+                    startup.document.clear();
+                    startup.document.updateDocument();
+                    startup.elements =
+                        prevElements !== undefined ? prevElements : [];
                     const errorTextElement = node.querySelector(
                         '[data-mml-node="merror"]'
                     );
@@ -303,9 +234,10 @@ export const mathRender = (
                         errorTextElement &&
                         errorTextElement.textContent.trim() !== ""
                     ) {
-                        // 渲染失败时按普通文本展示原始内容
-                        mathElement.textContent = rawText;
-                        mathElement.className = "language-math";
+                        mathElement.innerHTML =
+                            errorTextElement.textContent.trim();
+                        mathElement.className =
+                            "language-math vditor-reset--error";
                     }
                     if (next) {
                         next();
@@ -313,5 +245,35 @@ export const mathRender = (
                 }
             );
         };
+        window.MathJax.startup.promise.then(() => {
+            if (window.MathJax.startup) {
+                window.MathJax.startup.typeset = true;
+                window.MathJax.startup.elements =
+                    element instanceof HTMLElement ? [element] : [];
+            }
+            const chains: any[] = [];
+            for (let i = 0; i < mathElements.length; i++) {
+                const mathElement = mathElements[i];
+                if (
+                    !mathElement.parentElement.classList.contains(
+                        "vditor-wysiwyg__pre"
+                    ) &&
+                    !mathElement.parentElement.classList.contains(
+                        "vditor-ir__marker--pre"
+                    ) &&
+                    !mathElement.getAttribute("data-math") &&
+                    code160to32(mathElement.textContent).trim()
+                ) {
+                    chains.push((next: () => void) => {
+                        if (i === mathElements.length - 1) {
+                            renderMath(mathElement);
+                        } else {
+                            renderMath(mathElement, next);
+                        }
+                    });
+                }
+            }
+            chainAsync(chains);
+        });
     }
 };

package/src/ts/util/addScript.ts

@@ -4,10 +4,8 @@ export const addScriptSync = (path: string, id: string) => {
     }
     const xhrObj = new XMLHttpRequest();
     xhrObj.open("GET", path, false);
-    xhrObj.setRequestHeader(
-        "Accept",
-        "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01"
-    );
+    xhrObj.setRequestHeader("Accept",
+        "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01");
     xhrObj.send("");
     const scriptElement = document.createElement("script");
     scriptElement.type = "text/javascript";
@@ -30,7 +28,7 @@ export const addScript = (path: string, id: string) => {
         document.head.appendChild(scriptElement);
         scriptElement.onerror = (event) => {
             reject(event);
-        };
+        }
         scriptElement.onload = () => {
             if (document.getElementById(id)) {
                 // 循环调用需清除 DOM 中的 script 标签