@domternal/vue 0.14.0 → 1.0.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, computed, Fragment, ref, watch, shallowRef, onMounted, nextTick, onScopeDispose, watchEffect, Teleport, inject, provide, getCurrentInstance, customRef, markRaw, shallowReactive, render } from 'vue';
-import { positionFloatingOnce, PluginKey, positionFloating, ToolbarController, refocusEditorAfterCommand, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, defaultBubbleContexts, createBubbleMenuPlugin, Document, Paragraph, Text, BaseKeymap, History, Editor } from '@domternal/core';
+import { positionFloatingOnce, PluginKey, positionFloating, ToolbarController, refocusEditorAfterCommand, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, defaultBubbleContexts, buildBubbleItemMaps, createBubbleShouldShow, createBubbleMenuPlugin, resolveBubbleNames, Document, Paragraph, Text, BaseKeymap, History, Editor, resolveBubbleMenuItems } from '@domternal/core';
 export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
 
 // src/useEditor.ts
@@ -33,7 +33,8 @@ function useEditor(options = {}) {
       extensions: [...defaults, ...extensions],
       content: initialContent,
       editable,
-      autofocus: focus
+      autofocus: focus,
+      ...options.preset ? { preset: options.preset } : {}
     });
     markRaw(ed);
     wireEvents(ed);
@@ -69,6 +70,7 @@ function useEditor(options = {}) {
       const mount = editorRef.value;
       if (mount && ed.view.dom.parentElement !== mount) {
         mount.appendChild(ed.view.dom);
+        ed.adoptPresetClass();
       }
       return;
     }
@@ -279,6 +281,7 @@ function useToolbarController(editor, layout) {
   const toolbarRef = ref();
   let cleanupFloating = null;
   let clickOutsideHandler = null;
+  let escapeHandler = null;
   let dismissOverlayHandler = null;
   let editorEl = null;
   let syncStateRaf = 0;
@@ -315,6 +318,17 @@ function useToolbarController(editor, layout) {
         }
       };
       document.addEventListener("mousedown", clickOutsideHandler);
