@domternal/vanilla 0.14.0 → 1.0.0

package/dist/index.js

@@ -1,4 +1,5 @@
-import { Document, Paragraph, Text, BaseKeymap, History, PluginKey, defaultIcons, Editor, ToolbarController, positionFloatingOnce, refocusEditorAfterCommand, defaultBubbleContexts, createBubbleMenuPlugin, createFloatingMenuPlugin, FloatingMenuController, positionFloating } from '@domternal/core';
+import { Document, Paragraph, Text, BaseKeymap, History, PluginKey, defaultIcons, Editor, ToolbarController, positionFloatingOnce, refocusEditorAfterCommand, resolveBubbleNames, defaultBubbleContexts, buildBubbleItemMaps, createBubbleMenuPlugin, createBubbleShouldShow, resolveBubbleMenuItems, createFloatingMenuPlugin, FloatingMenuController, positionFloating } from '@domternal/core';
+export { buildBubbleItemMaps as buildItemMaps, detectBubbleContext as detectContext, filterBubbleItemsBySchema as filterBySchema, getBubbleFormatItems as getFormatItems, isInsideTableCell, resolveBubbleNames as resolveNames } from '@domternal/core';
 
 // src/shared/isBrowser.ts
 var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
@@ -82,7 +83,8 @@ var DomternalEditor = class extends EventTarget {
       extensions: [...defaults, ...options.extensions ?? []],
       content: options.content ?? "",
       editable: options.editable ?? true,
-      autofocus: options.autofocus ?? false
+      autofocus: options.autofocus ?? false,
+      ...options.preset ? { preset: options.preset } : {}
     });
     this.#wireEditorEvents();
     this.#onCreate?.(this.editor);
