@8btc/mditor 0.0.24 → 0.0.26

package/src/ts/util/mathSelection.ts

@@ -0,0 +1,59 @@
+/**
+ * 数学公式选中高亮工具
+ * 监听选区变化，为选中的数学公式添加高亮样式
+ */
+
+const MATH_SELECTED_CLASS = "vditor-math--selected";
+
+/**
+ * 检查并更新数学公式的选中高亮状态
+ * @param container 容器元素（编辑器或预览区域）
+ */
+export const updateMathSelection = (container: HTMLElement) => {
+    const selection = window.getSelection();
+    
+    // 获取所有数学公式元素
+    const mathElements = container.querySelectorAll(".language-math");
+    
+    // 移除所有旧的高亮
+    mathElements.forEach((el) => el.classList.remove(MATH_SELECTED_CLASS));
+    
+    // 无选中内容则返回
+    if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+        return;
+    }
+    
+    // 检测选中的公式节点并添加高亮
+    mathElements.forEach((element) => {
+        if (selection.containsNode(element, true)) {
+            element.classList.add(MATH_SELECTED_CLASS);
+        }
+    });
+};
+
+/**
+ * 为容器绑定数学公式选中高亮监听
+ * @param container 容器元素（编辑器或预览区域）
+ */
+export const bindMathSelectionListener = (container: HTMLElement) => {
+    const updateHandler = () => updateMathSelection(container);
+    
+    // 监听选区变化
+    document.addEventListener("selectionchange", updateHandler);
+    
+    // 监听鼠标抬起（处理拖拽选择）
+    container.addEventListener("mouseup", updateHandler);
+    
+    // 监听键盘选择（Shift + 方向键）
+    container.addEventListener("keyup", (e: KeyboardEvent) => {
+        if (e.shiftKey && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) {
+            updateHandler();
+        }
+    });
+    
+    // 返回清理函数
+    return () => {
+        document.removeEventListener("selectionchange", updateHandler);
+        container.removeEventListener("mouseup", updateHandler);
+    };
+};

package/src/ts/wysiwyg/index.ts

@@ -38,6 +38,7 @@ import { input } from "./input";
 import { showCode } from "./showCode";
 import { getSelectText } from "../util/getSelectText";
 import { getMarkdown } from "../markdown/getMarkdown";
