@8btc/mditor 0.0.1

package/src/ts/markdown/mathContextMenu.ts

@@ -0,0 +1,423 @@
+// 菜单样式改为全局 less 注入（_math-menu.less），不再动态导入
+import { Constants } from "../constants";
+import { addScript } from "../util/addScript";
+/**
+ * 可选全局 KaTeX 引用（由渲染阶段加载）。
+ */
+declare const katex:
+    | {
+          renderToString(
+              math: string,
+              option: { displayMode: boolean; output: string; macros?: object }
+          ): string;
+      }
+    | undefined;
+
+/**
+ * 初始化并管理数学公式自定义右键菜单。
+ * 提供：导出 MathML、复制 TeX、复制 SVG 代码 三项操作。
+ */
+class MathContextMenu {
+    private menuEl: HTMLDivElement | null = null;
+    private hideTimer: number | null = null;
+
+    /**
+     * 创建菜单 DOM 并插入到 body，同时注入样式。
+     */
+    public init(): void {
+        if (this.menuEl) return;
+        this.menuEl = document.createElement("div");
+        this.menuEl.className = "vditor-math-menu";
+        this.menuEl.style.display = "none";
+        this.menuEl.innerHTML = `
+          <div class="vditor-math-menu__item" data-action="mml">复制 MathML</div>
+          <div class="vditor-math-menu__item" data-action="tex">复制 Tex Commands</div>
+          <div class="vditor-math-menu__item" data-action="svg">复制 SVG 代码</div>
+        `;
+
+        // 阻止菜单内的鼠标事件冒泡到 document，以避免立即关闭
+        this.menuEl.addEventListener("mousedown", (ev) => {
+            ev.stopPropagation();
+        });
+        this.menuEl.addEventListener(
+            "touchstart",
+            (ev) => {
+                ev.stopPropagation();
+            },
+            { passive: true }
+        );
+
+        this.menuEl.addEventListener("click", (e) => {
+            const target = e.target as HTMLElement;
+            const action = target.getAttribute("data-action");
+            const mathEl = this.menuEl!.dataset.targetId
+                ? (document.querySelector(
+                      `[data-math-id="${this.menuEl!.dataset.targetId}"]`
+                  ) as HTMLElement)
+                : null;
+            if (!action || !mathEl) return;
+            this.onAction(action, mathEl);
+            // 点击后隐藏主菜单
+            this.hide();
+        });
+
+        document.body.appendChild(this.menuEl);
+
+        // 删除子菜单逻辑：不再提供“复制文本”预览面板
+
+        // 外部点击/触摸关闭：仅在点击目标不在菜单内时隐藏
+        document.addEventListener(
+            "mousedown",
+            (ev) => {
+                const target = ev.target as Node | null;
+                const menuOpen =
+                    this.menuEl && this.menuEl.style.display !== "none";
+                const submenuOpen = false;
+                if (!menuOpen) return;
+                if (target && this.menuEl?.contains(target)) return;
+                this.hide();
+            },
+            true
+        );
+        document.addEventListener(
+            "touchstart",
+            (ev) => {
+                const target = (ev.target as Node) || null;
+                const menuOpen =
+                    this.menuEl && this.menuEl.style.display !== "none";
+                const submenuOpen = false;
+                if (!menuOpen) return;
+                if (target && this.menuEl?.contains(target)) return;
+                this.hide();
+            },
+            { capture: true, passive: true }
+        );
+        document.addEventListener("scroll", () => this.hide(), {
+            capture: true,
+        });
+        window.addEventListener("resize", () => this.hide());
+    }
+
+    /**
+     * 显示菜单到指定位置，并绑定当前目标元素。
+     */
+    public show(x: number, y: number, targetEl: HTMLElement): void {
+        if (!this.menuEl) return;
+        this.menuEl.style.display = "block";
+        // 边缘自适应定位，避免超出视口
+        const margin = 8;
+        // 先设置到点击位置以获得宽高
+        this.menuEl.style.left = `${x}px`;
+        this.menuEl.style.top = `${y}px`;
+        const mw = this.menuEl.offsetWidth;
+        const mh = this.menuEl.offsetHeight;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        let px = x;
+        let py = y;
+        if (px + mw + margin > vw) {
+            px = Math.max(margin, vw - mw - margin);
+        }
+        if (py + mh + margin > vh) {
+            py = Math.max(margin, vh - mh - margin);
+        }
+        this.menuEl.style.left = `${px}px`;
+        this.menuEl.style.top = `${py}px`;
+        // 记录目标 id 以便点击时处理
+        let id = targetEl.getAttribute("data-math-id");
+        if (!id) {
+            id = `mjx-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+            targetEl.setAttribute("data-math-id", id);
+        }
+        this.menuEl.dataset.targetId = id;
+
+        if (this.hideTimer) {
+            window.clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+
+    /**
+     * 隐藏菜单。
+     */
+    public hide(): void {
+        if (!this.menuEl) return;
+        this.menuEl.style.display = "none";
+        this.menuEl.dataset.targetId = "";
+        // 无子菜单，无需额外清理
+    }
+
+    /**
+     * 处理菜单点击动作：导出 MathML / 复制 TeX / 复制文本。
+     */
+    /**
+     * 菜单动作处理：MathML / TeX / SVG
+     * - MathML：优先使用 KaTeX 生成 MathML；若不可用则使用 MathJax；失败时回退为 TeX
+     * - TeX：直接复制 data-math
+     * - SVG：若 MathJax SVG 转换可用（tex2svg），生成并复制 <svg> 源码；否则提示不可用
+     */
+    /**
+     * 菜单动作处理（异步）
+     * - MathML：KaTeX 优先，其次 MathJax，失败回退 TeX
+     * - TeX：直接复制原始 data-math
+     * - SVG：若未加载 MathJax SVG 能力，按需动态加载，再生成并复制
+     */
+    private async onAction(action: string, mathEl: HTMLElement): Promise<void> {
+        const tex = mathEl.getAttribute("data-math") || "";
+        if (action === "mml") {
+            // 通过 KaTeX 或 MathJax 将 TeX 转为 MathML，并复制到剪贴板
+            try {
+                let mml = "";
+                const display = mathEl.tagName === "DIV";
+                if (typeof katex !== "undefined") {
+                    mml = katex.renderToString(tex, {
+                        displayMode: display,
+                        output: "mathml",
+                    });
+                } else if ((window as any).MathJax?.tex2mml) {
+                    mml = (window as any).MathJax.tex2mml(tex, {
+                        display,
+                    });
+                }
+                const pureMml = this.normalizeMathML(mml || tex);
+                this.copyText(pureMml);
+                this.toast("MathML 已复制到剪贴板");
+            } catch (e) {
+                this.copyText(tex);
+                this.toast("MathML 转换失败，已复制 TeX");
+            }
+        } else if (action === "tex") {
+            this.copyText(tex);
+            this.toast("TeX 已复制到剪贴板");
+        } else if (action === "svg") {
+            // 优先使用 MathJax 的 tex2svg 能力生成 SVG；若未加载则按需加载
+            try {
+                const MJ = await this.ensureMathJaxSvg();
+                if (MJ?.tex2svg) {
+                    const display = mathEl.tagName === "DIV";
+                    const container = MJ.tex2svg(tex, { display });
+                    const svg = container.querySelector(
+                        "svg"
+                    ) as SVGElement | null;
+                    if (svg) {
+                        if (!svg.getAttribute("xmlns")) {
+                            svg.setAttribute(
+                                "xmlns",
+                                "http://www.w3.org/2000/svg"
+                            );
+                        }
+                        const svgHtml = svg.outerHTML;
+                        this.copySvg(svgHtml);
+                        return;
+                    }
+                }
+                this.toast("当前引擎不支持 SVG 导出");
+            } catch {
+                this.toast("SVG 导出失败");
+            }
+        }
+    }
+
+    /**
+     * 确保 MathJax SVG 转换能力可用
+     * - 已存在 `MathJax.tex2svg`：直接返回 MathJax
+     * - 不存在：按需加载 `/js/mathjax/tex-svg-full.js`，加载完成后返回 MathJax
+     */
+    private async ensureMathJaxSvg(): Promise<any> {
+        const MJ = (window as any).MathJax;
+        if (MJ?.tex2svg) {
+            return MJ;
+        }
+        await addScript(
+            `/js/mathjax/tex-svg-full.js`,
+            "protyleMathJaxSvgScript"
+        );
+        return (window as any).MathJax;
+    }
+
+    /**
+     * 规范化 MathML 字符串
+     * - 若包含 KaTeX 包裹的 <span class="katex*">，仅提取其中的 <math> ... </math>
+     * - 若直接为 <math> 片段，原样返回
+     */
+    private normalizeMathML(mml: string): string {
+        try {
+            const doc = new DOMParser().parseFromString(mml, "text/html");
+            const math = doc.querySelector("math");
+            if (math) {
+                return (math as HTMLElement).outerHTML;
+            }
+        } catch {}
+        // 正则降级：去除外层 span 包裹，保留中间的 <math>
+        const re = /^<span[^>]*>\s*(<math[\s\S]*?<\/math>)\s*<\/span>$/i;
+        const match = mml.match(re);
+        if (match && match[1]) {
+            return match[1];
+        }
+        return mml;
+    }
+
+    /**
+     * 复制 SVG 图片到剪贴板：
+     * 1) 首选使用 ClipboardItem 写入 image/svg+xml（支持的浏览器将以图片形式粘贴）。
+     * 2) 若不支持或失败，则降级为复制 SVG 源码文本。
+     */
+    private copySvg(svgHtml: string): void {
+        // 直接复制 SVG 源码到剪贴板
+        this.copyText(svgHtml);
+        this.toast("SVG 源码已复制到剪贴板");
+    }
+
+    /**
+     * 展示“复制文本”的二级菜单：
+     * - 复制可视文本
+     * - 复制公式 HTML 渲染
+     * 并在面板中显示可复制的 HTML 代码。
+     */
+    // 删除文本预览子菜单函数
+
+    // 删除 CHTML 加载与文本提取相关方法
+
+    /**
+     * 将 HTML 字符串进行转义，用于安全展示在代码块中。
+     */
+    private escapeHTML(html: string): string {
+        return html
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+    }
+
+    /**
+     * 文本复制到剪贴板，支持降级。
+     */
+    private copyText(text: string): void {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard
+                .writeText(text)
+                .catch(() => this.fallbackCopy(text));
+        } else {
+            this.fallbackCopy(text);
+        }
+    }
+
+    /**
+     * 复制降级实现。
+     */
+    private fallbackCopy(text: string): void {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.style.position = "fixed";
+        ta.style.left = "-9999px";
+        document.body.appendChild(ta);
+        ta.select();
+        try {
+            document.execCommand("copy");
+        } catch {}
+        document.body.removeChild(ta);
+    }
+
+    /**
+     * 简易提示气泡。
+     */
+    private toast(message: string): void {
+        const el = document.createElement("div");
+        el.textContent = message;
+        el.style.position = "fixed";
+        el.style.bottom = "16px";
+        el.style.right = "16px";
+        el.style.background = "#fff";
+        el.style.color = "#333";
+        el.style.border = "1px solid #e5e7eb";
+        el.style.boxShadow = "0 2px 8px rgba(0,0,0,0.15)";
+        el.style.padding = "6px 10px";
+        el.style.borderRadius = "4px";
+        el.style.fontSize = "12px";
+        el.style.zIndex = "10000";
+        document.body.appendChild(el);
+        setTimeout(() => {
+            if (el.parentNode) el.parentNode.removeChild(el);
+        }, 1600);
+    }
+}
+
+const menu = new MathContextMenu();
+
+/**
+ * 绑定指定数学元素的右键事件，展示自定义菜单。
+ */
+export const bindMathContextMenu = (mathEl: HTMLElement): void => {
+    /**
+     * 绑定数学元素右键菜单
+     * - 在编辑模式下启用
+     * - 在预览模式或分屏预览（SV）模式下禁用自定义右键
+     * - 避免重复绑定：通过 data-context-menu 标记
+     */
+    const inPreview = !!(mathEl.closest(".vditor-preview") || mathEl.closest(".vditor-sv"));
+    if (inPreview) {
+        return;
+    }
+    if (mathEl.getAttribute("data-context-menu") === "true") {
+        return;
+    }
+    menu.init();
+    mathEl.addEventListener("contextmenu", (e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (typeof (e as any).stopImmediatePropagation === "function") {
+            (e as any).stopImmediatePropagation();
+        }
+        const x = e.clientX;
+        const y = e.clientY;
+        menu.show(x, y, mathEl);
+    }, { capture: true });
+    mathEl.setAttribute("data-context-menu", "true");
+};
+
+/**
+ * 为数学元素绑定复制拦截：选区完全在数学容器内时，仅复制可见文本
+ * 保持与 WYSIWYG 模式一致的行为
+ * @param mathEl 数学公式容器（.language-math）
+ */
+export const bindMathCopyInterceptor = (mathEl: HTMLElement): void => {
+    if (mathEl.getAttribute("data-copy-bound") === "true") {
+        return;
+    }
+    mathEl.addEventListener("copy", (event: ClipboardEvent) => {
+        const sel = getSelection();
+        if (!sel || sel.rangeCount === 0) {
+            return;
+        }
+        const range = sel.getRangeAt(0);
+        const container = mathEl.closest(".language-math") as HTMLElement;
+        if (
+            container &&
+            container.contains(range.startContainer) &&
+            container.contains(range.endContainer)
+        ) {
+            event.stopPropagation();
+            event.preventDefault();
+            const text = range.toString();
+            event.clipboardData.setData("text/plain", text);
+            event.clipboardData.setData("text/html", "");
+        }
+    });
+    mathEl.setAttribute("data-copy-bound", "true");
+};
+
+/**
+ * 在指定容器内批量为 IR/WYSIWYG 的数学元素绑定交互（右键菜单 + 复制拦截）
+ * - 预览/分屏预览容器内的元素会被跳过
+ * - 自动避免重复绑定
+ * @param container 扫描范围容器（例如 vditor.ir.element 或 vditor.wysiwyg.element）
+ */
+export const bindMathInteractionsInContainer = (container: HTMLElement): void => {
+    const nodes = container.querySelectorAll(".language-math");
+    nodes.forEach((el) => {
+        const mathEl = el as HTMLElement;
+        const inPreview = !!(mathEl.closest(".vditor-preview") || mathEl.closest(".vditor-sv"));
+        if (inPreview) return;
+        bindMathContextMenu(mathEl);
+        bindMathCopyInterceptor(mathEl);
+    });
+};

package/src/ts/markdown/mathRender.ts

@@ -0,0 +1,281 @@
+import { Constants } from "../constants";
+import { addScript, addScriptSync } from "../util/addScript";
+import { addStyle } from "../util/addStyle";
+import { code160to32 } from "../util/code160to32";
+import { mathRenderAdapter } from "./adapterRender";
+import { bindMathContextMenu } from "./mathContextMenu";
+
+declare const katex: {
+    renderToString(
+        math: string,
+        option: {
+            displayMode: boolean;
+            output: string;
+            macros: object;
+        }
+    ): string;
+};
+
+declare global {
+    interface Window {
+        MathJax: any;
+    }
+}
+
+/**
+ * 规范化 TeX 字符串，避免因控制序列与后续字母粘连导致解析失败。
+ * 例如 "\\vdotsa" 会被视作未知命令，将其修正为 "\\vdots{}a"。
+ */
+const normalizeTex = (tex: string): string => {
+    // 覆盖常见 dots 命令及 amsmath 变体，避免与后续字母/数字/下划线粘连
+    const DOT_MACROS = [
+        "vdots",
+        "ddots",
+        "ldots",
+        "cdots",
+        "dots",
+        "dotsc",
+        "dotsb",
+        "dotsm",
+        "dotsi",
+        "dotso",
+    ];
+    const pattern = new RegExp(
+        `\\\\(?:${DOT_MACROS.join("|")})(?=[A-Za-z0-9_])`,
+        "g"
+    );
+    return tex.replace(pattern, (m) => `${m}{}`);
+};
+
+/**
+ * 数学公式渲染入口
+ *
+ * 默认使用 MathJax 渲染（SVG 输出），并在需要时按需加载相关脚本与样式。
+ * 支持通过 options.math.engine 切换为 KaTeX。
+ *
+ * 参数说明：
+ * - element: 需要进行数学渲染的根容器（默认 document）
+ * - options: 包含 cdn 路径与 math 相关设置（engine、inlineDigit、macros 等）
+ */
+export const mathRender = (
+    element: HTMLElement | Document = document,
+    options?: { cdn?: string; math?: IMath }
+) => {
+    const mathElements = mathRenderAdapter.getElements(element);
+
+    if (mathElements.length === 0) {
+        return;
+    }
+
+    const defaultOptions = {
+        cdn: Constants.CDN,
+        math: {
+            engine: "MathJax",
+            inlineDigit: false,
+            macros: {},
+        },
+    };
+
+    if (options && options.math) {
+        options.math = Object.assign({}, defaultOptions.math, options.math);
+    }
+    options = Object.assign({}, defaultOptions, options);
+
+    if (options.math.engine === "KaTeX") {
+        addStyle(
+            `${options.cdn}/dist/js/katex/katex.min.css?v=0.16.9`,
+            "vditorKatexStyle"
+        );
+        addScript(
+            `${options.cdn}/dist/js/katex/katex.min.js?v=0.16.9`,
+            "vditorKatexScript"
+        ).then(() => {
+            addScript(
+                `${options.cdn}/dist/js/katex/mhchem.min.js?v=0.16.9`,
+                "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 = normalizeTex(
+                        code160to32(mathRenderAdapter.getCode(mathElement))
+                    );
+                    mathElement.setAttribute("data-math", math);
+                    try {
+                        // KaTeX 不完全支持 \unicode，提供降级宏以避免报错
+                        const katexMacros = Object.assign(
+                            { oiint: "\\iint" },
+                            options.math.macros || {}
+                        );
+                        const inPreviewPre =
+                            mathElement.parentElement &&
+                            mathElement.parentElement.tagName === "PRE";
+                        mathElement.innerHTML = katex.renderToString(math, {
+                            displayMode:
+                                inPreviewPre || mathElement.tagName === "DIV",
+                            output: "html",
+                            macros: katexMacros,
+                        });
+                        if (inPreviewPre) {
+                            const pre =
+                                mathElement.parentElement as HTMLElement;
+                            pre.classList.add("vditor-wysiwyg__preview--math");
+                        }
+                    } catch (e) {
+                        // 渲染失败时按普通文本展示原始内容
+                        const raw = code160to32(
+                            mathRenderAdapter.getCode(mathElement)
+                        );
+                        mathElement.textContent = raw;
+                        // 保留原有类名，移除错误态
+                        mathElement.className = "language-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")
+                            );
+                        }
+                    );
+
+                    // 绑定自定义右键菜单（编辑区生效，预览区自动跳过）
+                    bindMathContextMenu(mathElement as HTMLElement);
+                });
+            });
+        });
+    } else if (options.math.engine === "MathJax") {
+        const chainAsync = (fns: any) => {
+            if (fns.length === 0) {
+                return;
+            }
+            let curr = 0;
+            const last = fns[fns.length - 1];
+            const next = () => {
+                const fn = fns[curr++];
+                fn === last ? fn() : fn(next);
+            };
+            next();
+        };
+        if (!window.MathJax) {
+            window.MathJax = {
+                loader: {
+                    paths: { mathjax: `${options.cdn}/dist/js/mathjax` },
+                },
+                startup: {
+                    typeset: true,
+                },
+                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
+            Object.assign(window.MathJax, options.math.mathJaxOptions);
+        }
+        // 循环加载会抛异常
+        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);
+            const inPreviewPre =
+                mathElement.parentElement &&
+                mathElement.parentElement.tagName === "PRE";
+            const mathOptions = window.MathJax.getMetricsFor(mathElement);
+            mathOptions.display = inPreviewPre || mathElement.tagName === "DIV";
+            window.MathJax.tex2svgPromise(math, mathOptions).then(
+                (node: Element) => {
+                    mathElement.innerHTML = "";
+                    mathElement.setAttribute("data-math", math);
+                    mathElement.append(node);
+                    if (inPreviewPre) {
+                        const pre = mathElement.parentElement as HTMLElement;
+                        pre.classList.add("vditor-wysiwyg__preview--math");
+                    }
+                    // 绑定自定义右键菜单（编辑区生效，预览区自动跳过）
+                    bindMathContextMenu(mathElement as HTMLElement);
+                    window.MathJax.startup.document.clear();
+                    window.MathJax.startup.document.updateDocument();
+                    const errorTextElement = node.querySelector(
+                        '[data-mml-node="merror"]'
+                    );
+                    if (
+                        errorTextElement &&
+                        errorTextElement.textContent.trim() !== ""
+                    ) {
+                        // 渲染失败时按普通文本展示原始内容
+                        mathElement.textContent = rawText;
+                        mathElement.className = "language-math";
+                    }
+                    if (next) {
+                        next();
+                    }
+                }
+            );
+        };
+        window.MathJax.startup.promise.then(() => {
+            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);
+        });
+    }
+};