@domternal/angular 0.15.0 → 1.0.0

package/dist/fesm2022/domternal-angular.mjs

@@ -1,7 +1,7 @@
 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, refocusEditorAfterCommand, positionFloatingOnce, defaultIcons, ToolbarController, defaultBubbleContexts, PluginKey, createBubbleMenuPlugin, createFloatingMenuPlugin, FloatingMenuController, positionFloating } from '@domternal/core';
+import { Document, Paragraph, Text, BaseKeymap, History, Editor, refocusEditorAfterCommand, positionFloatingOnce, defaultIcons, ToolbarController, defaultBubbleContexts, PluginKey, createBubbleShouldShow, createBubbleMenuPlugin, buildBubbleItemMaps, resolveBubbleNames, resolveBubbleMenuItems, createFloatingMenuPlugin, FloatingMenuController, positionFloating } from '@domternal/core';
 export { Editor } from '@domternal/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -206,8 +206,8 @@ class DomternalEditorComponent {
             this.editorCreated.emit(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 }, history: { classPropertyName: "history", publicName: "history", 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 }, preset: { classPropertyName: "preset", publicName: "preset", 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: { attributes: { "data-dm-editor-ui": "" }, classAttribute: "dm-editor" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.20", type: DomternalEditorComponent, isStandalone: true, selector: "domternal-editor", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, history: { classPropertyName: "history", publicName: "history", 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 }, preset: { classPropertyName: "preset", publicName: "preset", 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: { attributes: { "data-dm-editor-ui": "" }, classAttribute: "dm-editor" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DomternalEditorComponent),
@@ -215,7 +215,7 @@ class DomternalEditorComponent {
             },
         ], 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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', 'data-dm-editor-ui': '' }, providers: [
                         {
@@ -685,8 +685,8 @@ class DomternalToolbarComponent {
         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", "data-dm-editor-ui": "" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "\"Editor formatting\"" }, classAttribute: "dm-toolbar" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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", "data-dm-editor-ui": "" }, 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>
@@ -788,7 +788,7 @@ class DomternalToolbarComponent {
     }
   `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'domternal-toolbar',
@@ -905,15 +905,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], 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;
-}
+/* The item pipeline (which list this selection gets, what the schema allows,
+   which separators survive) is core's. This component renders the answer and
+   owns nothing about how it is reached. */
 class DomternalBubbleMenuComponent {
     editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
     shouldShow = input(...(ngDevMode ? [undefined, { debugName: "shouldShow" }] : /* istanbul ignore next */ []));
@@ -922,7 +916,17 @@ class DomternalBubbleMenuComponent {
     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(undefined, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    /** Context-aware: map context names to item arrays, `true` for all valid items, or `null` to disable */
+    /**
+     * Context-aware: map context names to item arrays, `true` for all valid
+     * items, or `null` to disable.
+     *
+     * Typed through core's `BubbleContexts` rather than the same shape written
+     * out here. Angular emits an input's declared type into the package types,
+     * and an inline union came out of that emit as `Record<string, true |
+     * string[]>`: the `null` that disables a context was missing from the
+     * published type, so the documented way to switch one off did not
+     * type-check. A named type survives the trip intact.
+     */
     contexts = input(undefined, ...(ngDevMode ? [{ debugName: "contexts" }] : /* istanbul ignore next */ []));
     /**
      * Custom icon overrides. Falls back to default Phosphor icons for unmapped keys.
@@ -946,6 +950,15 @@ class DomternalBubbleMenuComponent {
     }
     /** Internal - updated on transactions. Not meant to be set from outside. */
     resolvedItems = signal([], ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    /**
+     * The list core hands back, stored once. A default or fallback list comes
+     * back by reference and a signal set to its current value notifies nobody,
+     * so those passes cost nothing; a list resolved from names is rebuilt each
+     * time, as it always was.
+     */
+    setResolvedItems(items) {
+        this.resolvedItems.set(items);
+    }
     /** Internal - true when the BlockContextMenu extension is loaded; toggles the "..." trailing button. */
     showBlockMenuButton = signal(false, ...(ngDevMode ? [{ debugName: "showBlockMenuButton" }] : /* istanbul ignore next */ []));
     /** Internal - true when the selection spans more than one top-level block; the "..." trigger is disabled in that case because block-level commands have no unambiguous target. */
@@ -954,6 +967,12 @@ class DomternalBubbleMenuComponent {
     isNodeSelection = signal(false, ...(ngDevMode ? [{ debugName: "isNodeSelection" }] : /* istanbul ignore next */ []));
     /** Internal - true when the NotionColorPicker extension is loaded; toggles the "A" color trigger. */
     showColorPickerButton = signal(false, ...(ngDevMode ? [{ debugName: "showColorPickerButton" }] : /* istanbul ignore next */ []));
+    /**
+     * The trailing triggers, resolved once for the template: each is read twice,
+     * for the button and for the separator that may lead it.
+     */
+    showColorTrigger = computed(() => this.showColorPickerButton() && !this.isNodeSelection(), ...(ngDevMode ? [{ debugName: "showColorTrigger" }] : /* istanbul ignore next */ []));
+    showBlockTrigger = computed(() => this.showBlockMenuButton() && !this.isNodeSelection(), ...(ngDevMode ? [{ debugName: "showBlockTrigger" }] : /* istanbul ignore next */ []));
     /** notionColorPicker extension loaded (immutable per editor). */
     hasNotionColorPicker = false;
     /** Current text color CSS variable expression for the trigger glyph (null = default). */
@@ -967,12 +986,15 @@ class DomternalBubbleMenuComponent {
     sanitizer = inject(DomSanitizer);
     ngZone = inject(NgZone);
     activeVersion = signal(0, ...(ngDevMode ? [{ debugName: "activeVersion" }] : /* istanbul ignore next */ []));
-    itemMap = new Map();
-    dropdownMap = new Map();
+    /** Rebuilt per editor by `setupItemTracking`; empty until then. */
+    maps = {
+        itemMap: new Map(),
+        dropdownMap: new Map(),
+        bubbleDefaults: new Map(),
+    };
     activeMap = new Map();
     disabledMap = new Map();
     htmlCache = new Map();
-    bubbleDefaults = new Map();
     transactionHandler = null;
     // Dropdown state for bubble-menu-embedded dropdowns (e.g. text-align).
     openDropdown = signal(null, ...(ngDevMode ? [{ debugName: "openDropdown" }] : /* istanbul ignore next */ []));
@@ -983,11 +1005,8 @@ class DomternalBubbleMenuComponent {
     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() {
-        // Each component instance needs a unique plugin key so that multiple
-        // bubble-menus mounted in the same editor do not collide. Prefer
-        // crypto.randomUUID over Math.random() for collision-free uniqueness
-        // (Math.random across two simultaneous mounts has a small but real
-        // collision probability, and SSR may share the random seed).
+        // Each component instance needs a unique plugin key so that multiple bubble-
+        // menus mounted in the same editor do not collide.
         const crypto = globalThis.crypto;
         const suffix = crypto?.randomUUID?.().slice(0, 8) ?? Math.random().toString(36).slice(2, 8);
         this.pluginKey = new PluginKey('angularBubbleMenu-' + suffix);
@@ -998,37 +1017,15 @@ class DomternalBubbleMenuComponent {
         });
         afterNextRender(() => {
             const editor = this.editor();
+            /* Item tracking first, and the order is load-bearing: it is what builds
+               `this.maps`, and the visibility rule below reads that object once.
+               With the plugin registered first the rule closed over an empty map,
+               and `bubbleDefaults.has(...)` was false for every node selection, so
+               an image never got a menu at all. */
+            this.setupItemTracking(editor);
             const ctxs = this.resolveContexts(editor);
-            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)
-                            return false;
-                        if (state.selection.node)
-                            return this.bubbleDefaults.has(state.selection.node.type.name);
-                        if (isInsideTableCell(state.selection.$from))
-                            return false;
-                        return state.selection.$from.parent.type.spec.marks !== ''
-                            || state.selection.$to.parent.type.spec.marks !== '';
-                    };
-                }
-            }
+            const shouldShowFn = this.shouldShow() ??
+                createBubbleShouldShow(this.maps, ctxs);
             const plugin = createBubbleMenuPlugin({
                 pluginKey: this.pluginKey,
                 editor,
@@ -1039,7 +1036,6 @@ class DomternalBubbleMenuComponent {
                 updateDelay: this.updateDelay(),
             });
             editor.registerPlugin(plugin);
-            this.setupItemTracking(editor);
         });
     }
     ngOnDestroy() {
@@ -1114,170 +1110,29 @@ class DomternalBubbleMenuComponent {
         }));
     }
     // === Internal ===
-    buildItemMap(editor) {
-        this.itemMap.clear();
-        this.dropdownMap.clear();
-        for (const item of editor.toolbarItems) {
-            if (item.type === 'button') {
-                this.itemMap.set(item.name, item);
-            }
-            else if (item.type === 'dropdown') {
-                this.dropdownMap.set(item.name, item);
-                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-${String(sepIdx++)}` });
-            }
-            else {
-                const dropdown = this.dropdownMap.get(name);
-                if (dropdown) {
-                    result.push(dropdown);
-                    continue;
-                }
-                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-${String(sepIdx++)}` });
-                }
-                result.push(item);
-                lastGroup = item.group;
-            }
-            this.bubbleDefaults.set(ctx, result);
-        }
-    }
     setupItemTracking(editor) {
-        this.buildItemMap(editor);
-        this.buildBubbleDefaults(editor);
+        /* One pipeline, built once per editor. Every renderer asks core the same
+           question, so none of them answers it. */
+        this.maps = buildBubbleItemMaps(editor);
         this.showBlockMenuButton.set(editor.extensionManager.extensions.some((e) => e.name === 'blockContextMenu'));
         // Presence cached; the show decision needs a live listener (per sync below).
         this.hasNotionColorPicker =
             editor.extensionManager.extensions.some((e) => e.name === 'notionColorPicker');
-        const items = this.items();
-        const defaultItems = this.resolveNames(items ?? ['bold', 'italic', 'underline']);
-        if (this.resolveContexts(editor)) {
-            this.updateContextItems(editor);
-        }
-        else {
-            this.resolvedItems.set(defaultItems);
-        }
+        const fallbackItems = resolveBubbleNames(this.items() ?? ['bold', 'italic', 'underline'], this.maps.itemMap, this.maps.dropdownMap);
+        const refreshItems = () => {
+            this.setResolvedItems(resolveBubbleMenuItems({
+                editor,
+                maps: this.maps,
+                contexts: this.resolveContexts(editor),
+                fallbackItems,
+            }));
+        };
+        refreshItems();
         this.transactionHandler = () => {
             this.ngZone.run(() => {
                 const sel = editor.state.selection;
                 this.isNodeSelection.set(!!sel.node);
-                if (this.resolveContexts(editor)) {
-                    this.updateContextItems(editor);
-                }
-                else if (sel.node && this.bubbleDefaults.has(sel.node.type.name)) {
-                    this.resolvedItems.set(this.bubbleDefaults.get(sel.node.type.name) ?? []);
-                }
-                else {
-                    this.resolvedItems.set(defaultItems);
-                }
+                refreshItems();
                 this.updateStates(editor);
                 this.syncTrailingButtonsState(editor);
                 this.activeVersion.update((v) => v + 1);
@@ -1332,35 +1187,6 @@ class DomternalBubbleMenuComponent {
         this.currentBgColorVar.set(bgToken ? `var(--dm-block-bg-${bgToken})` : null);
         this.hasAnyColor.set(textToken !== null || bgToken !== null);
     }
-    updateContextItems(editor) {
-        const ctxs = this.resolveContexts(editor);
-        if (!ctxs)
-            return;
-        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 {
@@ -1440,21 +1266,13 @@ class DomternalBubbleMenuComponent {
         if (!isOpening)
             return;
         this.openDropdown.set(dropdown.name);
-        // NOTE: we deliberately do NOT broadcast `dm:dismiss-overlays` here.
-        // The bubble menu plugin in core listens for that event and would
-        // hide itself - taking our just-opened dropdown's trigger with it.
-        // Other overlays (color picker, link popover) close themselves via
-        // their own click-outside handlers when the user clicks our trigger,
-        // so cooperative dismissal still works.
+        // NOTE: we deliberately do NOT broadcast `dm:dismiss-overlays` here. The
+        // bubble menu plugin in core listens for that event and would hide itself -
+        // taking our just-opened dropdown's trigger with it.
         const editorElBroadcast = this.menuEl().nativeElement.closest('.dm-editor');
-        // Position the panel against the trigger after Angular renders it.
-        // We deliberately keep the panel INSIDE `.dm-bubble-menu` so it
-        // inherits the bubble-menu-scoped button tokens (--dm-button-active-bg
-        // / --dm-button-active-color). Reparenting into `.dm-editor` was
-        // tempting for consistency with the color picker, but that dropped
-        // the active-state colors because those tokens aren't defined at
-        // editor scope. floating-ui handles cross-element positioning fine
-        // without reparenting.
+        // Position the panel against the trigger after Angular renders it. We
+        // deliberately keep the panel INSIDE `.dm-bubble-menu` so it inherits the
+        // bubble-menu-scoped button tokens (--dm-button-active-bg / --dm-button-
         requestAnimationFrame(() => {
             const trigger = event?.currentTarget
                 ?? this.menuEl().nativeElement.querySelector(`[data-dropdown="${dropdown.name}"]`);
@@ -1523,8 +1341,8 @@ class DomternalBubbleMenuComponent {
         this.dropdownCleanupFloating = null;
         this.openDropdown.set(null);
     }
-    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 }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 }, icons: { classPropertyName: "icons", publicName: "icons", 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" role="toolbar" aria-label="Text formatting">
       @for (item of resolvedItems(); track item.name) {
         @if (item.type === 'separator') {
@@ -1571,8 +1389,10 @@ class DomternalBubbleMenuComponent {
             (click)="executeCommand(asButton(item), $event)"></button>
         }
       }
-      @if (showColorPickerButton() && !isNodeSelection()) {
-        <span class="dm-toolbar-separator" role="separator"></span>
+      @if (showColorTrigger()) {
+        @if (resolvedItems().length > 0) {
+          <span class="dm-toolbar-separator" role="separator"></span>
+        }
         <button #colorBtn type="button" class="dm-toolbar-button dm-ncp-trigger"
           [class.dm-toolbar-button--active]="hasAnyColor()"
           title="Text and background color"
@@ -1586,8 +1406,10 @@ class DomternalBubbleMenuComponent {
             [style.background-color]="currentBgColorVar()"></span>
         </button>
       }
-      @if (showBlockMenuButton() && !isNodeSelection()) {
-        <span class="dm-toolbar-separator" role="separator"></span>
+      @if (showBlockTrigger()) {
+        @if (resolvedItems().length > 0 || showColorTrigger()) {
+          <span class="dm-toolbar-separator" role="separator"></span>
+        }
         <button #blockMenuBtn type="button" class="dm-toolbar-button"
           [disabled]="blockMenuButtonDisabled()"
           [title]="blockMenuButtonDisabled() ? 'Block actions (select within a single block)' : 'More options'"
@@ -1601,7 +1423,7 @@ class DomternalBubbleMenuComponent {
     </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", 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" role="toolbar" aria-label="Text formatting">
@@ -1650,8 +1472,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             (click)="executeCommand(asButton(item), $event)"></button>
         }
       }
-      @if (showColorPickerButton() && !isNodeSelection()) {
-        <span class="dm-toolbar-separator" role="separator"></span>
+      @if (showColorTrigger()) {
+        @if (resolvedItems().length > 0) {
+          <span class="dm-toolbar-separator" role="separator"></span>
+        }
         <button #colorBtn type="button" class="dm-toolbar-button dm-ncp-trigger"
           [class.dm-toolbar-button--active]="hasAnyColor()"
           title="Text and background color"
@@ -1665,8 +1489,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             [style.background-color]="currentBgColorVar()"></span>
         </button>
       }
-      @if (showBlockMenuButton() && !isNodeSelection()) {
-        <span class="dm-toolbar-separator" role="separator"></span>
+      @if (showBlockTrigger()) {
+        @if (resolvedItems().length > 0 || showColorTrigger()) {
+          <span class="dm-toolbar-separator" role="separator"></span>
+        }
         <button #blockMenuBtn type="button" class="dm-toolbar-button"
           [disabled]="blockMenuButtonDisabled()"
           [title]="blockMenuButtonDisabled() ? 'Block actions (select within a single block)' : 'More options'"
@@ -1857,8 +1683,8 @@ class DomternalFloatingMenuComponent {
                 return;
         }
     }
-    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.0.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 }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, keymap: { classPropertyName: "keymap", publicName: "keymap", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, requireExplicitTrigger: { classPropertyName: "requireExplicitTrigger", publicName: "requireExplicitTrigger", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["menuEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalFloatingMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, keymap: { classPropertyName: "keymap", publicName: "keymap", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, requireExplicitTrigger: { classPropertyName: "requireExplicitTrigger", publicName: "requireExplicitTrigger", 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"
@@ -1904,7 +1730,7 @@ class DomternalFloatingMenuComponent {
     </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalFloatingMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'domternal-floating-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     <div
@@ -1959,10 +1785,10 @@ const CATEGORY_ICONS = {
     'Animals & Nature': '\u{1F431}',
     'Food & Drink': '\u{1F355}',
     'Travel & Places': '\u{1F697}',
-    'Activities': '\u{26BD}',
-    'Objects': '\u{1F4A1}',
-    'Symbols': '\u{1F523}',
-    'Flags': '\u{1F3C1}',
+    Activities: '\u{26BD}',
+    Objects: '\u{1F4A1}',
+    Symbols: '\u{1F523}',
+    Flags: '\u{1F3C1}',
 };
 class DomternalEmojiPickerComponent {
     editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
@@ -1999,8 +1825,7 @@ class DomternalEmojiPickerComponent {
         if (searchFn) {
             return searchFn(query);
         }
-        return this.emojis().filter((item) => item.name.includes(query) ||
-            item.group.toLowerCase().includes(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)
@@ -2017,12 +1842,17 @@ class DomternalEmojiPickerComponent {
         const nameMap = storage['_nameMap'];
         if (!nameMap)
             return [];
-        return names.slice(0, 16).map((n) => nameMap.get(n)).filter(Boolean);
+        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); });
+            untracked(() => {
+                this.setupEventListener(editor);
+            });
         });
     }
     ngOnDestroy() {
@@ -2064,7 +1894,8 @@ class DomternalEmojiPickerComponent {
                 // Focus first emoji swatch after scroll completes
                 setTimeout(() => {
                     const firstSwatch = label.nextElementSibling;
-                    if (firstSwatch instanceof HTMLElement && firstSwatch.classList.contains('dm-emoji-swatch')) {
+                    if (firstSwatch instanceof HTMLElement &&
+                        firstSwatch.classList.contains('dm-emoji-swatch')) {
                         firstSwatch.focus();
                     }
                 }, 50);
@@ -2089,7 +1920,7 @@ class DomternalEmojiPickerComponent {
             return;
         }
         const cols = 8;
-        let next = idx;
+        let next;
         switch (event.key) {
             case 'ArrowRight':
                 event.preventDefault();
@@ -2112,7 +1943,8 @@ class DomternalEmojiPickerComponent {
                 event.preventDefault();
                 swatches[idx]?.click();
                 return;
-            default: return;
+            default:
+                return;
         }
         swatches[next]?.focus();
     }
@@ -2184,14 +2016,18 @@ class DomternalEmojiPickerComponent {
                 !this.elRef.nativeElement.contains(target) &&
                 target !== this.anchorEl &&
                 !this.anchorEl?.contains(target)) {
-                this.ngZone.run(() => { this.close(); });
+                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(); });
+                this.ngZone.run(() => {
+                    this.close();
+                });
             }
         };
         document.addEventListener('keydown', this.keydownHandler);
@@ -2227,8 +2063,8 @@ class DomternalEmojiPickerComponent {
             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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalEmojiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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">
@@ -2255,11 +2091,18 @@ class DomternalEmojiPickerComponent {
               [attr.aria-label]="cat"
               (mousedown)="$event.preventDefault()"
               (click)="scrollToCategory(cat)"
-            >{{ categoryIcon(cat) }}</button>
+            >
+              {{ categoryIcon(cat) }}
+            </button>
           }
         </div>
 
-        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()" (keydown)="onGridKeydown($event)">
+        <div
+          class="dm-emoji-picker-grid"
+          #grid
+          (scroll)="onGridScroll()"
+          (keydown)="onGridKeydown($event)"
+        >
           @if (searchQuery()) {
             @for (item of filteredEmojis(); track item.name) {
               <button
@@ -2270,9 +2113,10 @@ class DomternalEmojiPickerComponent {
                 [attr.aria-label]="formatName(item.name)"
                 (mousedown)="$event.preventDefault()"
                 (click)="selectEmoji(item)"
-              >{{ item.emoji }}</button>
-            }
-            @empty {
+              >
+                {{ item.emoji }}
+              </button>
+            } @empty {
               <div class="dm-emoji-picker-empty">No emoji found</div>
             }
           } @else {
@@ -2287,7 +2131,9 @@ class DomternalEmojiPickerComponent {
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
                   (click)="selectEmoji(item)"
-                >{{ item.emoji }}</button>
+                >
+                  {{ item.emoji }}
+                </button>
               }
             }
             @for (cat of categoryNames(); track cat) {
@@ -2301,7 +2147,9 @@ class DomternalEmojiPickerComponent {
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
                   (click)="selectEmoji(item)"
-                >{{ item.emoji }}</button>
+                >
+                  {{ item.emoji }}
+                </button>
               }
             }
           }
@@ -2310,13 +2158,13 @@ class DomternalEmojiPickerComponent {
     }
   `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalEmojiPickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'domternal-emoji-picker',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'class': 'dm-emoji-picker-host' },
