fix(wysiwyg):Improve Wysiwyg editor

ts_web/elements/wysiwyg/wysiwyg.formatting.ts

@@ -1,4 +1,5 @@
 import { html, type TemplateResult } from '@design.estate/dees-element';
+import { WysiwygSelection } from './wysiwyg.selection.js';
 
 export interface IFormatButton {
   command: string;
@@ -143,20 +144,20 @@ export class WysiwygFormatting {
   }
 
   static getSelectionCoordinates(shadowRoot?: ShadowRoot): { x: number, y: number } | null {
-    // Try shadow root selection first, then window
-    let selection = shadowRoot && (shadowRoot as any).getSelection ? (shadowRoot as any).getSelection() : null;
-    if (!selection || selection.rangeCount === 0) {
-      selection = window.getSelection();
-    }
+    // Get selection info using the new utility that handles Shadow DOM
+    const selectionInfo = shadowRoot 
+      ? WysiwygSelection.getSelectionInfo(shadowRoot)
+      : WysiwygSelection.getSelectionInfo();
     
-    console.log('getSelectionCoordinates - selection:', selection);
+    console.log('getSelectionCoordinates - selectionInfo:', selectionInfo);
     
-    if (!selection || selection.rangeCount === 0) {
-      console.log('No selection or no ranges');
+    if (!selectionInfo) {
+      console.log('No selection info available');
       return null;
     }
 
-    const range = selection.getRangeAt(0);
+    // Create a range from the selection info to get bounding rect
+    const range = WysiwygSelection.createRangeFromInfo(selectionInfo);
     const rect = range.getBoundingClientRect();
     
     console.log('Range rect:', rect);
@@ -174,57 +175,4 @@ export class WysiwygFormatting {
     console.log('Returning coords:', coords);
     return coords;
   }
-
-  static isFormattingApplied(command: string): boolean {
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) return false;
-    
-    const range = selection.getRangeAt(0);
-    const container = range.commonAncestorContainer;
-    const element = container.nodeType === Node.TEXT_NODE 
-      ? container.parentElement 
-      : container as Element;
-    
-    if (!element) return false;
-    
-    // Check if formatting is applied by looking at parent elements
-    switch (command) {
-      case 'bold':
-        return !!element.closest('b, strong');
-      case 'italic':
-        return !!element.closest('i, em');
-      case 'underline':
-        return !!element.closest('u');
-      case 'strikeThrough':
-        return !!element.closest('s, strike');
-      case 'code':
-        return !!element.closest('code');
-      case 'link':
-        return !!element.closest('a');
-      default:
-        return false;
-    }
-  }
-
-  static hasSelection(): boolean {
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) {
-      console.log('No selection or no ranges');
-      return false;
-    }
-    
-    // Check if we actually have selected text (not just collapsed cursor)
-    const selectedText = selection.toString();
-    if (!selectedText || selectedText.length === 0) {
-      console.log('No text selected');
-      return false;
-    }
-    
-    return true;
-  }
-
-  static getSelectedText(): string {
-    const selection = window.getSelection();
-    return selection ? selection.toString() : '';
-  }
 }