@@ -359,6 +361,8 @@ var DomternalToolbar = class extends EventTarget {
   #lastGroupsRef = null;
   /** Maps top-level button/dropdown name -> rendered trigger element. */
   #buttonEls = /* @__PURE__ */ new Map();
+  /** Trigger markup last written, so a re-render does not rewrite it blindly. */
+  #triggerHtml = /* @__PURE__ */ new WeakMap();
   /** Rendered dropdown panel elements (created lazily when opened). */
   #dropdownPanelEl = null;
   #cleanupFloating = null;
@@ -452,6 +456,17 @@ var DomternalToolbar = class extends EventTarget {
       },
       { signal }
     );
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (!this.#controller.openDropdown) return;
+        if (e.key !== "Escape") return;
+        if (this.host.contains(document.activeElement)) return;
+        this.closeDropdown();
+        e.preventDefault();
+      },
+      { signal }
+    );
     this.host.addEventListener(
       "keydown",
       (e) => {
@@ -549,7 +564,9 @@ var DomternalToolbar = class extends EventTarget {
     btn.setAttribute("aria-label", dd.label);
     btn.title = dd.label;
     btn.setAttribute("data-dropdown", dd.name);
-    btn.innerHTML = this.#resolveDropdownTriggerHtml(dd);
+    const triggerHtml = this.#resolveDropdownTriggerHtml(dd);
+    this.#triggerHtml.set(btn, triggerHtml);
+    btn.innerHTML = triggerHtml;
     btn.addEventListener("mousedown", (e) => {
       e.preventDefault();
     });
@@ -626,7 +643,8 @@ var DomternalToolbar = class extends EventTarget {
     btn.setAttribute("aria-expanded", String(isOpen));
     btn.tabIndex = flat === focusedIndex ? 0 : -1;
     const newHtml = this.#resolveDropdownTriggerHtml(dd);
-    if (btn.innerHTML !== newHtml) {
+    if (this.#triggerHtml.get(btn) !== newHtml) {
+      this.#triggerHtml.set(btn, newHtml);
       btn.innerHTML = newHtml;
     }
   }
@@ -872,129 +890,6 @@ var DomternalToolbar = class extends EventTarget {
   }
 };
 
-// src/bubble-menu/itemResolver.ts
-function buildItemMaps(editor) {
-  const itemMap = /* @__PURE__ */ new Map();
-  const dropdownMap = /* @__PURE__ */ new Map();
-  for (const item of editor.toolbarItems) {
-    if (item.type === "button") {
-      itemMap.set(item.name, item);
-    } else if (item.type === "dropdown") {
-      dropdownMap.set(item.name, item);
-      for (const sub of item.items) {
-        itemMap.set(sub.name, sub);
-      }
-    }
-  }
-  return {
-    itemMap,
-    dropdownMap,
-    bubbleDefaults: buildBubbleDefaults(editor)
-  };
-}
-function buildBubbleDefaults(editor) {
-  const byCtx = /* @__PURE__ */ 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);
-    }
-  }
-  const result = /* @__PURE__ */ new Map();
-  for (const [ctx, ctxItems] of byCtx) {
-    ctxItems.sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
-    const list = [];
-    let lastGroup;
-    let sepIdx = 0;
-    for (const item of ctxItems) {
-      if (lastGroup !== void 0 && item.group !== lastGroup) {
-        list.push({ type: "separator", name: `bsep-${String(sepIdx++)}` });
-      }
-      list.push(item);
-      lastGroup = item.group;
-    }
-    result.set(ctx, list);
-  }
-  return result;
-}
-function resolveNames(names, itemMap, dropdownMap) {
-  const result = [];
-  let sepIdx = 0;
-  for (const name of names) {
-    if (name === "|") {
-      result.push({ type: "separator", name: `sep-${String(sepIdx++)}` });
-      continue;
-    }
-    const dropdown = dropdownMap.get(name);
-    if (dropdown) {
-      result.push(dropdown);
-      continue;
-    }
-    const item = itemMap.get(name);
-    if (item) result.push(item);
-  }
-  return result;
-}
-function getFormatItems(itemMap) {
-  return Array.from(itemMap.values()).filter((item) => item.group === "format").sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
-}
-function detectContext(selection, ctxs) {
-  if ("$anchorCell" in selection) return null;
-  if (selection.node) return selection.node.type.name;
-  if (selection.empty) return null;
-  const fromCell = findCellNode(selection.$from);
-  if (fromCell) {
-    const toCell = 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";
-  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;
-}
-function filterBySchema(editor, contextName, schemaItems) {
-  if (contextName === "text" || contextName === "table") return schemaItems;
-  const schema = editor.state.schema;
-  if (!schema) return schemaItems;
-  const nodeType = schema.nodes[contextName];
-  if (!nodeType) return schemaItems;
-  return schemaItems.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);
-  });
-}
-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;
-}
-function 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;
-}
-
 // src/bubble-menu/trailingState.ts
 var INITIAL_TRAILING_STATE = {
   isNodeSelection: false,
@@ -1031,7 +926,8 @@ function computeTrailingState(editor, opts) {
   }
   return {
     isNodeSelection: isNode,
-    showColorPickerButton: opts.hasNotionColorPicker,
+    // Hidden without a live notionColorOpen listener: the trigger would be dead.
+    showColorPickerButton: opts.hasNotionColorPicker && editor.listenerCount("notionColorOpen") > 0,
     showBlockMenuButton: opts.hasBlockContextMenu,
     blockMenuButtonDisabled: blockMenuDisabled,
     currentTextColorVar: textVar,
@@ -1080,6 +976,15 @@ var DomternalBubbleMenu = class extends EventTarget {
   #activeMap = /* @__PURE__ */ new Map();
   #disabledMap = /* @__PURE__ */ new Map();
   #trailing = { ...INITIAL_TRAILING_STATE };
+  // Structure rebuilt only on an item-list change, so a pressed button lives.
+  #structureKey = null;
+  #buttonEls = /* @__PURE__ */ new Map();
+  // Icon markup last WRITTEN. `btn.innerHTML` returns the browser's
+  // re-serialisation, so comparing against it rewrites every render and
+  // replaces the glyph under the pointer. Keyed by element: names repeat.
+  #iconHtml = /* @__PURE__ */ new WeakMap();
+  #colorTriggerEl = null;
+  #blockMenuTriggerEl = null;
   // Dropdown state (text-align dropdown inside bubble menu)
   #openDropdown = null;
   #dropdownPanelEl = null;
@@ -1162,7 +1067,7 @@ var DomternalBubbleMenu = class extends EventTarget {
     if (this.#destroyed) return;
     this.#explicitItems = items;
     if (this.#maps) {
-      this.#defaultItemList = items ? resolveNames(items, this.#maps.itemMap, this.#maps.dropdownMap) : resolveNames(["bold", "italic", "underline"], this.#maps.itemMap, this.#maps.dropdownMap);
+      this.#defaultItemList = items ? resolveBubbleNames(items, this.#maps.itemMap, this.#maps.dropdownMap) : resolveBubbleNames(["bold", "italic", "underline"], this.#maps.itemMap, this.#maps.dropdownMap);
     }
     this.#updateResolvedItems();
     this.#updateStates();
@@ -1186,6 +1091,7 @@ var DomternalBubbleMenu = class extends EventTarget {
   setIcons(icons) {
     if (this.#destroyed) return;
     this.#icons = icons;
+    this.#structureKey = null;
     this.#scheduleRender();
   }
   /** Close any open dropdown (text-align). No-op if nothing is open. */
@@ -1218,9 +1124,9 @@ var DomternalBubbleMenu = class extends EventTarget {
     const exts = ed.extensionManager.extensions;
     this.#hasNotionColorPicker = exts.some((e) => e.name === "notionColorPicker");
     this.#hasBlockContextMenu = exts.some((e) => e.name === "blockContextMenu");
-    this.#maps = buildItemMaps(ed);
+    this.#maps = buildBubbleItemMaps(ed);
     this.#effectiveContexts = this.#explicitContexts ?? (this.#explicitItems ? void 0 : defaultBubbleContexts(ed));
-    this.#defaultItemList = this.#explicitItems ? resolveNames(this.#explicitItems, this.#maps.itemMap, this.#maps.dropdownMap) : resolveNames(["bold", "italic", "underline"], this.#maps.itemMap, this.#maps.dropdownMap);
+    this.#defaultItemList = this.#explicitItems ? resolveBubbleNames(this.#explicitItems, this.#maps.itemMap, this.#maps.dropdownMap) : resolveBubbleNames(["bold", "italic", "underline"], this.#maps.itemMap, this.#maps.dropdownMap);
     const shouldShow = this.#shouldShowOpt ?? this.#buildDefaultShouldShow();
     const plugin = createBubbleMenuPlugin({
       pluginKey: this.#pluginKey,
@@ -1252,76 +1158,28 @@ var DomternalBubbleMenu = class extends EventTarget {
     this.#render();
   }
   #buildDefaultShouldShow() {
-    const contexts = this.#effectiveContexts;
-    const defaults = this.#maps?.bubbleDefaults;
-    if (contexts) {
-      return ({ state }) => {
-        const ctx = detectContext(
-          state.selection,
-          contexts
-        );
-        if (!ctx) return false;
-        if (ctx in contexts) {
-          const val = contexts[ctx];
-          if (val === null) return false;
-          return val === true || Array.isArray(val) && val.length > 0;
-        }
-        return defaults?.has(ctx) ?? false;
-      };
-    }
-    return ({ state }) => {
-      const sel = state.selection;
-      if (sel.empty) return false;
-      if (sel.node) return defaults?.has(sel.node.type.name) ?? false;
-      if (isInsideTableCell(sel.$from)) return false;
-      return sel.$from.parent.type.spec.marks !== "" || sel.$to.parent.type.spec.marks !== "";
-    };
+    const maps = this.#maps;
+    if (!maps) return () => false;
+    return createBubbleShouldShow(maps, this.#effectiveContexts);
   }
   // === State updates (called per transaction) ===
+  /**
+   * One call per transaction, into the resolver core owns. Every renderer
+   * asks the same question and has to get the same answer, so the answer is
+   * not written here.
+   */
   #updateResolvedItems() {
-    if (!this.#maps) return;
-    const ed = this.#editor;
-    const contexts = this.#effectiveContexts;
-    if (contexts) {
-      const ctx = detectContext(
-        ed.state.selection,
-        contexts
-      );
-      if (!ctx) {
-        this.#resolvedItems = [];
-        return;
-      }
-      if (ctx in contexts) {
-        const val = contexts[ctx];
-        if (val === null || Array.isArray(val) && val.length === 0) {
-          this.#resolvedItems = [];
-          return;
-        }
-        if (val === true) {
-          this.#resolvedItems = filterBySchema(ed, ctx, getFormatItems(this.#maps.itemMap));
-          return;
-        }
-        if (Array.isArray(val)) {
-          const resolved = resolveNames(val, this.#maps.itemMap, this.#maps.dropdownMap);
-          const buttons = resolved.filter(
-            (i) => i.type !== "separator"
-          );
-          const allowed = new Set(filterBySchema(ed, ctx, buttons).map((b) => b.name));
-          this.#resolvedItems = resolved.filter(
-            (i) => i.type === "separator" || allowed.has(i.name)
-          );
-          return;
-        }
-      }
-      this.#resolvedItems = this.#maps.bubbleDefaults.get(ctx) ?? [];
+    const maps = this.#maps;
+    if (!maps) {
+      this.#resolvedItems = [];
       return;
     }
-    const sel = ed.state.selection;
-    if (sel.node && this.#maps.bubbleDefaults.has(sel.node.type.name)) {
-      this.#resolvedItems = this.#maps.bubbleDefaults.get(sel.node.type.name) ?? [];
-    } else {
-      this.#resolvedItems = this.#defaultItemList;
-    }
+    this.#resolvedItems = resolveBubbleMenuItems({
+      editor: this.#editor,
+      maps,
+      contexts: this.#effectiveContexts,
+      fallbackItems: this.#defaultItemList
+    });
   }
   #updateStates() {
     const ed = this.#editor;
@@ -1362,19 +1220,51 @@ var DomternalBubbleMenu = class extends EventTarget {
       this.#render();
     });
   }
+  /** Signature of what decides which nodes exist; equal keys reuse the DOM. */
+  #computeStructureKey() {
+    const items = this.#resolvedItems.map(
+      (item) => item.type === "dropdown" ? `${item.type}:${item.name}:${item.items.map((sub) => sub.name).join(",")}` : `${item.type}:${item.name}`
+    ).join("|");
+    const t = this.#trailing;
+    return [
+      items,
+      t.showColorPickerButton && !t.isNodeSelection ? "color" : "",
+      t.showBlockMenuButton && !t.isNodeSelection ? "block" : "",
+      this.#customContent ? "custom" : ""
+    ].join("#");
+  }
+  /**
+   * Runs on every transaction, and pointer motion alone dispatches those. A
+   * render lands a frame late, so rebuilding wholesale can replace a button
+   * between mousedown and mouseup: the two events share no element and the
+   * browser fires no click at all. Structure only on an item-list change,
+   * state in place otherwise, as the toolbar does.
+   */
   #render() {
-    this.host.replaceChildren();
-    this.#cleanupDropdownFloating?.();
-    this.#cleanupDropdownFloating = null;
-    this.#dropdownAbortCtl?.abort();
-    this.#dropdownAbortCtl = null;
-    this.#dropdownPanelEl = null;
     if (this.#openDropdown !== null) {
       const stillExists = this.#resolvedItems.some(
         (item) => item.type === "dropdown" && item.name === this.#openDropdown
       );
-      if (!stillExists) this.#openDropdown = null;
+      if (!stillExists) {
+        this.#openDropdown = null;
+        this.#detachDropdown();
+      }
+    }
+    const key = this.#computeStructureKey();
+    if (key === this.#structureKey) {
+      this.#updateButtons();
+    } else {
+      this.#renderStructure();
+      this.#structureKey = key;
     }
+    this.#syncDropdownPanel();
+  }
+  #renderStructure() {
+    this.host.replaceChildren();
+    this.#buttonEls.clear();
+    this.#colorTriggerEl = null;
+    this.#blockMenuTriggerEl = null;
+    this.#detachDropdown();
     for (const item of this.#resolvedItems) {
       if (item.type === "separator") {
         this.host.appendChild(this.#createSeparator(item.name));
@@ -1385,12 +1275,18 @@ var DomternalBubbleMenu = class extends EventTarget {
       }
     }
     const t = this.#trailing;
-    if (t.showColorPickerButton && !t.isNodeSelection) {
-      this.host.appendChild(this.#createSeparator("trailing-sep-color"));
+    const showColor = t.showColorPickerButton && !t.isNodeSelection;
+    const showBlock = t.showBlockMenuButton && !t.isNodeSelection;
+    if (showColor) {
+      if (this.#resolvedItems.length > 0) {
+        this.host.appendChild(this.#createSeparator("trailing-sep-color"));
+      }
       this.host.appendChild(this.#createColorTrigger());
     }
-    if (t.showBlockMenuButton && !t.isNodeSelection) {
-      this.host.appendChild(this.#createSeparator("trailing-sep-block"));
+    if (showBlock) {
+      if (this.#resolvedItems.length > 0 || showColor) {
+        this.host.appendChild(this.#createSeparator("trailing-sep-block"));
+      }
       this.host.appendChild(this.#createBlockMenuTrigger());
     }
     if (this.#customContent) {
@@ -1415,13 +1311,14 @@ var DomternalBubbleMenu = class extends EventTarget {
     btn.setAttribute("aria-label", item.label);
     btn.setAttribute("aria-pressed", String(isActive));
     btn.title = item.label;
-    btn.innerHTML = resolveIcon(item.icon, this.#icons);
+    this.#setIconHtml(btn, resolveIcon(item.icon, this.#icons));
     btn.addEventListener("mousedown", (e) => {
       e.preventDefault();
     });
     btn.addEventListener("click", (e) => {
       this.#onButtonClick(item, e);
     });
+    this.#buttonEls.set(item.name, btn);
     return btn;
   }
   #createDropdownTrigger(dd) {
@@ -1441,7 +1338,7 @@ var DomternalBubbleMenu = class extends EventTarget {
     trigger.setAttribute("aria-label", dd.label);
     trigger.title = dd.label;
     trigger.dataset["dropdown"] = dd.name;
-    trigger.innerHTML = triggerHtml;
+    this.#setIconHtml(trigger, triggerHtml);
     trigger.addEventListener("mousedown", (e) => {
       e.preventDefault();
     });
@@ -1449,12 +1346,7 @@ var DomternalBubbleMenu = class extends EventTarget {
       this.#onDropdownToggle(dd);
     });
     wrapper.appendChild(trigger);
-    if (this.#openDropdown === dd.name) {
-      const panel = this.#createDropdownPanel(dd);
-      wrapper.appendChild(panel);
-      this.#dropdownPanelEl = panel;
-      this.#attachDropdownListeners(trigger, panel);
-    }
+    this.#buttonEls.set(dd.name, trigger);
     return wrapper;
   }
   #createDropdownPanel(dd) {
@@ -1472,6 +1364,7 @@ var DomternalBubbleMenu = class extends EventTarget {
       if (subActive) subBtn.classList.add("dm-toolbar-dropdown-item--active");
       subBtn.setAttribute("role", "menuitem");
       subBtn.setAttribute("aria-label", sub.label);
+      subBtn.dataset["dropdownItem"] = sub.name;
       subBtn.innerHTML = subHtml;
       subBtn.addEventListener("mousedown", (e) => {
         e.preventDefault();
@@ -1507,6 +1400,7 @@ var DomternalBubbleMenu = class extends EventTarget {
     btn.addEventListener("click", () => {
       this.openColorPicker(btn);
     });
+    this.#colorTriggerEl = btn;
     return btn;
   }
   #createBlockMenuTrigger() {
@@ -1525,8 +1419,83 @@ var DomternalBubbleMenu = class extends EventTarget {
     btn.addEventListener("click", () => {
       this.openBlockContextMenu(btn);
     });
+    this.#blockMenuTriggerEl = btn;
     return btn;
   }
+  // === In-place updates (the common render) ===
+  #updateButtons() {
+    for (const item of this.#resolvedItems) {
+      if (item.type === "separator") continue;
+      const el = this.#buttonEls.get(item.name);
+      if (!el) continue;
+      if (item.type === "dropdown") this.#updateDropdownTrigger(item, el);
+      else this.#updateButton(item, el);
+    }
+    const t = this.#trailing;
+    if (this.#colorTriggerEl) {
+      this.#colorTriggerEl.classList.toggle("dm-toolbar-button--active", t.hasAnyColor);
+      const glyph = this.#colorTriggerEl.querySelector(".dm-ncp-trigger-glyph");
+      if (glyph) glyph.style.color = t.currentTextColorVar ?? "";
+      const underline = this.#colorTriggerEl.querySelector(".dm-ncp-trigger-underline");
+      if (underline) underline.style.backgroundColor = t.currentBgColorVar ?? "";
+    }
+    if (this.#blockMenuTriggerEl) {
+      this.#blockMenuTriggerEl.disabled = t.blockMenuButtonDisabled;
+      this.#blockMenuTriggerEl.title = t.blockMenuButtonDisabled ? "Block actions (select within a single block)" : "More options";
+    }
+  }
+  #updateButton(item, btn) {
+    const isActive = this.#activeMap.get(item.name) ?? false;
+    const isDisabled = this.#disabledMap.get(item.name) ?? false;
+    btn.classList.toggle("dm-toolbar-button--active", isActive);
+    btn.disabled = isDisabled;
+    btn.setAttribute("aria-pressed", String(isActive));
+    this.#setIconHtml(btn, resolveIcon(item.icon, this.#icons));
+  }
+  /** Writes icon markup only when it differs from what was written last. */
+  #setIconHtml(el, html) {
+    if (this.#iconHtml.get(el) === html) return;
+    this.#iconHtml.set(el, html);
+    el.innerHTML = html;
+  }
+  #updateDropdownTrigger(dd, trigger) {
+    const dropdownActive = dd.items.some((sub) => this.#activeMap.get(sub.name) ?? false);
+    const activeChild = dd.dynamicIcon ? dd.items.find((sub) => this.#activeMap.get(sub.name) ?? false) : void 0;
+    const html = resolveIcon(activeChild?.icon ?? dd.icon, this.#icons) + DROPDOWN_CARET2;
+    trigger.classList.toggle("dm-toolbar-button--active", dropdownActive);
+    trigger.setAttribute("aria-expanded", String(this.#openDropdown === dd.name));
+    this.#setIconHtml(trigger, html);
+  }
+  /** Builds the open dropdown's panel, or refreshes the marks on an open one. */
+  #syncDropdownPanel() {
+    const open = this.#openDropdown;
+    if (open === null) {
+      if (this.#dropdownPanelEl) this.#detachDropdown();
+      return;
+    }
+    const dd = this.#resolvedItems.find(
+      (item) => item.type === "dropdown" && item.name === open
+    );
+    if (!dd) return;
+    const panel = this.#dropdownPanelEl;
+    if (panel?.isConnected === true) {
+      for (const sub of dd.items) {
+        const subBtn = panel.querySelector(`[data-dropdown-item="${sub.name}"]`);
+        subBtn?.classList.toggle(
+          "dm-toolbar-dropdown-item--active",
+          this.#activeMap.get(sub.name) ?? false
+        );
+      }
+      return;
+    }
+    const trigger = this.#buttonEls.get(open);
+    const wrapper = trigger?.parentElement;
+    if (!trigger || !wrapper) return;
+    const fresh = this.#createDropdownPanel(dd);
+    wrapper.appendChild(fresh);
+    this.#dropdownPanelEl = fresh;
+    this.#attachDropdownListeners(trigger, fresh);
+  }
   // === Event handlers ===
   #onButtonClick(item, event) {
     if (this.#openDropdown) this.closeDropdown();
@@ -1844,6 +1813,14 @@ var DomternalFloatingMenu = class extends EventTarget {
     }
   }
 };
+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];
+}
 var TOKEN_LABELS = {
   gray: "Gray",
   brown: "Brown",
@@ -1920,8 +1897,7 @@ var DomternalNotionColorPicker = class extends EventTarget {
     const ext = this.#editor.extensionManager.extensions.find(
       (e) => e.name === "notionColorPicker"
     );
-    const extOpts = ext?.options ?? null;
-    this.#palette = extOpts?.palette ? [...extOpts.palette] : [];
+    this.#palette = paletteFromExtensionOptions(ext?.options);
     this.#onOpen = (...args) => {
       const detail = args[0];
       const incoming = detail?.anchorElement;
@@ -2002,9 +1978,7 @@ var DomternalNotionColorPicker = class extends EventTarget {
     this.#editor.commands.setTextColorToken(token);
     this.#syncFromSelection();
     this.#updateActiveClasses();
-    this.dispatchEvent(
-      new CustomEvent("apply", { detail: { kind: "text", token } })
-    );
+    this.dispatchEvent(new CustomEvent("apply", { detail: { kind: "text", token } }));
   }
   /** Apply a background color token to the current selection. Picker stays open. */
   applyBg(token) {
@@ -2012,9 +1986,7 @@ var DomternalNotionColorPicker = class extends EventTarget {
     this.#editor.commands.setBackgroundColorToken(token);
     this.#syncFromSelection();
     this.#updateActiveClasses();
-    this.dispatchEvent(
-      new CustomEvent("apply", { detail: { kind: "bg", token } })
-    );
+    this.dispatchEvent(new CustomEvent("apply", { detail: { kind: "bg", token } }));
   }
   /** Display label for a palette token (title-case fallback). */
   tokenLabel(token) {
@@ -2224,9 +2196,7 @@ var DomternalNotionColorPicker = class extends EventTarget {
           return rect;
         }
         if (this.#anchorBubbleMenu?.isConnected) {
-          const fresh = this.#anchorBubbleMenu.querySelector(
-            ".dm-ncp-trigger"
-          );
+          const fresh = this.#anchorBubbleMenu.querySelector(".dm-ncp-trigger");
           if (fresh) {
             this.#anchor = fresh;
             const rect = fresh.getBoundingClientRect();
@@ -2296,15 +2266,13 @@ var DomternalNotionColorPicker = class extends EventTarget {
   #onPanelKeydown(event) {
     const cols = 5;
     if (!this.#panel) return;
-    const swatches = Array.from(
-      this.#panel.querySelectorAll(".dm-ncp-swatch")
-    );
+    const swatches = Array.from(this.#panel.querySelectorAll(".dm-ncp-swatch"));
     if (!swatches.length) return;
     const active = document.activeElement;
     if (!(active instanceof HTMLElement)) return;
     const idx = swatches.indexOf(active);
     if (idx === -1) return;
-    let next = idx;
+    let next;
     switch (event.key) {
       case "ArrowRight":
         event.preventDefault();
@@ -2531,11 +2499,7 @@ var DomternalEmojiPicker = class extends EventTarget {
     return panel;
   }
   #renderPanelChildren() {
-    return [
-      this.#renderSearch(),
-      this.#renderTabs(),
-      this.#renderGrid()
-    ];
+    return [this.#renderSearch(), this.#renderTabs(), this.#renderGrid()];
   }
   #renderSearch() {
     const wrapper = document.createElement("div");
@@ -2650,9 +2614,7 @@ var DomternalEmojiPicker = class extends EventTarget {
    */
   #setSearchQuery(value) {
     this.#searchQuery = value;
-    const input = this.#panel?.querySelector(
-      ".dm-emoji-picker-search input"
-    );
+    const input = this.#panel?.querySelector(".dm-emoji-picker-search input");
     if (input && input.value !== value) input.value = value;
   }
   /** Replace grid contents only (used when searchQuery changes). */
@@ -2716,9 +2678,7 @@ var DomternalEmojiPicker = class extends EventTarget {
   #onGridKeydown(event) {
     const grid = this.#panel?.querySelector(".dm-emoji-picker-grid");
     if (!grid) return;
-    const swatches = Array.from(
-      grid.querySelectorAll(".dm-emoji-swatch")
-    );
+    const swatches = Array.from(grid.querySelectorAll(".dm-emoji-swatch"));
     if (!swatches.length) return;
     const active = document.activeElement;
     const idx = active instanceof HTMLElement ? swatches.indexOf(active) : -1;
@@ -2730,7 +2690,7 @@ var DomternalEmojiPicker = class extends EventTarget {
       return;
     }
     const cols = 8;
-    let next = idx;
+    let next;
     switch (event.key) {
       case "ArrowRight":
         event.preventDefault();
@@ -2768,9 +2728,7 @@ var DomternalEmojiPicker = class extends EventTarget {
           offsetValue: 4
         });
       }
-      const input = this.#panel.querySelector(
-        ".dm-emoji-picker-search input"
-      );
+      const input = this.#panel.querySelector(".dm-emoji-picker-search input");
       input?.focus({ preventScroll: true });
     });
   }
@@ -2809,6 +2767,6 @@ var DomternalEmojiPicker = class extends EventTarget {
   }
 };
 
-export { DEFAULT_EXTENSIONS, DROPDOWN_CARET, DomternalBubbleMenu, DomternalEditor, DomternalEmojiPicker, DomternalFloatingMenu, DomternalNotionColorPicker, DomternalToolbar, INITIAL_TRAILING_STATE, assertBrowser, buildItemMaps, computeTrailingState, createIconCache, createPluginKey, detectContext, filterBySchema, getComputedStyleAtCursor, getFormatItems, getInlineStyleAtCursor, getTooltip, isBrowser, isInsideTableCell, renderIconInto, resolveIcon, resolveNames, subscribe };
+export { DEFAULT_EXTENSIONS, DROPDOWN_CARET, DomternalBubbleMenu, DomternalEditor, DomternalEmojiPicker, DomternalFloatingMenu, DomternalNotionColorPicker, DomternalToolbar, INITIAL_TRAILING_STATE, assertBrowser, computeTrailingState, createIconCache, createPluginKey, getComputedStyleAtCursor, getInlineStyleAtCursor, getTooltip, isBrowser, renderIconInto, resolveIcon, subscribe };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map