fix: 修复当行内代码存在于本行 x0 处时点击行末尾光标位置异常的问题

Author: LarryZhu-dev

src/core/decorations/index.ts

@@ -487,19 +487,25 @@ export function computeDecorations(
           decorations.push(
             Decoration.inline(region.from, region.from + hashEnd, {
               class: "milkup-syntax-hidden",
+              contenteditable: "false",
+              "aria-hidden": "true",
             })
           );
         } else {
           decorations.push(
             Decoration.inline(region.from, region.to, {
               class: "milkup-syntax-hidden",
+              contenteditable: "false",
+              "aria-hidden": "true",
             })
           );
         }
       } else {
         decorations.push(
           Decoration.inline(region.from, region.to, {
             class: "milkup-syntax-hidden",
+            contenteditable: "false",
+            "aria-hidden": "true",
           })
         );
       }

src/core/editor.ts

@@ -61,7 +61,12 @@ import {
   createTaskListNodeView,
   createTaskItemNodeView,
 } from "./nodeviews/list";
-import { toggleSourceView, setSourceView, decorationPluginKey } from "./decorations";
+import {
+  findSyntaxMarkerRegions,
+  toggleSourceView,
+  setSourceView,
+  decorationPluginKey,
+} from "./decorations";
 import type { MilkupConfig, MilkupEditor as IMilkupEditor, MilkupPlugin } from "./types";
 import {
   insertTable,
@@ -133,6 +138,10 @@ export class MilkupEditor implements IMilkupEditor {
   private searchInSelection = false;
   private searchSelectionRange: { from: number; to: number } | null = null;
   private containerKeydownHandler: ((e: KeyboardEvent) => void) | null = null;
+  private selectionCorrectionHandler: (() => void) | null = null;
+  private suppressSelectionCorrection = false;
+  private recentMouseupSelectionHead: number | null = null;
+  private recentMouseupAt = 0;
   private _destroyed = false;
 
   constructor(container: HTMLElement, config: MilkupConfig = {}) {
@@ -370,6 +379,10 @@ export class MilkupEditor implements IMilkupEditor {
       this.view.dom.parentElement?.removeEventListener("keydown", this.containerKeydownHandler);
       this.containerKeydownHandler = null;
     }
+    if (this.selectionCorrectionHandler) {
+      document.removeEventListener("selectionchange", this.selectionCorrectionHandler);
+      this.selectionCorrectionHandler = null;
+    }
     this.searchWrapper?.remove();
     this.searchWrapper = null;
     this.searchPanel = null;
@@ -392,7 +405,6 @@ export class MilkupEditor implements IMilkupEditor {
   private handleEditorClick(view: EditorView, pos: number, event: MouseEvent): boolean {
     const { state } = view;
     const { doc } = state;
-    const editorRect = view.dom.getBoundingClientRect();
     const clickY = event.clientY;
 
     // 获取第一个和最后一个块节点的位置
@@ -545,6 +557,7 @@ export class MilkupEditor implements IMilkupEditor {
       "click",
       (e: Event) => {
         const me = e as MouseEvent;
+        this.correctSelectionFromHiddenSyntaxMarker();
         const linkEl = this.findLinkElement(me.target as HTMLElement);
         if (!linkEl) return;
 
@@ -554,6 +567,16 @@ export class MilkupEditor implements IMilkupEditor {
       true // capture 阶段
     );
 
+    dom.addEventListener(
+      "mouseup",
+      (e: Event) => {
+        this.recordMouseupSelectionSnapshot();
+        queueMicrotask(() => this.correctSelectionFromHiddenSyntaxMarker());
+        setTimeout(() => this.correctSelectionFromHiddenSyntaxMarker(), 0);
+      },
+      true
+    );
+
     // mousemove 检测链接 hover
     dom.addEventListener("mousemove", (e: Event) => {
       const me = e as MouseEvent;
@@ -582,6 +605,70 @@ export class MilkupEditor implements IMilkupEditor {
         passive: true,
       });
     }
+
+    if (!this.selectionCorrectionHandler) {
+      this.selectionCorrectionHandler = () => {
+        if (!this.view.hasFocus()) return;
+        this.correctSelectionFromHiddenSyntaxMarker();
+      };
+      document.addEventListener("selectionchange", this.selectionCorrectionHandler);
+    }
+  }
+
+  private recordMouseupSelectionSnapshot(): void {
+    const { selection } = this.view.state;
+    if (!selection.empty) return;
+    if (this.isPositionInsideSyntaxMarker(selection.head)) return;
+    this.recentMouseupSelectionHead = selection.head;
+    this.recentMouseupAt = Date.now();
+  }
+
+  private isPositionInsideSyntaxMarker(pos: number): boolean {
+    const syntaxRegions = findSyntaxMarkerRegions(this.view.state.doc);
+    return syntaxRegions.some((region) => pos >= region.from && pos <= region.to);
+  }
+
+  private correctSelectionFromHiddenSyntaxMarker(): void {
+    if (this.suppressSelectionCorrection) return;
+
+    const nativeSelection = window.getSelection();
+    if (!nativeSelection?.isCollapsed) return;
+
+    const anchorNode = nativeSelection.anchorNode;
+    const now = Date.now();
+    const recentHead = this.recentMouseupSelectionHead;
+    if (recentHead === null || now - this.recentMouseupAt > 250) return;
+    if (this.isPositionInsideSyntaxMarker(recentHead)) return;
+
+    let nativePos: number | null = null;
+    try {
+      if (anchorNode) {
+        nativePos = this.view.posAtDOM(anchorNode, nativeSelection.anchorOffset);
+      }
+    } catch {
+      nativePos = null;
+    }
+
+    const { selection } = this.view.state;
+    const anchorText = anchorNode?.textContent ?? "";
+    const nativeLooksLikeSyntaxMarker =
+      (nativePos !== null && this.isPositionInsideSyntaxMarker(nativePos)) ||
+      (anchorText === "`" && this.isPositionInsideSyntaxMarker(selection.head));
+
+    if (!nativeLooksLikeSyntaxMarker) return;
+    if (selection.head === recentHead) return;
+
+    this.suppressSelectionCorrection = true;
+    try {
+      this.view.dispatch(
+        this.view.state.tr.setSelection(TextSelection.create(this.view.state.doc, recentHead))
+      );
+      this.view.focus();
+    } finally {
+      requestAnimationFrame(() => {
+        this.suppressSelectionCorrection = false;
+      });
+    }
   }
 
   private showLinkTooltip(linkEl: HTMLAnchorElement, href: string): void {

src/core/styles/milkup.css

@@ -32,6 +32,7 @@
   width: 0;
   display: inline;
   user-select: none;
+  pointer-events: none;
 }
 
 /* 语法标记 - 显示 */