fix(wysiwig): zindexregistry for menus

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

@@ -46,10 +46,14 @@ export class DeesFormattingMenu extends DeesElement {
       :host {
         position: fixed;
         pointer-events: none;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
       }
 
       .formatting-menu {
-        position: absolute;
+        position: fixed;
         background: ${cssManager.bdTheme('#ffffff', '#262626')};
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
         border-radius: 6px;
@@ -159,12 +163,12 @@ export class DeesFormattingMenu extends DeesElement {
     this.position = position;
     this.callback = callback;
     
-    // Get z-index from registry
+    // Get z-index from registry and apply immediately
     this.menuZIndex = zIndexRegistry.getNextZIndex();
     zIndexRegistry.register(this, this.menuZIndex);
+    this.style.zIndex = this.menuZIndex.toString();
     
     this.visible = true;
-    console.log('FormattingMenu.show - visible set to:', this.visible);
   }
 
   public hide(): void {

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

@@ -1,6 +1,5 @@
 import {
   customElement,
-  property,
   html,
   DeesElement,
   type TemplateResult,
@@ -54,10 +53,14 @@ export class DeesSlashMenu extends DeesElement {
       :host {
         position: fixed;
         pointer-events: none;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
       }
 
       .slash-menu {
-        position: absolute;
+        position: fixed;
         background: ${cssManager.bdTheme('#ffffff', '#262626')};
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
         border-radius: 8px;
@@ -121,7 +124,7 @@ export class DeesSlashMenu extends DeesElement {
   render(): TemplateResult {
     if (!this.visible) return html``;
 
-    // Apply z-index to host element
+    // Ensure z-index is applied to host element
     this.style.zIndex = this.menuZIndex.toString();
 
     const menuItems = this.getFilteredMenuItems();
@@ -168,9 +171,10 @@ export class DeesSlashMenu extends DeesElement {
     this.filter = '';
     this.selectedIndex = 0;
     
-    // Get z-index from registry
+    // Get z-index from registry and apply immediately
     this.menuZIndex = zIndexRegistry.getNextZIndex();
     zIndexRegistry.register(this, this.menuZIndex);
+    this.style.zIndex = this.menuZIndex.toString();
     
     this.visible = true;
   }

ts_web/pages/zindex-showcase.ts

@@ -12,7 +12,7 @@ import '../elements/dees-input-tags.js';
 import '../elements/dees-input-wysiwyg.js';
 import '../elements/dees-appui-profiledropdown.js';
 
-export const showcasePage = () => html`
+export const zIndexShowcase = () => html`
   <style>
     ${css`
       .page-wrapper {
@@ -245,6 +245,16 @@ export const showcasePage = () => html`
         font-size: 14px;
       }
 
+      /* Consistent panel spacing */
+      dees-panel {
+        display: block;
+        margin-bottom: 24px;
+      }
+      
+      dees-panel:last-child {
+        margin-bottom: 0;
+      }
+
       .test-area {
         position: relative;
         height: 200px;
@@ -665,14 +675,23 @@ export const showcasePage = () => html`
                       .placeholder=${'Type "/" to see slash commands or select text to format...'}
                       .outputFormat=${'html'}
                       .description=${'The slash menu and formatting menu should appear above this modal'}
+                      .value=${`<p>Welcome to the WYSIWYG editor demo!</p>
+<p>This editor demonstrates proper z-index management:</p>
+<ul>
+<li>Type <strong>/</strong> to open the slash command menu</li>
+<li>Select any text to see the formatting toolbar</li>
+<li>Both menus will appear <em>above</em> this modal</li>
+</ul>
+<p>Try it now: Type / here or select this text to format it.</p>`}
                     ></dees-input-wysiwyg>
                   </dees-form>
-                  <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
+                  <div style="margin-top: 16px; padding: 16px; background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; border-radius: 8px;">
-                    <strong>Tips:</strong><br>
+                    <strong style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">✨ Z-Index Fix Applied!</strong><br>
-                    • Type "/" to open the slash command menu<br>
+                    <span style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">
-                    • Select text to see the formatting toolbar<br>
+                      The WYSIWYG menus now properly use the dynamic z-index registry.<br>
-                    • Both menus should appear above this modal
+                      They will always appear above the modal, regardless of stacking order.
-                  </p>
+                    </span>
+                  </div>
                 `,
                 menuOptions: [
                   { name: 'Cancel', action: async (modal) => modal.destroy() },