update

ts_web/elements/wysiwyg/dees-formatting-menu.ts

@@ -123,25 +123,12 @@ export class DeesFormattingMenu extends DeesElement {
         class="formatting-menu" 
         style="left: ${this.position.x}px; top: ${this.position.y}px;"
         tabindex="-1"
-        @mousedown="${(e: MouseEvent) => {
-          // Prevent focus loss
-          e.preventDefault();
-          e.stopPropagation();
-        }}"
-        @click="${(e: MouseEvent) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}"
-        @focus="${(e: FocusEvent) => {
-          // Prevent menu from taking focus
-          e.preventDefault();
-          e.stopPropagation();
-        }}"
+        data-menu-type="formatting"
       >
         ${WysiwygFormatting.formatButtons.map(button => html`
           <button 
             class="format-button ${button.command}"
-            @click="${() => this.applyFormat(button.command)}"
+            data-command="${button.command}"
             title="${button.label}${button.shortcut ? ` (${button.shortcut})` : ''}"
           >
             <span class="${button.command === 'code' ? 'code-icon' : ''}">${button.icon}</span>
@@ -177,4 +164,40 @@ export class DeesFormattingMenu extends DeesElement {
   public updatePosition(position: { x: number; y: number }): void {
     this.position = position;
   }
+  
+  public firstUpdated(): void {
+    // Set up event delegation for the menu
+    this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => {
+      const menu = this.shadowRoot?.querySelector('.formatting-menu');
+      if (menu && menu.contains(e.target as Node)) {
+        // Prevent focus loss
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+    
+    this.shadowRoot?.addEventListener('click', (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const button = target.closest('.format-button') as HTMLElement;
+      
+      if (button) {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const command = button.getAttribute('data-command');
+        if (command) {
+          this.applyFormat(command);
+        }
+      }
+    });
+    
+    this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => {
+      const menu = this.shadowRoot?.querySelector('.formatting-menu');
+      if (menu && menu.contains(e.target as Node)) {
+        // Prevent menu from taking focus
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }, true); // Use capture phase
+  }
 }