@domternal/angular 0.2.0

package/dist/fesm2022/domternal-angular.mjs

@@ -0,0 +1,1572 @@
+import * as i0 from '@angular/core';
+import { viewChild, input, output, signal, inject, NgZone, afterNextRender, effect, untracked, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, computed } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Document, Paragraph, Text, BaseKeymap, History, Editor, positionFloatingOnce, defaultIcons, ToolbarController, PluginKey, createBubbleMenuPlugin, createFloatingMenuPlugin } from '@domternal/core';
+export { Editor } from '@domternal/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+const DEFAULT_EXTENSIONS = [Document, Paragraph, Text, BaseKeymap, History];
+class DomternalEditorComponent {
+    // === Template ref ===
+    editorRef = viewChild.required('editorRef');
+    // === Inputs ===
+    extensions = input([], ...(ngDevMode ? [{ debugName: "extensions" }] : /* istanbul ignore next */ []));
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
+    outputFormat = input('html', ...(ngDevMode ? [{ debugName: "outputFormat" }] : /* istanbul ignore next */ []));
+    // === Outputs ===
+    editorCreated = output();
+    contentUpdated = output();
+    selectionChanged = output();
+    focusChanged = output();
+    blurChanged = output();
+    editorDestroyed = output();
+    // === Signals (read-only public state) ===
+    _htmlContent = signal('', ...(ngDevMode ? [{ debugName: "_htmlContent" }] : /* istanbul ignore next */ []));
+    _jsonContent = signal(null, ...(ngDevMode ? [{ debugName: "_jsonContent" }] : /* istanbul ignore next */ []));
+    _isEmpty = signal(true, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
+    _isFocused = signal(false, ...(ngDevMode ? [{ debugName: "_isFocused" }] : /* istanbul ignore next */ []));
+    // Candidate for linkedSignal(editable) once min Angular version is >=20
+    _isEditable = signal(true, ...(ngDevMode ? [{ debugName: "_isEditable" }] : /* istanbul ignore next */ []));
+    htmlContent = this._htmlContent.asReadonly();
+    jsonContent = this._jsonContent.asReadonly();
+    isEmpty = this._isEmpty.asReadonly();
+    isFocused = this._isFocused.asReadonly();
+    isEditable = this._isEditable.asReadonly();
+    // === Editor instance ===
+    _editor = null;
+    get editor() {
+        return this._editor;
+    }
+    // === ControlValueAccessor ===
+    onChange = () => { };
+    onTouched = () => { };
+    _pendingContent = null;
+    ngZone = inject(NgZone);
+    constructor() {
+        afterNextRender(() => {
+            this.createEditor();
+        });
+        // React to editable input changes
+        effect(() => {
+            const editable = this.editable();
+            if (!this._editor || this._editor.isDestroyed)
+                return;
+            untracked(() => {
+                this._editor.setEditable(editable);
+                this._isEditable.set(editable);
+            });
+        });
+        // React to content input changes
+        effect(() => {
+            const content = this.content();
+            const format = this.outputFormat();
+            if (!this._editor || this._editor.isDestroyed)
+                return;
+            untracked(() => {
+                const current = format === 'html'
+                    ? this._editor.getHTML()
+                    : JSON.stringify(this._editor.getJSON());
+                const incoming = format === 'html'
+                    ? content
+                    : JSON.stringify(content);
+                if (incoming !== current) {
+                    this._editor.setContent(content, false);
+                }
+            });
+        });
+        // React to extensions input changes
+        effect(() => {
+            this.extensions(); // track the signal
+            if (!this._editor || this._editor.isDestroyed)
+                return;
+            untracked(() => {
+                this.recreateEditor();
+            });
+        });
+    }
+    // === Lifecycle ===
+    ngOnDestroy() {
+        if (this._editor && !this._editor.isDestroyed) {
+            this._editor.destroy();
+            this.editorDestroyed.emit();
+        }
+        this._editor = null;
+    }
+    // === ControlValueAccessor implementation ===
+    writeValue(value) {
+        if (!this._editor || this._editor.isDestroyed) {
+            this._pendingContent = value;
+            return;
+        }
+        // Compare current content to avoid unnecessary setContent (which resets cursor)
+        if (this.outputFormat() === 'html') {
+            if (value === this._editor.getHTML())
+                return;
+        }
+        else {
+            if (JSON.stringify(value) === JSON.stringify(this._editor.getJSON()))
+                return;
+        }
+        this._editor.setContent(value, false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._isEditable.set(!isDisabled);
+        if (this._editor && !this._editor.isDestroyed) {
+            this._editor.setEditable(!isDisabled);
+        }
+    }
+    // === Private ===
+    recreateEditor() {
+        if (!this._editor || this._editor.isDestroyed)
+            return;
+        const currentContent = this._editor.getJSON();
+        this._editor.destroy();
+        this.editorDestroyed.emit();
+        this._pendingContent = currentContent;
+        this.createEditor();
+    }
+    createEditor() {
+        const initialContent = this._pendingContent ?? this.content();
+        this._pendingContent = null;
+        this._editor = new Editor({
+            element: this.editorRef().nativeElement,
+            extensions: [...DEFAULT_EXTENSIONS, ...this.extensions()],
+            content: initialContent,
+            editable: this.editable(),
+            autofocus: this.autofocus(),
+        });
+        this._isEditable.set(this.editable());
+        // Set initial signal values
+        this._htmlContent.set(this._editor.getHTML());
+        this._jsonContent.set(this._editor.getJSON());
+        this._isEmpty.set(this._editor.isEmpty);
+        this._editor.on('transaction', ({ transaction }) => {
+            this.ngZone.run(() => {
+                const ed = this._editor;
+                if (transaction.docChanged) {
+                    const html = ed.getHTML();
+                    this._htmlContent.set(html);
+                    this._jsonContent.set(ed.getJSON());
+                    this._isEmpty.set(ed.isEmpty);
+                    this.contentUpdated.emit({ editor: ed });
+                    const value = this.outputFormat() === 'html' ? html : ed.getJSON();
+                    this.onChange(value);
+                }
+                if (!transaction.docChanged && transaction.selectionSet) {
+                    this.selectionChanged.emit({ editor: ed });
+                }
+            });
+        });
+        this._editor.on('focus', ({ event }) => {
+            this.ngZone.run(() => {
+                this._isFocused.set(true);
+                this.focusChanged.emit({ editor: this._editor, event });
+            });
+        });
+        this._editor.on('blur', ({ event }) => {
+            this.ngZone.run(() => {
+                this._isFocused.set(false);
+                this.blurChanged.emit({ editor: this._editor, event });
+                this.onTouched();
+            });
+        });
+        // Emit editor created
+        this.ngZone.run(() => {
+            this.editorCreated.emit(this._editor);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: DomternalEditorComponent, isStandalone: true, selector: "domternal-editor", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", contentUpdated: "contentUpdated", selectionChanged: "selectionChanged", focusChanged: "focusChanged", blurChanged: "blurChanged", editorDestroyed: "editorDestroyed" }, host: { classAttribute: "dm-editor" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DomternalEditorComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editorRef"], descendants: true, isSignal: true }], ngImport: i0, template: '<div #editorRef></div>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'domternal-editor', template: '<div #editorRef></div>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'dm-editor' }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DomternalEditorComponent),
+                            multi: true,
+                        },
+                    ], styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editorRef: [{ type: i0.ViewChild, args: ['editorRef', { isSignal: true }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: false }] }], editorCreated: [{ type: i0.Output, args: ["editorCreated"] }], contentUpdated: [{ type: i0.Output, args: ["contentUpdated"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], focusChanged: [{ type: i0.Output, args: ["focusChanged"] }], blurChanged: [{ type: i0.Output, args: ["blurChanged"] }], editorDestroyed: [{ type: i0.Output, args: ["editorDestroyed"] }] } });
+
+const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+class DomternalToolbarComponent {
+    editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    icons = input(null, ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
+    layout = input(...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Exposed state signals for template */
+    groups = signal([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    openDropdown = signal(null, ...(ngDevMode ? [{ debugName: "openDropdown" }] : /* istanbul ignore next */ []));
+    /** Bumped on active state changes to trigger re-evaluation of isActive() */
+    activeVersion = signal(0, ...(ngDevMode ? [{ debugName: "activeVersion" }] : /* istanbul ignore next */ []));
+    controller = null;
+    clickOutsideHandler = null;
+    dismissOverlayHandler = null;
+    editorEl = null;
+    cleanupFloating = null;
+    ngZone = inject(NgZone);
+    elRef = inject(ElementRef);
+    sanitizer = inject(DomSanitizer);
+    /** SafeHtml cache — same reference returned for same key, prevents DOM churn */
+    htmlCache = new Map();
+    dropdownCaret = '<svg class="dm-dropdown-caret" width="10" height="10" viewBox="0 0 10 10"><path d="M2 4l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+    constructor() {
+        effect(() => {
+            const editor = this.editor();
+            untracked(() => this.setupController(editor));
+        });
+    }
+    ngOnDestroy() {
+        this.destroyController();
+    }
+    // === Template helpers ===
+    isActive(name) {
+        this.activeVersion(); // subscribe to changes
+        return this.controller?.activeMap.get(name) ?? false;
+    }
+    isDisabled(name) {
+        this.activeVersion(); // subscribe to changes
+        return this.controller?.disabledMap.get(name) ?? false;
+    }
+    isDropdownActive(dropdown) {
+        if (dropdown.layout === 'grid')
+            return false; // color dropdowns use bar indicator instead
+        if (dropdown.dynamicLabel)
+            return false; // label text already communicates state
+        this.activeVersion(); // subscribe to changes
+        return dropdown.items.some((item) => this.controller?.activeMap.get(item.name) ?? false);
+    }
+    /** Returns trigger innerHTML: dynamic icon + caret (+ color indicator for grid dropdowns). */
+    getDropdownTriggerHtml(dropdown) {
+        this.activeVersion(); // subscribe to changes
+        const activeItem = dropdown.items.find((item) => this.controller?.activeMap.get(item.name));
+        if (dropdown.layout === 'grid') {
+            const color = activeItem?.color ?? dropdown.defaultIndicatorColor ?? null;
+            const key = `tr:${dropdown.icon}:${color ?? ''}`;
+            let cached = this.htmlCache.get(key);
+            if (!cached) {
+                let html = this.resolveIconSvg(dropdown.icon) + this.dropdownCaret;
+                if (color) {
+                    html += `<span class="dm-toolbar-color-indicator" style="background-color: ${color}"></span>`;
+                }
+                cached = this.sanitizer.bypassSecurityTrustHtml(html);
+                this.htmlCache.set(key, cached);
+            }
+            return cached;
+        }
+        // Non-grid dropdown — show active sub-item's label as text
+        if (dropdown.dynamicLabel) {
+            if (activeItem)
+                return this.getCachedTriggerLabel(activeItem.label);
+            // Try reading CSS property from DOM (inline or computed depending on property)
+            if (dropdown.computedStyleProperty) {
+                let computed;
+                if (dropdown.computedStyleProperty === 'font-family') {
+                    // Font-family: read ONLY inline style (explicit mark), not computed (browser default)
+                    computed = this.getInlineStyleAtCursor(dropdown.computedStyleProperty);
+                    if (computed) {
+                        const first = computed.split(',')[0]?.replace(/['"]+/g, '').trim();
+                        computed = first || null;
+                    }
+                }
+                else {
+                    computed = this.getComputedStyleAtCursor(dropdown.computedStyleProperty);
+                }
+                if (computed)
+                    return this.getCachedTriggerLabel(computed);
+            }
+            if (dropdown.dynamicLabelFallback) {
+                return this.getCachedTriggerLabel(dropdown.dynamicLabelFallback);
+            }
+            return this.getCachedTriggerLabel(dropdown.icon, true);
+        }
+        const icon = dropdown.dynamicIcon && activeItem ? activeItem.icon : dropdown.icon;
+        return this.getCachedTriggerIcon(icon);
+    }
+    /**
+     * Returns 'true' when an emitEvent button's panel is open, null otherwise.
+     * Maps to [attr.aria-expanded] — null removes the attribute entirely.
+     */
+    getAriaExpanded(item) {
+        if (!item.emitEvent)
+            return null;
+        this.activeVersion(); // subscribe to changes
+        return this.controller?.expandedMap.get(item.name) ? 'true' : null;
+    }
+    getFlatIndex(name) {
+        return this.controller?.getFlatIndex(name) ?? -1;
+    }
+    getTooltip(item) {
+        if (item.shortcut) {
+            const parts = item.shortcut.split('-');
+            const mapped = parts.map(p => {
+                if (p === 'Mod')
+                    return isMac ? '\u2318' : 'Ctrl';
+                if (p === 'Shift')
+                    return isMac ? '\u21E7' : 'Shift';
+                if (p === 'Alt')
+                    return isMac ? '\u2325' : 'Alt';
+                return p.toUpperCase();
+            });
+            const shortcut = isMac ? mapped.join('') : mapped.join('+');
+            return `${item.label} (${shortcut})`;
+        }
+        return item.label;
+    }
+    getCachedIcon(name) {
+        const key = `i:${name}`;
+        let cached = this.htmlCache.get(key);
+        if (!cached) {
+            cached = this.sanitizer.bypassSecurityTrustHtml(this.resolveIconSvg(name));
+            this.htmlCache.set(key, cached);
+        }
+        return cached;
+    }
+    getCachedTriggerLabel(label, isIcon) {
+        const key = `tl:${label}`;
+        let cached = this.htmlCache.get(key);
+        if (!cached) {
+            const content = isIcon ? this.resolveIconSvg(label) : label;
+            cached = this.sanitizer.bypassSecurityTrustHtml(`<span class="dm-toolbar-trigger-label">${content}</span>` + this.dropdownCaret);
+            this.htmlCache.set(key, cached);
+        }
+        return cached;
+    }
+    getCachedTriggerIcon(iconName) {
+        const key = `t:${iconName}`;
+        let cached = this.htmlCache.get(key);
+        if (!cached) {
+            cached = this.sanitizer.bypassSecurityTrustHtml(this.resolveIconSvg(iconName) + this.dropdownCaret);
+            this.htmlCache.set(key, cached);
+        }
+        return cached;
+    }
+    getCachedItemContent(iconName, label, displayMode) {
+        const mode = displayMode ?? 'icon-text';
+        const key = `dc:${iconName}:${label}:${mode}`;
+        let cached = this.htmlCache.get(key);
+        if (!cached) {
+            let html;
+            if (mode === 'text') {
+                html = label;
+            }
+            else if (mode === 'icon') {
+                html = this.resolveIconSvg(iconName);
+            }
+            else {
+                html = this.resolveIconSvg(iconName) + ' ' + label;
+            }
+            cached = this.sanitizer.bypassSecurityTrustHtml(html);
+            this.htmlCache.set(key, cached);
+        }
+        return cached;
+    }
+    asButton(item) {
+        return item;
+    }
+    asDropdown(item) {
+        return item;
+    }
+    getGridStyle(dropdown) {
+        return `--dm-palette-columns: ${String(dropdown.gridColumns ?? 10)}`;
+    }
+    // === Event handlers ===
+    onButtonClick(item, event) {
+        // Close any open dropdown when clicking a regular button
+        if (this.openDropdown()) {
+            this.cleanupFloating?.();
+            this.cleanupFloating = null;
+            this.controller?.closeDropdown();
+            this.syncState();
+        }
+        if (item.emitEvent) {
+            const anchor = event?.currentTarget;
+            // emitEvent is a dynamic string; cast needed to bypass strict EventEmitter<EditorEvents> typing
+            this.editor().emit(item.emitEvent, { anchorElement: anchor });
+            return;
+        }
+        this.controller?.executeCommand(item);
+    }
+    onDropdownToggle(dropdown) {
+        this.cleanupFloating?.();
+        this.cleanupFloating = null;
+        this.controller?.toggleDropdown(dropdown.name);
+        this.syncState();
+        // Position the panel after Angular renders it (tracks resize, not scroll)
+        if (this.openDropdown()) {
+            requestAnimationFrame(() => {
+                const trigger = this.elRef.nativeElement.querySelector(`[aria-expanded="true"]`);
+                const panel = trigger?.parentElement?.querySelector('.dm-toolbar-dropdown-panel');
+                if (trigger && panel) {
+                    // List dropdowns align to trigger's left edge; grid/picker dropdowns center
+                    const placement = dropdown.layout === 'grid' ? 'bottom' : 'bottom-start';
+                    this.cleanupFloating = positionFloatingOnce(trigger, panel, {
+                        placement,
+                        offsetValue: 4,
+                    });
+                }
+            });
+        }
+    }
+    onDropdownItemClick(item, event) {
+        // For emitEvent items, use the dropdown trigger as anchor (sub-item gets removed when dropdown closes)
+        let anchor;
+        if (item.emitEvent && event?.currentTarget) {
+            const wrapper = event.currentTarget.closest('.dm-toolbar-dropdown-wrapper');
+            anchor = wrapper?.querySelector('.dm-toolbar-dropdown-trigger');
+        }
+        this.cleanupFloating?.();
+        this.cleanupFloating = null;
+        this.controller?.closeDropdown();
+        if (item.emitEvent) {
+            this.editor().emit(item.emitEvent, { anchorElement: anchor });
+        }
+        else {
+            this.controller?.executeCommand(item);
+        }
+    }
+    onButtonFocus(name) {
+        const index = this.controller?.getFlatIndex(name) ?? -1;
+        if (index >= 0) {
+            this.controller?.setFocusedIndex(index);
+        }
+    }
+    onKeydown(event) {
+        if (!this.controller)
+            return;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                this.controller.navigateNext();
+                this.focusCurrentButton();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.controller.navigatePrev();
+                this.focusCurrentButton();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.controller.navigateFirst();
+                this.focusCurrentButton();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.controller.navigateLast();
+                this.focusCurrentButton();
+                break;
+            case 'Escape':
+                if (this.openDropdown()) {
+                    event.preventDefault();
+                    this.cleanupFloating?.();
+                    this.cleanupFloating = null;
+                    this.controller.closeDropdown();
+                    this.syncState();
+                    this.focusCurrentButton();
+                }
+                break;
+        }
+    }
+    // === Private ===
+    resolveIconSvg(name) {
+        const customIcons = this.icons();
+        if (customIcons) {
+            return customIcons[name] ?? '';
+        }
+        return defaultIcons[name] ?? '';
+    }
+    setupController(editor) {
+        this.destroyController();
+        this.controller = new ToolbarController(editor, () => this.ngZone.run(() => this.syncState()), this.layout());
+        this.controller.subscribe();
+        this.syncState();
+        // Click outside to close dropdown
+        this.clickOutsideHandler = (e) => {
+            if (this.openDropdown() && !this.elRef.nativeElement.contains(e.target)) {
+                this.cleanupFloating?.();
+                this.cleanupFloating = null;
+                this.controller?.closeDropdown();
+                this.ngZone.run(() => this.syncState());
+            }
+        };
+        document.addEventListener('mousedown', this.clickOutsideHandler);
+        // Listen for dismiss-overlays (e.g. table handle clicks that stopPropagation on mousedown)
+        this.editorEl = editor.view.dom.closest('.dm-editor');
+        if (this.editorEl) {
+            this.dismissOverlayHandler = () => {
+                if (this.openDropdown()) {
+                    this.cleanupFloating?.();
+                    this.cleanupFloating = null;
+                    this.controller?.closeDropdown();
+                    this.ngZone.run(() => this.syncState());
+                }
+            };
+            this.editorEl.addEventListener('dm:dismiss-overlays', this.dismissOverlayHandler);
+        }
+    }
+    destroyController() {
+        this.cleanupFloating?.();
+        this.cleanupFloating = null;
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('mousedown', this.clickOutsideHandler);
+            this.clickOutsideHandler = null;
+        }
+        if (this.dismissOverlayHandler && this.editorEl) {
+            this.editorEl.removeEventListener('dm:dismiss-overlays', this.dismissOverlayHandler);
+            this.dismissOverlayHandler = null;
+            this.editorEl = null;
+        }
+        if (this.controller) {
+            this.controller.destroy();
+            this.controller = null;
+        }
+    }
+    syncState() {
+        if (!this.controller)
+            return;
+        // Only update groups if they actually changed (initial build or rebuild)
+        const controllerGroups = this.controller.groups;
+        if (this.groups().length !== controllerGroups.length) {
+            this.groups.set(controllerGroups);
+        }
+        this.focusedIndex.set(this.controller.focusedIndex);
+        this.openDropdown.set(this.controller.openDropdown);
+        // Bump version to trigger isActive() re-evaluation without creating new objects
+        this.activeVersion.update(v => v + 1);
+    }
+    getComputedStyleAtCursor(prop) {
+        try {
+            const { from } = this.editor().state.selection;
+            const resolved = this.editor().view.domAtPos(from);
+            const el = resolved.node instanceof HTMLElement
+                ? resolved.node
+                : resolved.node.parentElement;
+            if (!el)
+                return null;
+            // Prefer inline style (explicit mark) over computed style (inherited from heading, etc.)
+            return el.style.getPropertyValue(prop)
+                || window.getComputedStyle(el).getPropertyValue(prop)
+                || null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /** Read only inline style — no computed fallback (used for font-family). */
+    getInlineStyleAtCursor(prop) {
+        try {
+            const { from } = this.editor().state.selection;
+            const resolved = this.editor().view.domAtPos(from);
+            const el = resolved.node instanceof HTMLElement
+                ? resolved.node
+                : resolved.node.parentElement;
+            if (!el)
+                return null;
+            return el.style.getPropertyValue(prop) || null;
+        }
+        catch {
+            return null;
+        }
+    }
+    focusCurrentButton() {
+        const idx = this.controller?.focusedIndex ?? 0;
+        const buttons = this.elRef.nativeElement.querySelectorAll('.dm-toolbar-button');
+        buttons[idx]?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalToolbarComponent, isStandalone: true, selector: "domternal-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "\"Editor formatting\"" }, classAttribute: "dm-toolbar" }, ngImport: i0, template: `
+    @for (group of groups(); track group.name; let gi = $index) {
+      @if (gi > 0) {
+        <div class="dm-toolbar-separator" role="separator"></div>
+      }
+      <div class="dm-toolbar-group" role="group" [attr.aria-label]="group.name || 'Tools'">
+        @for (item of group.items; track item.name) {
+          @if (item.type === 'button') {
+            <button
+              type="button"
+              class="dm-toolbar-button"
+              [class.dm-toolbar-button--active]="isActive(item.name)"
+              [attr.aria-pressed]="isActive(item.name)"
+              [attr.aria-expanded]="getAriaExpanded(asButton(item))"
+              [attr.aria-label]="asButton(item).label"
+              [title]="getTooltip(asButton(item))"
+              [tabindex]="getFlatIndex(item.name) === focusedIndex() ? 0 : -1"
+              [disabled]="isDisabled(item.name)"
+              [innerHTML]="getCachedIcon(asButton(item).icon)"
+              (mousedown)="$event.preventDefault()"
+              (click)="onButtonClick(asButton(item), $event)"
+              (focus)="onButtonFocus(item.name)"
+            ></button>
+          }
+          @if (item.type === 'dropdown') {
+            <div class="dm-toolbar-dropdown-wrapper">
+              <button
+                type="button"
+                class="dm-toolbar-button dm-toolbar-dropdown-trigger"
+                [class.dm-toolbar-button--active]="isDropdownActive(asDropdown(item))"
+                [attr.aria-expanded]="openDropdown() === asDropdown(item).name"
+                [attr.aria-haspopup]="'true'"
+                [attr.aria-label]="asDropdown(item).label"
+                [title]="asDropdown(item).label"
+                [tabindex]="getFlatIndex(item.name) === focusedIndex() ? 0 : -1"
+                [disabled]="isDisabled(asDropdown(item).name)"
+                [attr.data-dropdown]="asDropdown(item).name"
+                [innerHTML]="getDropdownTriggerHtml(asDropdown(item))"
+                (mousedown)="$event.preventDefault()"
+                (click)="onDropdownToggle(asDropdown(item))"
+                (focus)="onButtonFocus(item.name)"
+              ></button>
+              @if (openDropdown() === asDropdown(item).name) {
+                @if (asDropdown(item).layout === 'grid') {
+                  <div class="dm-toolbar-dropdown-panel dm-color-palette" role="menu"
+                       [attr.style]="getGridStyle(asDropdown(item))">
+                    @for (sub of asDropdown(item).items; track sub.name) {
+                      @if (sub.color) {
+                        <button
+                          type="button"
+                          class="dm-color-swatch"
+                          [class.dm-color-swatch--active]="isActive(sub.name)"
+                          role="menuitem"
+                          [attr.aria-label]="sub.label"
+                          [title]="sub.label"
+                          [style.background-color]="sub.color"
+                          (mousedown)="$event.preventDefault()"
+                          (click)="onDropdownItemClick(sub)"
+                        ></button>
+                      } @else {
+                        <button
+                          type="button"
+                          class="dm-color-palette-reset"
+                          role="menuitem"
+                          [attr.aria-label]="sub.label"
+                          [innerHTML]="getCachedItemContent(sub.icon, sub.label)"
+                          (mousedown)="$event.preventDefault()"
+                          (click)="onDropdownItemClick(sub)"
+                        ></button>
+                      }
+                    }
+                  </div>
+                } @else {
+                  <div class="dm-toolbar-dropdown-panel" role="menu"
+                       [attr.data-display-mode]="asDropdown(item).displayMode ?? null">
+                    @for (sub of asDropdown(item).items; track sub.name) {
+                      <button
+                        type="button"
+                        class="dm-toolbar-dropdown-item"
+                        [class.dm-toolbar-dropdown-item--active]="isActive(sub.name)"
+                        role="menuitem"
+                        [attr.aria-label]="sub.label"
+                        [attr.style]="sub.style ?? null"
+                        [innerHTML]="getCachedItemContent(sub.icon, sub.label, asDropdown(item).displayMode)"
+                        (mousedown)="$event.preventDefault()"
+                        (click)="onDropdownItemClick(sub, $event)"
+                      ></button>
+                    }
+                  </div>
+                }
+              }
+            </div>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'domternal-toolbar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'class': 'dm-toolbar',
+                        'role': 'toolbar',
+                        '[attr.aria-label]': '"Editor formatting"',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    template: `
+    @for (group of groups(); track group.name; let gi = $index) {
+      @if (gi > 0) {
+        <div class="dm-toolbar-separator" role="separator"></div>
+      }
+      <div class="dm-toolbar-group" role="group" [attr.aria-label]="group.name || 'Tools'">
+        @for (item of group.items; track item.name) {
+          @if (item.type === 'button') {
+            <button
+              type="button"
+              class="dm-toolbar-button"
+              [class.dm-toolbar-button--active]="isActive(item.name)"
+              [attr.aria-pressed]="isActive(item.name)"
+              [attr.aria-expanded]="getAriaExpanded(asButton(item))"
+              [attr.aria-label]="asButton(item).label"
+              [title]="getTooltip(asButton(item))"
+              [tabindex]="getFlatIndex(item.name) === focusedIndex() ? 0 : -1"
+              [disabled]="isDisabled(item.name)"
+              [innerHTML]="getCachedIcon(asButton(item).icon)"
+              (mousedown)="$event.preventDefault()"
+              (click)="onButtonClick(asButton(item), $event)"
+              (focus)="onButtonFocus(item.name)"
+            ></button>
+          }
+          @if (item.type === 'dropdown') {
+            <div class="dm-toolbar-dropdown-wrapper">
+              <button
+                type="button"
+                class="dm-toolbar-button dm-toolbar-dropdown-trigger"
+                [class.dm-toolbar-button--active]="isDropdownActive(asDropdown(item))"
+                [attr.aria-expanded]="openDropdown() === asDropdown(item).name"
+                [attr.aria-haspopup]="'true'"
+                [attr.aria-label]="asDropdown(item).label"
+                [title]="asDropdown(item).label"
+                [tabindex]="getFlatIndex(item.name) === focusedIndex() ? 0 : -1"
+                [disabled]="isDisabled(asDropdown(item).name)"
+                [attr.data-dropdown]="asDropdown(item).name"
+                [innerHTML]="getDropdownTriggerHtml(asDropdown(item))"
+                (mousedown)="$event.preventDefault()"
+                (click)="onDropdownToggle(asDropdown(item))"
+                (focus)="onButtonFocus(item.name)"
+              ></button>
+              @if (openDropdown() === asDropdown(item).name) {
+                @if (asDropdown(item).layout === 'grid') {
+                  <div class="dm-toolbar-dropdown-panel dm-color-palette" role="menu"
+                       [attr.style]="getGridStyle(asDropdown(item))">
+                    @for (sub of asDropdown(item).items; track sub.name) {
+                      @if (sub.color) {
+                        <button
+                          type="button"
+                          class="dm-color-swatch"
+                          [class.dm-color-swatch--active]="isActive(sub.name)"
+                          role="menuitem"
+                          [attr.aria-label]="sub.label"
+                          [title]="sub.label"
+                          [style.background-color]="sub.color"
+                          (mousedown)="$event.preventDefault()"
+                          (click)="onDropdownItemClick(sub)"
+                        ></button>
+                      } @else {
+                        <button
+                          type="button"
+                          class="dm-color-palette-reset"
+                          role="menuitem"
+                          [attr.aria-label]="sub.label"
+                          [innerHTML]="getCachedItemContent(sub.icon, sub.label)"
+                          (mousedown)="$event.preventDefault()"
+                          (click)="onDropdownItemClick(sub)"
+                        ></button>
+                      }
+                    }
+                  </div>
+                } @else {
+                  <div class="dm-toolbar-dropdown-panel" role="menu"
+                       [attr.data-display-mode]="asDropdown(item).displayMode ?? null">
+                    @for (sub of asDropdown(item).items; track sub.name) {
+                      <button
+                        type="button"
+                        class="dm-toolbar-dropdown-item"
+                        [class.dm-toolbar-dropdown-item--active]="isActive(sub.name)"
+                        role="menuitem"
+                        [attr.aria-label]="sub.label"
+                        [attr.style]="sub.style ?? null"
+                        [innerHTML]="getCachedItemContent(sub.icon, sub.label, asDropdown(item).displayMode)"
+                        (mousedown)="$event.preventDefault()"
+                        (click)="onDropdownItemClick(sub, $event)"
+                      ></button>
+                    }
+                  </div>
+                }
+              }
+            </div>
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
+
+/** Check if a resolved position is inside a table cell or header. */
+function isInsideTableCell($pos) {
+    for (let d = $pos.depth; d > 0; d--) {
+        const name = $pos.node(d).type.name;
+        if (name === 'tableCell' || name === 'tableHeader')
+            return true;
+    }
+    return false;
+}
+class DomternalBubbleMenuComponent {
+    editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    shouldShow = input(...(ngDevMode ? [undefined, { debugName: "shouldShow" }] : /* istanbul ignore next */ []));
+    placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    updateDelay = input(0, ...(ngDevMode ? [{ debugName: "updateDelay" }] : /* istanbul ignore next */ []));
+    /** Fixed item names (e.g. ['bold', 'italic', 'code']). Omit for auto mode (all format items). */
+    items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Context-aware: map context names to item arrays, `true` for all valid items, or `null` to disable */
+    contexts = input(...(ngDevMode ? [undefined, { debugName: "contexts" }] : /* istanbul ignore next */ []));
+    /** Internal — updated on transactions. Not meant to be set from outside. */
+    resolvedItems = signal([], ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    menuEl = viewChild.required('menuEl');
+    pluginKey;
+    sanitizer = inject(DomSanitizer);
+    ngZone = inject(NgZone);
+    activeVersion = signal(0, ...(ngDevMode ? [{ debugName: "activeVersion" }] : /* istanbul ignore next */ []));
+    itemMap = new Map();
+    activeMap = new Map();
+    disabledMap = new Map();
+    htmlCache = new Map();
+    bubbleDefaults = new Map();
+    transactionHandler = null;
+    constructor() {
+        this.pluginKey = new PluginKey('angularBubbleMenu-' + Math.random().toString(36).slice(2, 8));
+        afterNextRender(() => {
+            const editor = this.editor();
+            const ctxs = this.contexts();
+            let shouldShowFn = this.shouldShow();
+            if (!shouldShowFn) {
+                if (ctxs) {
+                    shouldShowFn = ({ state }) => {
+                        const context = this.detectContext(state.selection, ctxs);
+                        if (!context)
+                            return false;
+                        if (context in ctxs) {
+                            const val = ctxs[context];
+                            if (val === null)
+                                return false;
+                            return val === true || (Array.isArray(val) && val.length > 0);
+                        }
+                        return this.bubbleDefaults.has(context);
+                    };
+                }
+                else {
+                    // Auto/items mode: show when any endpoint's parent allows marks
+                    shouldShowFn = ({ state }) => {
+                        if (state.selection.empty || state.selection.node)
+                            return false;
+                        if (isInsideTableCell(state.selection.$from))
+                            return false;
+                        return state.selection.$from.parent.type.spec.marks !== ''
+                            || state.selection.$to.parent.type.spec.marks !== '';
+                    };
+                }
+            }
+            const plugin = createBubbleMenuPlugin({
+                pluginKey: this.pluginKey,
+                editor,
+                element: this.menuEl().nativeElement,
+                shouldShow: shouldShowFn,
+                placement: this.placement(),
+                offset: this.offset(),
+                updateDelay: this.updateDelay(),
+            });
+            editor.registerPlugin(plugin);
+            this.setupItemTracking(editor);
+        });
+    }
+    ngOnDestroy() {
+        const editor = this.editor();
+        if (this.transactionHandler) {
+            editor.off('transaction', this.transactionHandler);
+        }
+        if (!editor.isDestroyed) {
+            editor.unregisterPlugin(this.pluginKey);
+        }
+    }
+    // === Template helpers ===
+    isItemActive(item) {
+        this.activeVersion();
+        return this.activeMap.get(item.name) ?? false;
+    }
+    isItemDisabled(item) {
+        this.activeVersion();
+        return this.disabledMap.get(item.name) ?? false;
+    }
+    getCachedIcon(name) {
+        let cached = this.htmlCache.get(name);
+        if (!cached) {
+            cached = this.sanitizer.bypassSecurityTrustHtml(defaultIcons[name] ?? '');
+            this.htmlCache.set(name, cached);
+        }
+        return cached;
+    }
+    executeCommand(item) {
+        if (item.emitEvent) {
+            // emitEvent is a dynamic string; cast needed to bypass strict EventEmitter<EditorEvents> typing
+            this.editor().emit(item.emitEvent, {});
+            return;
+        }
+        ToolbarController.executeItem(this.editor(), item);
+    }
+    // === Internal ===
+    buildItemMap(editor) {
+        this.itemMap.clear();
+        for (const item of editor.toolbarItems) {
+            if (item.type === 'button') {
+                this.itemMap.set(item.name, item);
+            }
+            else if (item.type === 'dropdown') {
+                for (const sub of item.items) {
+                    this.itemMap.set(sub.name, sub);
+                }
+            }
+        }
+    }
+    resolveNames(names) {
+        const result = [];
+        let sepIdx = 0;
+        for (const name of names) {
+            if (name === '|') {
+                result.push({ type: 'separator', name: `sep-${sepIdx++}` });
+            }
+            else {
+                const item = this.itemMap.get(name);
+                if (item)
+                    result.push(item);
+            }
+        }
+        return result;
+    }
+    getFormatItems() {
+        return Array.from(this.itemMap.values())
+            .filter(item => item.group === 'format')
+            .sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
+    }
+    detectContext(selection, ctxs) {
+        // CellSelection (duck-type: has $anchorCell) — never show bubble menu
+        if ('$anchorCell' in selection)
+            return null;
+        if (selection.node)
+            return selection.node.type.name;
+        if (selection.empty)
+            return null;
+        // TextSelection inside a table cell → 'table' context.
+        // Cross-cell TextSelection (drag across cells) → hide bubble menu.
+        const fromCell = this.findCellNode(selection.$from);
+        if (fromCell) {
+            const toCell = this.findCellNode(selection.$to);
+            if (toCell && fromCell !== toCell)
+                return null;
+            return 'table';
+        }
+        const fromName = selection.$from.parent.type.name;
+        if (fromName in ctxs)
+            return fromName;
+        if ('text' in ctxs && selection.$from.parent.type.spec.marks !== '')
+            return 'text';
+        // Cross-block: also check $to so bold/italic is offered when any endpoint allows marks
+        const toName = selection.$to.parent.type.name;
+        if (toName in ctxs)
+            return toName;
+        if ('text' in ctxs && selection.$to.parent.type.spec.marks !== '')
+            return 'text';
+        return null;
+    }
+    findCellNode(pos) {
+        for (let d = pos.depth; d > 0; d--) {
+            const node = pos.node(d);
+            if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
+                return node;
+            }
+        }
+        return null;
+    }
+    /** Filters out mark items that the context node type doesn't allow (e.g. bold on codeBlock) */
+    filterBySchema(editor, contextName, items) {
+        if (contextName === 'text' || contextName === 'table')
+            return items;
+        const schema = editor.state.schema;
+        if (!schema)
+            return items;
+        const nodeType = schema.nodes[contextName];
+        if (!nodeType)
+            return items;
+        return items.filter(item => {
+            const markName = typeof item.isActive === 'string' ? item.isActive : null;
+            if (!markName)
+                return true;
+            const markType = schema.marks?.[markName];
+            if (!markType)
+                return true;
+            return nodeType.allowsMarkType(markType);
+        });
+    }
+    buildBubbleDefaults(editor) {
+        this.bubbleDefaults.clear();
+        const byCtx = new Map();
+        const addItem = (btn) => {
+            const ctx = btn['bubbleMenu'];
+            if (!ctx)
+                return;
+            let arr = byCtx.get(ctx);
+            if (!arr) {
+                arr = [];
+                byCtx.set(ctx, arr);
+            }
+            arr.push(btn);
+        };
+        for (const item of editor.toolbarItems) {
+            if (item.type === 'button')
+                addItem(item);
+            else if (item.type === 'dropdown') {
+                for (const sub of item.items)
+                    addItem(sub);
+            }
+        }
+        for (const [ctx, items] of byCtx) {
+            items.sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
+            const result = [];
+            let lastGroup;
+            let sepIdx = 0;
+            for (const item of items) {
+                if (lastGroup !== undefined && item.group !== lastGroup) {
+                    result.push({ type: 'separator', name: `bsep-${sepIdx++}` });
+                }
+                result.push(item);
+                lastGroup = item.group;
+            }
+            this.bubbleDefaults.set(ctx, result);
+        }
+    }
+    setupItemTracking(editor) {
+        this.buildItemMap(editor);
+        this.buildBubbleDefaults(editor);
+        if (this.contexts()) {
+            this.updateContextItems(editor);
+        }
+        else if (this.items()) {
+            this.resolvedItems.set(this.resolveNames(this.items()));
+        }
+        else {
+            this.resolvedItems.set(this.resolveNames(['bold', 'italic', 'underline']));
+        }
+        this.transactionHandler = () => {
+            this.ngZone.run(() => {
+                if (this.contexts()) {
+                    this.updateContextItems(editor);
+                }
+                this.updateStates(editor);
+                this.activeVersion.update(v => v + 1);
+            });
+        };
+        editor.on('transaction', this.transactionHandler);
+        this.updateStates(editor);
+    }
+    updateContextItems(editor) {
+        const ctxs = this.contexts();
+        const ctx = this.detectContext(editor.state.selection, ctxs);
+        if (!ctx) {
+            this.resolvedItems.set([]);
+            return;
+        }
+        if (ctx in ctxs) {
+            const val = ctxs[ctx];
+            if (val === null || (Array.isArray(val) && val.length === 0)) {
+                this.resolvedItems.set([]);
+                return;
+            }
+            if (val === true) {
+                this.resolvedItems.set(this.filterBySchema(editor, ctx, this.getFormatItems()));
+            }
+            else if (Array.isArray(val)) {
+                const resolved = this.resolveNames(val);
+                const buttons = resolved.filter((i) => i.type !== 'separator');
+                const filtered = new Set(this.filterBySchema(editor, ctx, buttons).map(b => b.name));
+                this.resolvedItems.set(resolved.filter(i => i.type === 'separator' || filtered.has(i.name)));
+            }
+        }
+        else {
+            this.resolvedItems.set(this.bubbleDefaults.get(ctx) ?? []);
+        }
+    }
+    updateStates(editor) {
+        let canProxy = null;
+        try {
+            canProxy = editor.can();
+        }
+        catch { }
+        for (const item of this.resolvedItems()) {
+            if (item.type === 'separator')
+                continue;
+            this.activeMap.set(item.name, ToolbarController.resolveActive(editor, item));
+            try {
+                const canCmd = canProxy?.[item.command];
+                this.disabledMap.set(item.name, canCmd
+                    ? !(item.commandArgs?.length ? canCmd(...item.commandArgs) : canCmd())
+                    : false);
+            }
+            catch {
+                this.disabledMap.set(item.name, false);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalBubbleMenuComponent, isStandalone: true, selector: "domternal-bubble-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, shouldShow: { classPropertyName: "shouldShow", publicName: "shouldShow", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, updateDelay: { classPropertyName: "updateDelay", publicName: "updateDelay", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, contexts: { classPropertyName: "contexts", publicName: "contexts", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #menuEl class="dm-bubble-menu">
+      @for (item of resolvedItems(); track item.name) {
+        @if (item.type === 'separator') {
+          <span class="dm-toolbar-separator"></span>
+        } @else {
+          <button type="button" class="dm-toolbar-button"
+            [class.dm-toolbar-button--active]="isItemActive(item)"
+            [disabled]="isItemDisabled(item)"
+            [title]="item.label"
+            [innerHTML]="getCachedIcon(item.icon)"
+            (mousedown)="$event.preventDefault()"
+            (click)="executeCommand(item)"></button>
+        }
+      }
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'domternal-bubble-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div #menuEl class="dm-bubble-menu">
+      @for (item of resolvedItems(); track item.name) {
+        @if (item.type === 'separator') {
+          <span class="dm-toolbar-separator"></span>
+        } @else {
+          <button type="button" class="dm-toolbar-button"
+            [class.dm-toolbar-button--active]="isItemActive(item)"
+            [disabled]="isItemDisabled(item)"
+            [title]="item.label"
+            [innerHTML]="getCachedIcon(item.icon)"
+            (mousedown)="$event.preventDefault()"
+            (click)="executeCommand(item)"></button>
+        }
+      }
+      <ng-content />
+    </div>
+  `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], shouldShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldShow", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], updateDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateDelay", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], contexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "contexts", required: false }] }], menuEl: [{ type: i0.ViewChild, args: ['menuEl', { isSignal: true }] }] } });
+
+class DomternalFloatingMenuComponent {
+    editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    shouldShow = input(...(ngDevMode ? [undefined, { debugName: "shouldShow" }] : /* istanbul ignore next */ []));
+    offset = input(0, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    menuEl = viewChild.required('menuEl');
+    pluginKey;
+    constructor() {
+        // Unique key per instance — multiple floating menus on same page
+        this.pluginKey = new PluginKey('angularFloatingMenu-' + Math.random().toString(36).slice(2, 8));
+        afterNextRender(() => {
+            const shouldShow = this.shouldShow();
+            const plugin = createFloatingMenuPlugin({
+                pluginKey: this.pluginKey,
+                editor: this.editor(),
+                element: this.menuEl().nativeElement,
+                ...(shouldShow && { shouldShow }),
+                offset: this.offset(),
+            });
+            this.editor().registerPlugin(plugin);
+        });
+    }
+    ngOnDestroy() {
+        const editor = this.editor();
+        if (!editor.isDestroyed) {
+            editor.unregisterPlugin(this.pluginKey);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalFloatingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: DomternalFloatingMenuComponent, isStandalone: true, selector: "domternal-floating-menu", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, shouldShow: { classPropertyName: "shouldShow", publicName: "shouldShow", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: '<div #menuEl class="dm-floating-menu"><ng-content /></div>', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalFloatingMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'domternal-floating-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<div #menuEl class="dm-floating-menu"><ng-content /></div>', styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], shouldShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldShow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], menuEl: [{ type: i0.ViewChild, args: ['menuEl', { isSignal: true }] }] } });
+
+const CATEGORY_ICONS = {
+    'Smileys & Emotion': '\u{1F600}',
+    'People & Body': '\u{1F44B}',
+    'Animals & Nature': '\u{1F431}',
+    'Food & Drink': '\u{1F355}',
+    'Travel & Places': '\u{1F697}',
+    'Activities': '\u{26BD}',
+    'Objects': '\u{1F4A1}',
+    'Symbols': '\u{1F523}',
+    'Flags': '\u{1F3C1}',
+};
+class DomternalEmojiPickerComponent {
+    editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    emojis = input.required(...(ngDevMode ? [{ debugName: "emojis" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    activeCategory = signal('', ...(ngDevMode ? [{ debugName: "activeCategory" }] : /* istanbul ignore next */ []));
+    anchorEl = null;
+    ngZone = inject(NgZone);
+    elRef = inject(ElementRef);
+    clickOutsideHandler = null;
+    keydownHandler = null;
+    eventHandler = null;
+    cleanupFloating = null;
+    categories = computed(() => {
+        const map = new Map();
+        for (const item of this.emojis()) {
+            let list = map.get(item.group);
+            if (!list) {
+                list = [];
+                map.set(item.group, list);
+            }
+            list.push(item);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    categoryNames = computed(() => [...this.categories().keys()], ...(ngDevMode ? [{ debugName: "categoryNames" }] : /* istanbul ignore next */ []));
+    filteredEmojis = computed(() => {
+        const query = this.searchQuery().toLowerCase();
+        if (!query)
+            return [];
+        const storage = this.getEmojiStorage();
+        const searchFn = storage?.['searchEmoji'];
+        if (searchFn) {
+            return searchFn(query);
+        }
+        return this.emojis().filter((item) => item.name.includes(query) ||
+            item.group.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredEmojis" }] : /* istanbul ignore next */ []));
+    frequentlyUsed = computed(() => {
+        // Re-evaluate when panel opens (isOpen changes)
+        this.isOpen();
+        const storage = this.getEmojiStorage();
+        const getFreq = storage?.['getFrequentlyUsed'];
+        if (!getFreq)
+            return [];
+        const names = getFreq();
+        if (!names.length)
+            return [];
+        const nameMap = storage['_nameMap'];
+        if (!nameMap)
+            return [];
+        return names.slice(0, 16).map((n) => nameMap.get(n)).filter(Boolean);
+    }, ...(ngDevMode ? [{ debugName: "frequentlyUsed" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const editor = this.editor();
+            untracked(() => this.setupEventListener(editor));
+        });
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    getCategory(cat) {
+        return this.categories().get(cat) ?? [];
+    }
+    categoryIcon(cat) {
+        return CATEGORY_ICONS[cat] ?? cat.charAt(0);
+    }
+    formatName(name) {
+        return name.replace(/_/g, ' ');
+    }
+    onSearch(event) {
+        const input = event.target;
+        this.searchQuery.set(input.value);
+    }
+    selectEmoji(item) {
+        const editor = this.editor();
+        const cmd = editor.commands;
+        if (cmd['insertEmoji']) {
+            cmd['insertEmoji'](item.name);
+        }
+        this.close();
+    }
+    scrollToCategory(cat) {
+        this.searchQuery.set('');
+        this.activeCategory.set(cat);
+        // Wait for search to clear and DOM to update
+        requestAnimationFrame(() => {
+            const grid = this.elRef.nativeElement.querySelector('.dm-emoji-picker-grid');
+            if (!grid)
+                return;
+            const label = grid.querySelector(`[data-category="${cat}"]`);
+            if (label) {
+                // Use manual scrollTop instead of scrollIntoView to avoid scrolling the page
+                grid.scrollTo({ top: label.offsetTop - grid.offsetTop, behavior: 'smooth' });
+            }
+        });
+    }
+    onGridScroll() {
+        const grid = this.elRef.nativeElement.querySelector('.dm-emoji-picker-grid');
+        if (!grid || this.searchQuery())
+            return;
+        const labels = Array.from(grid.querySelectorAll('.dm-emoji-picker-category-label[data-category]'));
+        let currentCat = '';
+        for (const label of labels) {
+            if (label.offsetTop - grid.offsetTop <= grid.scrollTop + 20) {
+                currentCat = label.getAttribute('data-category') ?? '';
+            }
+        }
+        if (currentCat && currentCat !== this.activeCategory()) {
+            this.activeCategory.set(currentCat);
+        }
+    }
+    close() {
+        this.cleanupFloating?.();
+        this.cleanupFloating = null;
+        this.isOpen.set(false);
+        this.setStorageOpen(false);
+        this.searchQuery.set('');
+        this.anchorEl = null;
+        this.removeGlobalListeners();
+        this.editor().view.focus();
+    }
+    setupEventListener(editor) {
+        this.cleanup();
+        this.eventHandler = (...args) => {
+            const data = args[0];
+            this.ngZone.run(() => {
+                if (this.isOpen()) {
+                    this.close();
+                    return;
+                }
+                this.anchorEl = data?.anchorElement ?? null;
+                this.isOpen.set(true);
+                this.setStorageOpen(true);
+                this.searchQuery.set('');
+                // Set initial active category
+                const names = this.categoryNames();
+                if (names.length > 0 && names[0]) {
+                    this.activeCategory.set(names[0]);
+                }
+                this.addGlobalListeners();
+                // Position panel and focus search input after render
+                requestAnimationFrame(() => {
+                    const panel = this.elRef.nativeElement.querySelector('.dm-emoji-picker');
+                    if (panel && this.anchorEl) {
+                        this.cleanupFloating?.();
+                        this.cleanupFloating = positionFloatingOnce(this.anchorEl, panel, {
+                            placement: 'bottom',
+                            offsetValue: 4,
+                        });
+                    }
+                    const input = this.elRef.nativeElement.querySelector('.dm-emoji-picker-search input');
+                    input?.focus();
+                });
+            });
+        };
+        editor.on('insertEmoji', this.eventHandler);
+    }
+    addGlobalListeners() {
+        this.clickOutsideHandler = (e) => {
+            const target = e.target;
+            if (this.isOpen() &&
+                !this.elRef.nativeElement.contains(target) &&
+                target !== this.anchorEl &&
+                !this.anchorEl?.contains(target)) {
+                this.ngZone.run(() => this.close());
+            }
+        };
+        document.addEventListener('mousedown', this.clickOutsideHandler);
+        this.keydownHandler = (e) => {
+            if (e.key === 'Escape' && this.isOpen()) {
+                e.preventDefault();
+                this.ngZone.run(() => this.close());
+            }
+        };
+        document.addEventListener('keydown', this.keydownHandler);
+    }
+    removeGlobalListeners() {
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('mousedown', this.clickOutsideHandler);
+            this.clickOutsideHandler = null;
+        }
+        if (this.keydownHandler) {
+            document.removeEventListener('keydown', this.keydownHandler);
+            this.keydownHandler = null;
+        }
+    }
+    setStorageOpen(open) {
+        const storage = this.getEmojiStorage();
+        if (storage)
+            storage['isOpen'] = open;
+        // Dispatch a no-op transaction so the toolbar's transaction handler
+        // re-evaluates isActiveFn and shows the button as active/inactive.
+        const editor = this.editor();
+        editor.view.dispatch(editor.view.state.tr);
+    }
+    getEmojiStorage() {
+        const storage = this.editor().storage;
+        return storage['emoji'] ?? null;
+    }
+    cleanup() {
+        this.removeGlobalListeners();
+        if (this.eventHandler) {
+            const editor = this.editor();
+            editor.off('insertEmoji', this.eventHandler);
+            this.eventHandler = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalEmojiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalEmojiPickerComponent, isStandalone: true, selector: "domternal-emoji-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, emojis: { classPropertyName: "emojis", publicName: "emojis", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "dm-emoji-picker-host" }, ngImport: i0, template: `
+    @if (isOpen()) {
+      <div class="dm-emoji-picker">
+        <div class="dm-emoji-picker-search">
+          <input
+            #searchInput
+            type="text"
+            placeholder="Search emoji..."
+            [value]="searchQuery()"
+            (input)="onSearch($event)"
+            (keydown.escape)="close()"
+          />
+        </div>
+
+        <div class="dm-emoji-picker-tabs" role="tablist">
+          @for (cat of categoryNames(); track cat) {
+            <button
+              type="button"
+              class="dm-emoji-picker-tab"
+              [class.dm-emoji-picker-tab--active]="activeCategory() === cat"
+              [title]="cat"
+              (mousedown)="$event.preventDefault()"
+              (click)="scrollToCategory(cat)"
+            >{{ categoryIcon(cat) }}</button>
+          }
+        </div>
+
+        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()">
+          @if (searchQuery()) {
+            @for (item of filteredEmojis(); track item.name) {
+              <button
+                type="button"
+                class="dm-emoji-swatch"
+                [title]="formatName(item.name)"
+                (mousedown)="$event.preventDefault()"
+                (click)="selectEmoji(item)"
+              >{{ item.emoji }}</button>
+            }
+            @empty {
+              <div class="dm-emoji-picker-empty">No emoji found</div>
+            }
+          } @else {
+            @if (frequentlyUsed().length) {
+              <div class="dm-emoji-picker-category-label">Frequently Used</div>
+              @for (item of frequentlyUsed(); track item.name) {
+                <button
+                  type="button"
+                  class="dm-emoji-swatch"
+                  [title]="formatName(item.name)"
+                  (mousedown)="$event.preventDefault()"
+                  (click)="selectEmoji(item)"
+                >{{ item.emoji }}</button>
+              }
+            }
+            @for (cat of categoryNames(); track cat) {
+              <div class="dm-emoji-picker-category-label" [attr.data-category]="cat">{{ cat }}</div>
+              @for (item of getCategory(cat); track item.name) {
+                <button
+                  type="button"
+                  class="dm-emoji-swatch"
+                  [title]="formatName(item.name)"
+                  (mousedown)="$event.preventDefault()"
+                  (click)="selectEmoji(item)"
+                >{{ item.emoji }}</button>
+              }
+            }
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalEmojiPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'domternal-emoji-picker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'class': 'dm-emoji-picker-host' },
+                    template: `
+    @if (isOpen()) {
+      <div class="dm-emoji-picker">
+        <div class="dm-emoji-picker-search">
+          <input
+            #searchInput
+            type="text"
+            placeholder="Search emoji..."
+            [value]="searchQuery()"
+            (input)="onSearch($event)"
+            (keydown.escape)="close()"
+          />
+        </div>
+
+        <div class="dm-emoji-picker-tabs" role="tablist">
+          @for (cat of categoryNames(); track cat) {
+            <button
+              type="button"
+              class="dm-emoji-picker-tab"
+              [class.dm-emoji-picker-tab--active]="activeCategory() === cat"
+              [title]="cat"
+              (mousedown)="$event.preventDefault()"
+              (click)="scrollToCategory(cat)"
+            >{{ categoryIcon(cat) }}</button>
+          }
+        </div>
+
+        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()">
+          @if (searchQuery()) {
+            @for (item of filteredEmojis(); track item.name) {
+              <button
+                type="button"
+                class="dm-emoji-swatch"
+                [title]="formatName(item.name)"
+                (mousedown)="$event.preventDefault()"
+                (click)="selectEmoji(item)"
+              >{{ item.emoji }}</button>
+            }
+            @empty {
+              <div class="dm-emoji-picker-empty">No emoji found</div>
+            }
+          } @else {
+            @if (frequentlyUsed().length) {
+              <div class="dm-emoji-picker-category-label">Frequently Used</div>
+              @for (item of frequentlyUsed(); track item.name) {
+                <button
+                  type="button"
+                  class="dm-emoji-swatch"
+                  [title]="formatName(item.name)"
+                  (mousedown)="$event.preventDefault()"
+                  (click)="selectEmoji(item)"
+                >{{ item.emoji }}</button>
+              }
+            }
+            @for (cat of categoryNames(); track cat) {
+              <div class="dm-emoji-picker-category-label" [attr.data-category]="cat">{{ cat }}</div>
+              @for (item of getCategory(cat); track item.name) {
+                <button
+                  type="button"
+                  class="dm-emoji-swatch"
+                  [title]="formatName(item.name)"
+                  (mousedown)="$event.preventDefault()"
+                  (click)="selectEmoji(item)"
+                >{{ item.emoji }}</button>
+              }
+            }
+          }
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], emojis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emojis", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_EXTENSIONS, DomternalBubbleMenuComponent, DomternalEditorComponent, DomternalEmojiPickerComponent, DomternalFloatingMenuComponent, DomternalToolbarComponent };
+//# sourceMappingURL=domternal-angular.mjs.map