update

ts_web/elements/wysiwyg/wysiwyg.selection.ts

@@ -10,6 +10,9 @@ export interface SelectionInfo {
   collapsed: boolean;
 }
 
+// Type for the extended caretPositionFromPoint with Shadow DOM support
+type CaretPositionFromPointExtended = (x: number, y: number, ...shadowRoots: ShadowRoot[]) => CaretPosition | null;
+
 export class WysiwygSelection {
   /**
    * Gets selection info that works across Shadow DOM boundaries
@@ -22,7 +25,8 @@ export class WysiwygSelection {
     // Try using getComposedRanges if available (better Shadow DOM support)
     if ('getComposedRanges' in selection && typeof selection.getComposedRanges === 'function') {
       try {
-        const ranges = selection.getComposedRanges(...shadowRoots);
+        // Pass shadow roots in the correct format as per MDN
+        const ranges = selection.getComposedRanges({ shadowRoots });
         if (ranges.length > 0) {
           const range = ranges[0];
           return {
@@ -139,6 +143,66 @@ export class WysiwygSelection {
     }
   }
 
+  /**
+   * Gets cursor position from mouse coordinates with Shadow DOM support
+   */
+  static getCursorPositionFromPoint(x: number, y: number, container: HTMLElement, ...shadowRoots: ShadowRoot[]): number | null {
+    // Try modern API with shadow root support
+    if ('caretPositionFromPoint' in document && document.caretPositionFromPoint) {
+      let caretPos: CaretPosition | null = null;
+      
+      // Try with shadow roots first (newer API)
+      try {
+        caretPos = (document.caretPositionFromPoint as any)(x, y, ...shadowRoots);
+      } catch (e) {
+        // Fallback to standard API without shadow roots
+        caretPos = document.caretPositionFromPoint(x, y);
+      }
+      
+      if (caretPos && container.contains(caretPos.offsetNode)) {
+        // Calculate total offset within the container
+        return this.getOffsetInElement(caretPos.offsetNode, caretPos.offset, container);
+      }
+    }
+    
+    // Safari/WebKit fallback
+    if ('caretRangeFromPoint' in document) {
+      const range = (document as any).caretRangeFromPoint(x, y);
+      if (range && container.contains(range.startContainer)) {
+        return this.getOffsetInElement(range.startContainer, range.startOffset, container);
+      }
+    }
+    
+    return null;
+  }
+  
+  /**
+   * Helper to get the total character offset of a position within an element
+   */
+  private static getOffsetInElement(node: Node, offset: number, container: HTMLElement): number {
+    let totalOffset = 0;
+    let found = false;
+    
+    const walker = document.createTreeWalker(
+      container,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+    
+    let textNode: Node | null;
+    while (textNode = walker.nextNode()) {
+      if (textNode === node) {
+        totalOffset += offset;
+        found = true;
+        break;
+      } else {
+        totalOffset += textNode.textContent?.length || 0;
+      }
+    }
+    
+    return found ? totalOffset : 0;
+  }
+
   /**
    * Sets cursor position in an element
    */