+import { bindMathSelectionListener } from "../util/mathSelection";
 
 class WYSIWYG {
     public range: Range;
@@ -55,6 +56,7 @@ class WYSIWYG {
     public commentIds: string[] = [];
     private vditor: IVditor;
     private scrollListener: () => void;
+    private mathSelectionCleanup: () => void;
 
     constructor(vditor: IVditor) {
         this.vditor = vditor;
@@ -322,6 +324,9 @@ class WYSIWYG {
                 };
             }
         }
+
+        // 绑定数学公式选中高亮监听
+        this.mathSelectionCleanup = bindMathSelectionListener(this.element);
     }
 
     public getComments(vditor: IVditor, getData = false) {
@@ -517,12 +522,16 @@ class WYSIWYG {
 
     public unbindListener() {
         window.removeEventListener("scroll", this.scrollListener);
+        // 清理数学公式选中监听
+        if (this.mathSelectionCleanup) {
+            this.mathSelectionCleanup();
+        }
     }
 
     /**
      * 复制事件处理
      * - 代码块与链接：按原有规则格式化复制
-     * - 数学公式选区：仅复制可见文本内容（不转换为 Markdown/TeX/MathML）
+     * - 数学公式选区：复制公式源码（与 sv 模式一致）
      * - 其他内容：转换为 Markdown 文本复制
      */
     private copy(event: ClipboardEvent, vditor: IVditor) {
@@ -566,33 +575,42 @@ class WYSIWYG {
             return;
         }
 
-        // 数学公式选区：仅复制可见文本
-        const startPreview = hasClosestByClassName(
+        // 数学公式选区：复制公式源码
+        // 检查选区是否在数学公式元素内
+        let mathElement = hasClosestByClassName(
             range.startContainer,
-            "vditor-wysiwyg__preview"
+            "language-math"
         ) as HTMLElement;
-        const endPreview = hasClosestByClassName(
+        const mathEndElement = hasClosestByClassName(
             range.endContainer,
-            "vditor-wysiwyg__preview"
+            "language-math"
         ) as HTMLElement;
-        const isMathPreview = (el: HTMLElement) => {
-            const first = el.firstElementChild as HTMLElement | null;
-            return !!first && first.classList.contains("language-math");
-        };
-        if (
-            startPreview &&
-            endPreview &&
-            startPreview.isSameNode(endPreview) &&
-            isMathPreview(startPreview)
-        ) {
-            event.clipboardData.setData("text/plain", range.toString());
+        
+        // 如果选区的起点和终点都在同一个数学公式元素内
+        if (mathElement && mathEndElement && mathElement.isSameNode(mathEndElement)) {
+            const mathSource = mathElement.getAttribute("data-math") || range.toString();
+            event.clipboardData.setData("text/plain", mathSource);
             event.clipboardData.setData("text/html", "");
             return;
         }
 
-        // 默认：转换为 Markdown 文本
+        // 处理包含多个公式的混合内容
         const tempElement = document.createElement("div");
         tempElement.appendChild(range.cloneContents());
+        
+        const mathElements = tempElement.querySelectorAll(".language-math");
+        if (mathElements.length > 0) {
+            // 替换所有数学公式为源码
+            mathElements.forEach((mathEl: HTMLElement) => {
+                const mathSource = mathEl.getAttribute("data-math");
+                if (mathSource) {
+                    const textNode = document.createTextNode(mathSource);
+                    mathEl.parentNode.replaceChild(textNode, mathEl);
+                }
+            });
+        }
+
+        // 默认：转换为 Markdown 文本
         event.clipboardData.setData(
             "text/plain",
             vditor.lute.VditorDOM2Md(tempElement.innerHTML).trim()
@@ -630,28 +648,38 @@ class WYSIWYG {
                 html: "",
             };
         }
-        const startPreview = hasClosestByClassName(
+        // 检查选区是否在数学公式元素内
+        let mathElement = hasClosestByClassName(
             range.startContainer,
-            "vditor-wysiwyg__preview"
+            "language-math"
         ) as HTMLElement;
-        const endPreview = hasClosestByClassName(
+        const mathEndElement = hasClosestByClassName(
             range.endContainer,
-            "vditor-wysiwyg__preview"
+            "language-math"
         ) as HTMLElement;
-        const isMathPreview = (el: HTMLElement) => {
-            const first = el.firstElementChild as HTMLElement | null;
-            return !!first && first.classList.contains("language-math");
-        };
-        if (
-            startPreview &&
-            endPreview &&
-            startPreview.isSameNode(endPreview) &&
-            isMathPreview(startPreview)
-        ) {
-            return { plainText: range.toString(), html: "" };
+        
+        // 如果选区的起点和终点都在同一个数学公式元素内
+        if (mathElement && mathEndElement && mathElement.isSameNode(mathEndElement)) {
+            const mathSource = mathElement.getAttribute("data-math") || range.toString();
+            return { plainText: mathSource, html: "" };
         }
+        
+        // 处理包含多个公式的混合内容
         const tempElement = document.createElement("div");
         tempElement.appendChild(range.cloneContents());
+        
+        const mathElements = tempElement.querySelectorAll(".language-math");
+        if (mathElements.length > 0) {
+            // 替换所有数学公式为源码
+            mathElements.forEach((mathEl: HTMLElement) => {
+                const mathSource = mathEl.getAttribute("data-math");
+                if (mathSource) {
+                    const textNode = document.createTextNode(mathSource);
+                    mathEl.parentNode.replaceChild(textNode, mathEl);
+                }
+            });
+        }
+        
         return {
             plainText: vditor.lute.VditorDOM2Md(tempElement.innerHTML).trim(),
             html: tempElement.innerHTML,