update

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

@@ -125,26 +125,13 @@ export class DeesSlashMenu extends DeesElement {
         class="slash-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="slash"
       >
         ${menuItems.map((item, index) => html`
           <div 
             class="slash-menu-item ${index === this.selectedIndex ? 'selected' : ''}"
-            @click="${() => this.selectItem(item.type)}"
-            @mouseenter="${() => this.selectedIndex = index}"
+            data-item-type="${item.type}"
+            data-item-index="${index}"
           >
             <span class="icon">${item.icon}</span>
             <span>${item.label}</span>
@@ -206,4 +193,50 @@ export class DeesSlashMenu extends DeesElement {
       this.selectItem(items[this.selectedIndex].type);
     }
   }
+  
+  public firstUpdated(): void {
+    // Set up event delegation
+    this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => {
+      const menu = this.shadowRoot?.querySelector('.slash-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 menuItem = target.closest('.slash-menu-item') as HTMLElement;
+      
+      if (menuItem) {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const itemType = menuItem.getAttribute('data-item-type');
+        if (itemType) {
+          this.selectItem(itemType);
+        }
+      }
+    });
+    
+    this.shadowRoot?.addEventListener('mouseenter', (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const menuItem = target.closest('.slash-menu-item') as HTMLElement;
+      
+      if (menuItem) {
+        const index = parseInt(menuItem.getAttribute('data-item-index') || '0', 10);
+        this.selectedIndex = index;
+      }
+    }, true); // Use capture phase
+    
+    this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => {
+      const menu = this.shadowRoot?.querySelector('.slash-menu');
+      if (menu && menu.contains(e.target as Node)) {
+        // Prevent menu from taking focus
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }, true); // Use capture phase
+  }
 }