design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(wysiwig): zindexregistry for menus

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 00:35:06 +00:00
parent 00ad2b0563
commit 3ee48e80ad
3 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ts_web/elements/wysiwyg/dees-formatting-menu.ts
View File

@ -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 {

12
ts_web/elements/wysiwyg/dees-slash-menu.ts
View File

@ -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;
}

33
ts_web/pages/zindex-showcase.ts
View File

@ -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')}">
<strong>Tips:</strong><br>
• Type "/" to open the slash command menu<br>
• Select text to see the formatting toolbar<br>
• Both menus should appear above this modal
</p>
<div style="margin-top: 16px; padding: 16px; background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; border-radius: 8px;">
<strong style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">✨ Z-Index Fix Applied!</strong><br>
<span style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">
The WYSIWYG menus now properly use the dynamic z-index registry.<br>
They will always appear above the modal, regardless of stacking order.
</span>
</div>
`,
menuOptions: [
{ name: 'Cancel', action: async (modal) => modal.destroy() },