+      escapeHandler = (e) => {
+        if (!controller?.openDropdown) return;
+        if (e.key !== "Escape") return;
+        if (toolbarRef.value?.contains(document.activeElement)) return;
+        cleanupFloating?.();
+        cleanupFloating = null;
+        controller.closeDropdown();
+        syncState();
+        e.preventDefault();
+      };
+      document.addEventListener("keydown", escapeHandler);
       editorEl = ed.view.dom.closest(".dm-editor");
       if (editorEl) {
         dismissOverlayHandler = () => {
@@ -338,6 +352,10 @@ function useToolbarController(editor, layout) {
       document.removeEventListener("mousedown", clickOutsideHandler);
       clickOutsideHandler = null;
     }
+    if (escapeHandler) {
+      document.removeEventListener("keydown", escapeHandler);
+      escapeHandler = null;
+    }
     if (dismissOverlayHandler && editorEl) {
       editorEl.removeEventListener("dm:dismiss-overlays", dismissOverlayHandler);
       dismissOverlayHandler = null;
@@ -848,11 +866,9 @@ var DomternalToolbar = defineComponent({
       computed(() => props.editor ?? contextEditor.value),
       props.layout
     );
-    const {
-      getCachedIcon,
-      getCachedItemContent,
-      getDropdownTriggerHtml
-    } = useToolbarIcons(props.icons);
+    const { getCachedIcon, getCachedItemContent, getDropdownTriggerHtml } = useToolbarIcons(
+      props.icons
+    );
     const { getTooltip } = useTooltip();
     const { onKeyDown } = useKeyboardNav(controllerRef, toolbarRef, closeDropdown);
     function onButtonClick(item, event) {
@@ -932,7 +948,9 @@ var DomternalToolbar = defineComponent({
                 }
                 if (item.type === "dropdown") {
                   const dd = item;
-                  const activeItem = dd.items.find((sub) => controllerRef.current?.activeMap.get(sub.name));
+                  const activeItem = dd.items.find(
+                    (sub) => controllerRef.current?.activeMap.get(sub.name)
+                  );
                   let triggerHtml = getDropdownTriggerHtml(dd, activeItem);
                   if (dd.dynamicLabel && !activeItem && dd.computedStyleProperty) {
                     let computed7;
@@ -982,20 +1000,6 @@ var INITIAL_TRAILING_STATE = {
   currentBgColorVar: null,
   hasAnyColor: false
 };
-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;
-}
 function useBubbleMenu(options) {
   const { editor, shouldShow, placement = "top", offset = 8, updateDelay = 0, items, contexts: explicitContexts, icons: iconsRef } = options;
   const menuRef = ref();
@@ -1008,9 +1012,7 @@ function useBubbleMenu(options) {
   const trailing = shallowRef(INITIAL_TRAILING_STATE);
   const activeMapRef = /* @__PURE__ */ new Map();
   const disabledMapRef = /* @__PURE__ */ new Map();
-  let itemMap;
-  let dropdownMap;
-  let bubbleDefaults;
+  let maps;
   let currentResolvedItems = [];
   let initialized = false;
   let stopEditorWatch = null;
@@ -1021,125 +1023,8 @@ function useBubbleMenu(options) {
     const exts = ed.extensionManager.extensions;
     const hasNotionColorPicker = exts.some((e) => e.name === "notionColorPicker");
     const hasBlockContextMenu = exts.some((e) => e.name === "blockContextMenu");
-    itemMap = /* @__PURE__ */ new Map();
-    dropdownMap = /* @__PURE__ */ new Map();
-    for (const item of ed.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);
-        }
-      }
-    }
-    bubbleDefaults = /* @__PURE__ */ new Map();
-    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 ed.toolbarItems) {
-      if (item.type === "button") addItem(item);
-      else if (item.type === "dropdown") {
-        for (const sub of item.items) addItem(sub);
-      }
-    }
-    for (const [ctx, ctxItems] of byCtx) {
-      ctxItems.sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
-      const result = [];
-      let lastGroup;
-      let sepIdx = 0;
-      for (const item of ctxItems) {
-        if (lastGroup !== void 0 && item.group !== lastGroup) {
-          result.push({ type: "separator", name: `bsep-${String(sepIdx++)}` });
-        }
-        result.push(item);
-        lastGroup = item.group;
-      }
-      bubbleDefaults.set(ctx, result);
-    }
-    const 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 = dropdownMap.get(name);
-          if (dropdown) {
-            result.push(dropdown);
-            continue;
-          }
-          const item = itemMap.get(name);
-          if (item) result.push(item);
-        }
-      }
-      return result;
-    };
-    const getFormatItems = () => {
-      return Array.from(itemMap.values()).filter((item) => item.group === "format").sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
-    };
-    const 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;
-    };
-    const filterBySchema = (contextName, schemaItems) => {
-      if (contextName === "text" || contextName === "table") return schemaItems;
-      const schema = ed.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);
-      });
-    };
-    let shouldShowFn = shouldShow;
-    if (!shouldShowFn) {
-      if (contexts) {
-        shouldShowFn = ({ state }) => {
-          const context = detectContext(state.selection, contexts);
-          if (!context) return false;
-          if (context in contexts) {
-            const val = contexts[context];
-            if (val === null) return false;
-            return val === true || Array.isArray(val) && val.length > 0;
-          }
-          return bubbleDefaults.has(context);
-        };
-      } else {
-        shouldShowFn = ({ state }) => {
-          if (state.selection.empty) return false;
-          if (state.selection.node) return 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 !== "";
-        };
-      }
-    }
+    maps = buildBubbleItemMaps(ed);
+    const shouldShowFn = shouldShow ?? createBubbleShouldShow(maps, contexts);
     const plugin = createBubbleMenuPlugin({
       pluginKey,
       editor: ed,
@@ -1154,13 +1039,15 @@ function useBubbleMenu(options) {
       currentResolvedItems = newItems;
       resolvedItems.value = newItems;
     };
-    if (contexts) {
-      updateContextItems(ed, contexts, detectContext, resolveNames, getFormatItems, filterBySchema, bubbleDefaults, setItems);
-    } else if (items) {
-      setItems(resolveNames(items));
-    } else {
-      setItems(resolveNames(["bold", "italic", "underline"]));
-    }
+    const fallbackItems = resolveBubbleNames(
+      items ?? ["bold", "italic", "underline"],
+      maps.itemMap,
+      maps.dropdownMap
+    );
+    const refreshItems = () => {
+      setItems(resolveBubbleMenuItems({ editor: ed, maps, contexts, fallbackItems }));
+    };
+    refreshItems();
     const updateStates = (currentEd) => {
       let canProxy = null;
       try {
@@ -1185,7 +1072,6 @@ function useBubbleMenu(options) {
         trackButton(item);
       }
     };
-    const defaultItems = items ? resolveNames(items) : resolveNames(["bold", "italic", "underline"]);
     const syncTrailingState = (currentEd) => {
       const sel = currentEd.state.selection;
       const isNode = !!sel.node;
@@ -1212,7 +1098,8 @@ function useBubbleMenu(options) {
       }
       trailing.value = {
         isNodeSelection: isNode,
-        showColorPickerButton: hasNotionColorPicker,
+        // Hidden without a live notionColorOpen listener: the trigger would be dead.
+        showColorPickerButton: hasNotionColorPicker && currentEd.listenerCount("notionColorOpen") > 0,
         showBlockMenuButton: hasBlockContextMenu,
         blockMenuButtonDisabled: blockMenuDisabled,
         currentTextColorVar: textVar,
@@ -1221,16 +1108,7 @@ function useBubbleMenu(options) {
       };
     };
     const transactionHandler = () => {
-      if (contexts) {
-        updateContextItems(ed, contexts, detectContext, resolveNames, getFormatItems, filterBySchema, bubbleDefaults, setItems);
-      } else {
-        const sel = ed.state.selection;
-        if (sel.node && bubbleDefaults.has(sel.node.type.name)) {
-          setItems(bubbleDefaults.get(sel.node.type.name) ?? []);
-        } else {
-          setItems(defaultItems);
-        }
-      }
+      refreshItems();
       updateStates(ed);
       syncTrailingState(ed);
       activeVersion.value++;
@@ -1265,30 +1143,6 @@ function useBubbleMenu(options) {
       }
     }
   });
-  function updateContextItems(ed, ctxs, detectContext, resolveNames, getFormatItems, filterBySchema, defaults, setItems) {
-    const ctx = detectContext(ed.state.selection, ctxs);
-    if (!ctx) {
-      setItems([]);
-      return;
-    }
-    if (ctx in ctxs) {
-      const val = ctxs[ctx];
-      if (val === null || Array.isArray(val) && val.length === 0) {
-        setItems([]);
-        return;
-      }
-      if (val === true) {
-        setItems(filterBySchema(ctx, getFormatItems()));
-      } else if (Array.isArray(val)) {
-        const resolved = resolveNames(val);
-        const buttons = resolved.filter((i) => i.type !== "separator");
-        const filtered = new Set(filterBySchema(ctx, buttons).map((b) => b.name));
-        setItems(resolved.filter((i) => i.type === "separator" || filtered.has(i.name)));
-      }
-    } else {
-      setItems(defaults.get(ctx) ?? []);
-    }
-  }
   const isItemActive = (item) => {
     return activeMapRef.get(item.name) ?? false;
   };
@@ -1441,9 +1295,13 @@ var DomternalBubbleMenu = defineComponent({
           }
         }));
       }
