@8btc/mditor 0.0.24 → 0.0.25

package/src/assets/less/_sv.less

@@ -129,4 +129,16 @@
       font-weight: bold;
     }
   }
+
+  // 数学公式选中高亮样式
+  .language-math {
+    user-select: all;
+    cursor: text;
+    transition: background-color 0.1s ease;
+
+    &.vditor-math--selected {
+      background-color: highlight !important;
+      color: highlighttext !important;
+    }
+  }
 }

package/src/assets/less/_wysiwyg.less

@@ -90,6 +90,18 @@
     font-size: 100% !important;
   }
 
+  // 数学公式选中高亮样式
+  .language-math {
+    user-select: all;
+    cursor: text;
+    transition: background-color 0.1s ease;
+
+    &.vditor-math--selected {
+      background-color: highlight !important;
+      color: highlighttext !important;
+    }
+  }
+
   & > .vditor-reset > h1:before,
   & > .vditor-reset > h2:before,
   & > .vditor-reset > h3:before,

package/src/assets/less/index.less

@@ -99,4 +99,9 @@ details>summary {
 
 details>summary::-webkit-details-marker {
   display: none;
+}
+
+::selection {
+  background: highlight; /* 系统原生高亮背景色 */
+  color: highlighttext;   /* 系统原生高亮文本色 */
 }

package/src/ts/ir/index.ts

@@ -21,6 +21,7 @@ import { highlightToolbarIR } from "./highlightToolbarIR";
 import { input } from "./input";
 import { processAfterRender, processHint } from "./process";
 import { hidePanel } from "../toolbar/setToolbar";
+import { bindMathSelectionListener } from "../util/mathSelection";
 
 class IR {
     public range: Range;
@@ -29,6 +30,7 @@ class IR {
     public hlToolbarTimeoutId: number;
     public composingLock: boolean = false;
     public preventInput: boolean;
+    private mathSelectionCleanup: () => void;
 
     constructor(vditor: IVditor) {
         const divElement = document.createElement("div");
@@ -52,6 +54,16 @@ class IR {
         dropEvent(vditor, this.element);
         copyEvent(vditor, this.element, this.copy);
         cutEvent(vditor, this.element, this.copy);
+
+        // 绑定数学公式选中高亮监听
+        this.mathSelectionCleanup = bindMathSelectionListener(this.element);
+    }
+
+    public unbindListener() {
+        // 清理数学公式选中监听
+        if (this.mathSelectionCleanup) {
+            this.mathSelectionCleanup();
+        }
     }
 
     private copy(event: ClipboardEvent, vditor: IVditor) {
@@ -62,8 +74,39 @@ class IR {
         event.stopPropagation();
         event.preventDefault();
 
+        // 检查选区是否在数学公式元素内
+        let mathElement = hasClosestByClassName(
+            range.startContainer,
+            "language-math"
+        ) as HTMLElement;
+        const mathEndElement = hasClosestByClassName(
+            range.endContainer,
+            "language-math"
+        ) as HTMLElement;
+        
+        // 如果选区的起点和终点都在同一个数学公式元素内，复制源码
+        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;
+        }
+
+        // 处理包含多个公式的混合内容
         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);
+                }
+            });
+        }
 
         event.clipboardData.setData("text/plain", vditor.lute.VditorIRDOM2Md(tempElement.innerHTML).trim());
         event.clipboardData.setData("text/html", "");

package/src/ts/markdown/previewRender.ts

@@ -24,6 +24,7 @@ import { plantumlRender } from "./plantumlRender";
 import { setLute } from "./setLute";
 import { speechRender } from "./speechRender";
 import { selectionRender } from "./selectionRender";