+                    host: { class: 'dm-emoji-picker-host' },
                     template: `
     @if (isOpen()) {
       <div class="dm-emoji-picker">
@@ -2344,11 +2192,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
               [attr.aria-label]="cat"
               (mousedown)="$event.preventDefault()"
               (click)="scrollToCategory(cat)"
-            >{{ categoryIcon(cat) }}</button>
+            >
+              {{ categoryIcon(cat) }}
+            </button>
           }
         </div>
 
-        <div class="dm-emoji-picker-grid" #grid (scroll)="onGridScroll()" (keydown)="onGridKeydown($event)">
+        <div
+          class="dm-emoji-picker-grid"
+          #grid
+          (scroll)="onGridScroll()"
+          (keydown)="onGridKeydown($event)"
+        >
           @if (searchQuery()) {
             @for (item of filteredEmojis(); track item.name) {
               <button
@@ -2359,9 +2214,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 [attr.aria-label]="formatName(item.name)"
                 (mousedown)="$event.preventDefault()"
                 (click)="selectEmoji(item)"
-              >{{ item.emoji }}</button>
-            }
-            @empty {
+              >
+                {{ item.emoji }}
+              </button>
+            } @empty {
               <div class="dm-emoji-picker-empty">No emoji found</div>
             }
           } @else {
@@ -2376,7 +2232,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
                   (click)="selectEmoji(item)"
-                >{{ item.emoji }}</button>
+                >
+                  {{ item.emoji }}
+                </button>
               }
             }
             @for (cat of categoryNames(); track cat) {
@@ -2390,7 +2248,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                   [attr.aria-label]="formatName(item.name)"
                   (mousedown)="$event.preventDefault()"
                   (click)="selectEmoji(item)"
-                >{{ item.emoji }}</button>
+                >
+                  {{ item.emoji }}
+                </button>
               }
             }
           }
@@ -2401,6 +2261,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], emojis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emojis", required: true }] }] } });
 
+function paletteFromExtensionOptions(options) {
+    if (typeof options !== 'object' || options === null || !('palette' in options))
+        return [];
+    const palette = options.palette;
+    if (!Array.isArray(palette) || !palette.every((token) => typeof token === 'string')) {
+        return [];
+    }
+    return [...palette];
+}
 /**
  * Display labels for the named-token palette. Used in tooltips / aria labels;
  * unknown tokens fall back to a title-cased version of the raw key.
@@ -2438,7 +2307,9 @@ class DomternalNotionColorPickerComponent {
     constructor() {
         effect(() => {
             const editor = this.editor();
-            untracked(() => { this.setupEventListener(editor); });
+            untracked(() => {
+                this.setupEventListener(editor);
+            });
         });
     }
     ngOnDestroy() {
@@ -2478,7 +2349,7 @@ class DomternalNotionColorPickerComponent {
         const idx = active ? swatches.indexOf(active) : -1;
         if (idx === -1)
             return;
-        let next = idx;
+        let next;
         switch (event.key) {
             case 'ArrowRight':
                 event.preventDefault();
@@ -2600,13 +2471,17 @@ class DomternalNotionColorPickerComponent {
                 return;
             if (this.anchorEl?.contains(target))
                 return;
-            this.ngZone.run(() => { this.close({ refocus: false }); });
+            this.ngZone.run(() => {
+                this.close({ refocus: false });
+            });
         };
         document.addEventListener('mousedown', this.clickOutsideHandler);
         this.keydownHandler = (e) => {
             if (e.key === 'Escape' && this.isOpen()) {
                 e.preventDefault();
-                this.ngZone.run(() => { this.close({ refocus: true }); });
+                this.ngZone.run(() => {
+                    this.close({ refocus: true });
+                });
             }
         };
         document.addEventListener('keydown', this.keydownHandler);
@@ -2619,11 +2494,15 @@ class DomternalNotionColorPickerComponent {
             // (hideout, route change). Positioning against a detached anchor is
             // a no-op; close instead. Matches React/Vue behaviour.
             if (this.anchorEl && !this.anchorEl.isConnected) {
-                this.ngZone.run(() => { this.close({ refocus: false }); });
+                this.ngZone.run(() => {
+                    this.close({ refocus: false });
+                });
                 return;
             }
             if (this.editor().state.selection.empty) {
-                this.ngZone.run(() => { this.close({ refocus: false }); });
+                this.ngZone.run(() => {
+                    this.close({ refocus: false });
+                });
             }
             else {
                 // Selection changed but stays non-empty (e.g. shift+arrow): refresh
@@ -2677,8 +2556,7 @@ class DomternalNotionColorPickerComponent {
     }
     readPalette() {
         const ext = this.editor().extensionManager.extensions.find((e) => e.name === 'notionColorPicker');
-        const options = (ext?.options ?? null);
-        return options?.palette ? [...options.palette] : [];
+        return paletteFromExtensionOptions(ext?.options);
     }
     getStorage() {
         const storage = this.editor().storage;
@@ -2702,8 +2580,8 @@ class DomternalNotionColorPickerComponent {
             this.eventHandler = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DomternalNotionColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DomternalNotionColorPickerComponent, isStandalone: true, selector: "domternal-notion-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalNotionColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: DomternalNotionColorPickerComponent, isStandalone: true, selector: "domternal-notion-color-picker", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @if (isOpen()) {
       <div
         class="dm-notion-color-picker"
@@ -2777,7 +2655,7 @@ class DomternalNotionColorPickerComponent {
     }
   `, 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: DomternalNotionColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: DomternalNotionColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'domternal-notion-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     @if (isOpen()) {