-      if (t.showColorPickerButton && !t.isNodeSelection) {
+      const showColor = t.showColorPickerButton && !t.isNodeSelection;
+      const showBlock = t.showBlockMenuButton && !t.isNodeSelection;
+      if (showColor) {
+        if (children.length > 0) {
+          children.push(h("span", { class: "dm-toolbar-separator", role: "separator" }));
+        }
         children.push(
-          h("span", { class: "dm-toolbar-separator", role: "separator" }),
           h("button", {
             ref: colorBtnRef,
             type: "button",
@@ -1469,9 +1327,11 @@ var DomternalBubbleMenu = defineComponent({
           ])
         );
       }
-      if (t.showBlockMenuButton && !t.isNodeSelection) {
+      if (showBlock) {
+        if (children.length > 0) {
+          children.push(h("span", { class: "dm-toolbar-separator", role: "separator" }));
+        }
         children.push(
-          h("span", { class: "dm-toolbar-separator", role: "separator" }),
           h("button", {
             ref: blockMenuBtnRef,
             type: "button",
@@ -2028,10 +1888,10 @@ var CATEGORY_ICONS = {
   "Animals & Nature": "\u{1F431}",
   "Food & Drink": "\u{1F355}",
   "Travel & Places": "\u{1F697}",
-  "Activities": "\u26BD",
-  "Objects": "\u{1F4A1}",
-  "Symbols": "\u{1F523}",
-  "Flags": "\u{1F3C1}"
+  Activities: "\u26BD",
+  Objects: "\u{1F4A1}",
+  Symbols: "\u{1F523}",
+  Flags: "\u{1F3C1}"
 };
 function categoryIcon(cat) {
   return CATEGORY_ICONS[cat] ?? cat.charAt(0);
@@ -2079,7 +1939,7 @@ var DomternalEmojiPicker = defineComponent({
         return;
       }
       const cols = 8;
-      let next = idx;
+      let next;
       switch (event.key) {
         case "ArrowRight":
           event.preventDefault();
@@ -2108,20 +1968,24 @@ var DomternalEmojiPicker = defineComponent({
       swatches[next]?.focus();
     }
     function renderEmojiButton(item) {
-      return h("button", {
-        key: item.name,
-        type: "button",
-        class: "dm-emoji-swatch",
-        tabindex: -1,
-        title: formatName(item.name),
-        "aria-label": formatName(item.name),
-        onMousedown: (e) => {
-          e.preventDefault();
+      return h(
+        "button",
+        {
+          key: item.name,
+          type: "button",
+          class: "dm-emoji-swatch",
+          tabindex: -1,
+          title: formatName(item.name),
+          "aria-label": formatName(item.name),
+          onMousedown: (e) => {
+            e.preventDefault();
+          },
+          onClick: () => {
+            selectEmoji(item);
+          }
         },
-        onClick: () => {
-          selectEmoji(item);
-        }
-      }, item.emoji);
+        item.emoji
+      );
     }
     return () => {
       if (!isOpen.value) {
@@ -2147,21 +2011,28 @@ var DomternalEmojiPicker = defineComponent({
             "div",
             { class: "dm-emoji-picker-tabs", role: "tablist" },
             categoryNames.value.map(
-              (cat) => h("button", {
-                key: cat,
-                type: "button",
-                class: ["dm-emoji-picker-tab", activeCategory.value === cat && "dm-emoji-picker-tab--active"],
-                role: "tab",
-                "aria-selected": activeCategory.value === cat,
-                title: cat,
-                "aria-label": cat,
-                onMousedown: (e) => {
-                  e.preventDefault();
+              (cat) => h(
+                "button",
+                {
+                  key: cat,
+                  type: "button",
+                  class: [
+                    "dm-emoji-picker-tab",
+                    activeCategory.value === cat && "dm-emoji-picker-tab--active"
+                  ],
+                  role: "tab",
+                  "aria-selected": activeCategory.value === cat,
+                  title: cat,
+                  "aria-label": cat,
+                  onMousedown: (e) => {
+                    e.preventDefault();
+                  },
+                  onClick: () => {
+                    scrollToCategory(cat);
+                  }
                 },
-                onClick: () => {
-                  scrollToCategory(cat);
-                }
-              }, categoryIcon(cat))
+                categoryIcon(cat)
+              )
             )
           ),
           // Grid
@@ -2176,11 +2047,15 @@ var DomternalEmojiPicker = defineComponent({
               ] : [],
               // All categories
               ...categoryNames.value.flatMap((cat) => [
-                h("div", {
-                  key: `label-${cat}`,
-                  class: "dm-emoji-picker-category-label",
-                  "data-category": cat
-                }, cat),
+                h(
+                  "div",
+                  {
+                    key: `label-${cat}`,
+                    class: "dm-emoji-picker-category-label",
+                    "data-category": cat
+                  },
+                  cat
+                ),
                 ...(categories.value.get(cat) ?? []).map(renderEmojiButton)
               ])
             ]
@@ -2198,6 +2073,7 @@ var Domternal = defineComponent({
     extensions: { type: Array, default: void 0 },
     content: { type: [String, Object], default: "" },
     editable: { type: Boolean, default: true },
+    preset: { type: String, default: void 0 },
     autofocus: { type: [Boolean, String, Number], default: false },
     outputFormat: { type: String, default: "html" },
     immediatelyRender: { type: Boolean, default: false },
@@ -2213,6 +2089,7 @@ var Domternal = defineComponent({
       ...props.extensions && { extensions: props.extensions },
       content: props.content,
       editable: props.editable,
+      ...props.preset && { preset: props.preset },
       autofocus: props.autofocus,
       outputFormat: props.outputFormat,
       immediatelyRender: props.immediatelyRender,
@@ -2249,6 +2126,7 @@ var DomternalContent = defineComponent({
       const editorDom = ed.view.dom;
       if (editorDom.parentElement !== container) {
         container.appendChild(editorDom);
+        ed.adoptPresetClass();
       }
     });
     return () => {
@@ -2276,6 +2154,7 @@ var DomternalEditor = defineComponent({
     extensions: { type: Array, default: void 0 },
     content: { type: [String, Object], default: void 0 },
     editable: { type: Boolean, default: true },
+    preset: { type: String, default: void 0 },
     autofocus: { type: [Boolean, String, Number], default: false },
     immediatelyRender: { type: Boolean, default: false },
     outputFormat: { type: String, default: "html" },
@@ -2296,6 +2175,7 @@ var DomternalEditor = defineComponent({
       ...props.extensions && { extensions: props.extensions },
       content: props.modelValue ?? props.content ?? "",
       editable: props.editable,
+      ...props.preset && { preset: props.preset },
       autofocus: props.autofocus,
       immediatelyRender: props.immediatelyRender,
       outputFormat: props.outputFormat,
@@ -2385,6 +2265,7 @@ var EditorContent = defineComponent({
       const editorDom = editor.view.dom;
       if (editorDom.parentElement !== container) {
         container.appendChild(editorDom);
+        editor.adoptPresetClass();
       }
     });
     return () => h("div", {
@@ -2394,6 +2275,14 @@ var EditorContent = defineComponent({
     });
   }
 });
+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",
@@ -2458,8 +2347,7 @@ function useNotionColorPicker(options) {
       if (!ed || ed.isDestroyed) return;
       hostEl.value = ed.view.dom.closest(".dm-editor");
       const ext = ed.extensionManager.extensions.find((e) => e.name === "notionColorPicker");
-      const extOptions = ext?.options ?? null;
-      palette.value = extOptions?.palette ? [...extOptions.palette] : [];
+      palette.value = paletteFromExtensionOptions(ext?.options);
       const onOpen = (...args) => {
         const detail = args[0];
         const incomingAnchor = detail?.anchorElement;
@@ -2499,19 +2387,27 @@ function useNotionColorPicker(options) {
     if (!open) return;
     const controller = new AbortController();
     const { signal } = controller;
-    document.addEventListener("mousedown", (e) => {
-      const target = e.target;
-      if (!target) return;
-      if (panelRef.value?.contains(target)) return;
-      if (anchorEl.value?.contains(target)) return;
-      close({ refocus: false });
-    }, { signal });
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape" && isOpen.value) {
-        e.preventDefault();
-        close({ refocus: true });
-      }
-    }, { signal });
+    document.addEventListener(
+      "mousedown",
+      (e) => {
+        const target = e.target;
+        if (!target) return;
+        if (panelRef.value?.contains(target)) return;
+        if (anchorEl.value?.contains(target)) return;
+        close({ refocus: false });
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key === "Escape" && isOpen.value) {
+          e.preventDefault();
+          close({ refocus: true });
+        }
+      },
+      { signal }
+    );
     onCleanup(() => {
       controller.abort();
     });
@@ -2535,14 +2431,12 @@ function useNotionColorPicker(options) {
     const cols = 5;
     const root = panelRef.value;
     if (!root) return;
-    const swatches = Array.from(
-      root.querySelectorAll(".dm-ncp-swatch")
-    );
+    const swatches = Array.from(root.querySelectorAll(".dm-ncp-swatch"));
     if (!swatches.length) return;
     const active = document.activeElement;
     const idx = active ? swatches.indexOf(active) : -1;
     if (idx === -1) return;
-    let next = idx;
+    let next;
     switch (event.key) {
       case "ArrowRight":
         event.preventDefault();
@@ -2597,7 +2491,9 @@ var DomternalNotionColorPicker = defineComponent({
   },
   setup(props, { slots }) {
     const { editor: contextEditor } = useCurrentEditor();
-    const editorRef = computed(() => props.editor ?? contextEditor.value);
+    const editorRef = computed(
+      () => props.editor ?? contextEditor.value
+    );
     const api = useNotionColorPicker({ editor: editorRef });
     const {
       isOpen,
@@ -2626,7 +2522,9 @@ var DomternalNotionColorPicker = defineComponent({
           id2 = requestAnimationFrame(() => {
             if (!panel.isConnected) return;
             const active = panel.querySelector(".dm-ncp-swatch.dm-ncp-active");
-            const fallback = panel.querySelector('.dm-ncp-swatch--text[data-color="null"]');
+            const fallback = panel.querySelector(
+              '.dm-ncp-swatch--text[data-color="null"]'
+            );
             (active ?? fallback)?.focus({ preventScroll: true });
           });
         });
@@ -2660,21 +2558,23 @@ var DomternalNotionColorPicker = defineComponent({
                 applyText(null);
               }
             }),
-            ...pal.map((t) => h("button", {
-              key: t,
-              type: "button",
-              class: ["dm-ncp-swatch", "dm-ncp-swatch--text", tToken === t && "dm-ncp-active"],
-              "aria-pressed": tToken === t,
-              "data-color": t,
-              title: tokenLabel(t),
-              "aria-label": `${tokenLabel(t)} text`,
-              onMousedown: (e) => {
-                e.preventDefault();
-              },
-              onClick: () => {
-                applyText(t);
-              }
-            }))
+            ...pal.map(
+              (t) => h("button", {
+                key: t,
+                type: "button",
+                class: ["dm-ncp-swatch", "dm-ncp-swatch--text", tToken === t && "dm-ncp-active"],
+                "aria-pressed": tToken === t,
+                "data-color": t,
+                title: tokenLabel(t),
+                "aria-label": `${tokenLabel(t)} text`,
+                onMousedown: (e) => {
+                  e.preventDefault();
+                },
+                onClick: () => {
+                  applyText(t);
+                }
+              })
+            )
           ])
         ]),
         h("div", { class: "dm-ncp-section" }, [
@@ -2694,21 +2594,23 @@ var DomternalNotionColorPicker = defineComponent({
                 applyBg(null);
               }
             }),
-            ...pal.map((t) => h("button", {
-              key: t,
-              type: "button",
-              class: ["dm-ncp-swatch", "dm-ncp-swatch--bg", bToken === t && "dm-ncp-active"],
-              "aria-pressed": bToken === t,
-              "data-color": t,
-              title: `${tokenLabel(t)} background`,
-              "aria-label": `${tokenLabel(t)} background`,
-              onMousedown: (e) => {
-                e.preventDefault();
-              },
-              onClick: () => {
-                applyBg(t);
-              }
-            }))
+            ...pal.map(
+              (t) => h("button", {
+                key: t,
+                type: "button",
+                class: ["dm-ncp-swatch", "dm-ncp-swatch--bg", bToken === t && "dm-ncp-active"],
+                "aria-pressed": bToken === t,
+                "data-color": t,
+                title: `${tokenLabel(t)} background`,
+                "aria-label": `${tokenLabel(t)} background`,
+                onMousedown: (e) => {
+                  e.preventDefault();
+                },
+                onClick: () => {
+                  applyBg(t);
+                }
+              })
+            )
           ])
         ])
       ];
@@ -2719,19 +2621,23 @@ var DomternalNotionColorPicker = defineComponent({
       const slotChildren = slot ? slot({ api }) : void 0;
       const panelChildren = slotChildren ?? renderDefaultPanel();
       return h(Teleport, { to: hostEl.value }, [
-        h("div", {
-          ref: panelRef,
-          class: "dm-notion-color-picker",
-          "data-show": "",
-          "data-dm-editor-ui": "",
-          role: "dialog",
-          "aria-label": "Text and background color",
-          // Intentional non-modal: the picker doesn't trap focus (outside-click
-          // closes, editor stays interactive). `role="dialog"` defaults to
-          // modal=true for screen readers, so we explicitly opt out.
-          "aria-modal": "false",
-          onKeydown: onPanelKeydown
-        }, panelChildren)
+        h(
+          "div",
+          {
+            ref: panelRef,
+            class: "dm-notion-color-picker",
+            "data-show": "",
+            "data-dm-editor-ui": "",
+            role: "dialog",
+            "aria-label": "Text and background color",
+            // Intentional non-modal: the picker doesn't trap focus (outside-click
+            // closes, editor stays interactive). `role="dialog"` defaults to
+            // modal=true for screen readers, so we explicitly opt out.
+            "aria-modal": "false",
+            onKeydown: onPanelKeydown
+          },
+          panelChildren
+        )
       ]);
     };
   }