+import { bindMathSelectionListener } from "../util/mathSelection";
 
 const mergeOptions = (options?: IPreviewOptions) => {
     const defaultOption: IPreviewOptions = {
@@ -207,6 +208,82 @@ export const previewRender = async (
     if (mergedOptions.lazyLoadImage) {
         lazyLoadImageRender(previewElement);
     }
+    // 绑定数学公式选中高亮监听
+    bindMathSelectionListener(previewElement);
+
+    // 绑定复制事件，处理数学公式源码复制
+    previewElement.addEventListener("copy", (event: ClipboardEvent) => {
+        const selection = window.getSelection();
+        if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+            return;
+        }
+
+        const range = selection.getRangeAt(0);
+
+        // 检查选区是否只包含单个数学公式
+        let mathElement = hasClosestByClassName(
+            range.startContainer,
+            "language-math"
+        ) as HTMLElement;
+        const mathEndElement = hasClosestByClassName(
+            range.endContainer,
+            "language-math"
+        ) as HTMLElement;
+
+        // 如果选区的起点和终点都在同一个数学公式元素内，复制源码
+        if (
+            mathElement &&
+            mathEndElement &&
+            mathElement.isSameNode(mathEndElement)
+        ) {
+            event.stopPropagation();
+            event.preventDefault();
+            const mathSource =
+                mathElement.getAttribute("data-math") || range.toString();
+            event.clipboardData.setData("text/plain", mathSource);
+            event.clipboardData.setData("text/html", "");
+            return;
+        }
+
+        // 处理包含多个公式的混合内容
+        const fragment = range.cloneContents();
+        const mathElements = fragment.querySelectorAll(".language-math");
+
+        if (mathElements.length > 0) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            // 创建临时容器来处理内容
+            const tempDiv = document.createElement("div");
+            tempDiv.appendChild(fragment);
+
+            // 替换所有数学公式为源码
+            tempDiv
+                .querySelectorAll(".language-math")
+                .forEach((mathEl: HTMLElement) => {
+                    const mathSource = mathEl.getAttribute("data-math");
+                    console.log(mathEl.tagName, "mathEl");
+                    if (mathSource) {
+                        if (mathEl.tagName === "SPAN") {
+                            const textNode = document.createTextNode(
+                                `$${mathSource}$`
+                            );
+                            mathEl.parentNode.replaceChild(textNode, mathEl);
+                        } else {
+                            const textNode = document.createTextNode(
+                                `$$${mathSource}$$`
+                            );
+                            mathEl.parentNode.replaceChild(textNode, mathEl);
+                        }
+                    }
+                });
+
+            // 获取纯文本内容
+            const plainText = tempDiv.textContent || tempDiv.innerText || "";
+            event.clipboardData.setData("text/plain", plainText);
+            event.clipboardData.setData("text/html", "");
+        }
+    });
 
     previewElement.addEventListener(
         "click",

package/src/ts/preview/index.ts

@@ -19,11 +19,13 @@ import {
 import { setSelectionFocus } from "../util/selection";
 import { selectionRender } from "../markdown/selectionRender";
 import { previewImage } from "./image";
+import { bindMathSelectionListener } from "../util/mathSelection";
 
 export class Preview {
     public element: HTMLElement;
     public previewElement: HTMLElement;
     private mdTimeoutId: number;
+    private mathSelectionCleanup: () => void;
 
     /**
      * 构造预览区域容器，注册复制与点击事件。
@@ -98,6 +100,16 @@ export class Preview {
             }
         );
         this.element.appendChild(this.previewElement);
+
+        // 绑定数学公式选中高亮监听
+        this.mathSelectionCleanup = bindMathSelectionListener(this.previewElement);
+    }
+
+    public unbindListener() {
+        // 清理数学公式选中监听
+        if (this.mathSelectionCleanup) {
+            this.mathSelectionCleanup();
+        }
     }
 
     /**

package/src/ts/sv/index.ts

@@ -12,6 +12,7 @@ import { paste } from "../util/fixBrowserBehavior";
 import { getSelectText } from "../util/getSelectText";
 import { inputEvent } from "./inputEvent";
 import { processAfterRender } from "./process";
+import { bindMathSelectionListener } from "../util/mathSelection";
 
 class Editor {
     public range: Range;
@@ -20,6 +21,7 @@ class Editor {
     public processTimeoutId: number;
     public hlToolbarTimeoutId: number;
     public preventInput: boolean;
+    private mathSelectionCleanup: () => void;
 
     constructor(vditor: IVditor) {
         this.element = document.createElement("pre");
@@ -40,6 +42,16 @@ class Editor {
         dropEvent(vditor, this.element);
         copyEvent(vditor, this.element, this.copy);
         cutEvent(vditor, this.element, this.copy);
+
+        // 绑定数学公式选中高亮监听
+        this.mathSelectionCleanup = bindMathSelectionListener(this.element);
+    }
+
+    public unbindListener() {
+        // 清理数学公式选中监听
+        if (this.mathSelectionCleanup) {
+            this.mathSelectionCleanup();
+        }
     }
 
     private copy(event: ClipboardEvent, vditor: IVditor) {

package/src/ts/util/hasClosest.ts

@@ -1,4 +1,4 @@
-import {hasClosestByTag} from "./hasClosestByHeadings";
+import { hasClosestByTag } from "./hasClosestByHeadings";
 
 export const hasTopClosestByClassName = (element: Node, className: string) => {
     let closest = hasClosestByClassName(element, className);
@@ -15,12 +15,20 @@ export const hasTopClosestByClassName = (element: Node, className: string) => {
     return closest || false;
 };
 
-export const hasTopClosestByAttribute = (element: Node, attr: string, value: string) => {
+export const hasTopClosestByAttribute = (
+    element: Node,
+    attr: string,
+    value: string
+) => {
     let closest = hasClosestByAttribute(element, attr, value);
     let parentClosest: boolean | HTMLElement = false;
     let findTop = false;
     while (closest && !closest.classList.contains("vditor-reset") && !findTop) {
-        parentClosest = hasClosestByAttribute(closest.parentElement, attr, value);
+        parentClosest = hasClosestByAttribute(
+            closest.parentElement,
+            attr,
+            value
+        );
         if (parentClosest) {
             closest = parentClosest;
         } else {
@@ -49,13 +57,20 @@ export const getTopList = (element: Node) => {
     const topUlElement = hasTopClosestByTag(element, "UL");
     const topOlElement = hasTopClosestByTag(element, "OL");
     let topListElement = topUlElement;
-    if (topOlElement && (!topUlElement || (topUlElement && topOlElement.contains(topUlElement)))) {
+    if (
+        topOlElement &&
+        (!topUlElement || (topUlElement && topOlElement.contains(topUlElement)))
+    ) {
         topListElement = topOlElement;
     }
     return topListElement;
 };
 
-export const hasClosestByAttribute = (element: Node, attr: string, value: string) => {
+export const hasClosestByAttribute = (
+    element: Node,
+    attr: string,
+    value: string
+) => {
     if (!element) {
         return false;
     }
@@ -84,13 +99,18 @@ export const hasClosestBlock = (element: Node) => {
     let e = element as HTMLElement;
     let isClosest = false;
 
-    const blockElement = hasClosestByAttribute(element as HTMLElement, "data-block", "0");
+    const blockElement = hasClosestByAttribute(
+        element as HTMLElement,
+        "data-block",
+        "0"
+    );
     if (blockElement) {
         return blockElement;
     }
 
     while (e && !isClosest && !e.classList.contains("vditor-reset")) {
-        if (e.tagName === "H1" ||
+        if (
+            e.tagName === "H1" ||
             e.tagName === "H2" ||
             e.tagName === "H3" ||
             e.tagName === "H4" ||
@@ -99,7 +119,8 @@ export const hasClosestBlock = (element: Node) => {
             e.tagName === "P" ||
             e.tagName === "BLOCKQUOTE" ||
             e.tagName === "OL" ||
-            e.tagName === "UL") {
+            e.tagName === "UL"
+        ) {
             isClosest = true;
         } else {
             e = e.parentElement;

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,