@domternal/react 0.14.0 → 1.0.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo, useCallback, useSyncExternalStore, useContext, Fragment, useLayoutEffect, createElement } from 'react';
-import { Document, Paragraph, Text, BaseKeymap, History, Editor, refocusEditorAfterCommand, positionFloatingOnce, PluginKey, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, positionFloating, ToolbarController, defaultBubbleContexts, createBubbleMenuPlugin } from '@domternal/core';
+import { Document, Paragraph, Text, BaseKeymap, History, Editor, refocusEditorAfterCommand, positionFloatingOnce, PluginKey, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, positionFloating, ToolbarController, defaultBubbleContexts, buildBubbleItemMaps, createBubbleShouldShow, createBubbleMenuPlugin, resolveBubbleNames, resolveBubbleMenuItems } from '@domternal/core';
 export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -53,7 +53,8 @@ function useEditor(options = {}, deps) {
       extensions: [...defaults, ...extensions],
       content: initialContent,
       editable,
-      autofocus: focus
+      autofocus: focus,
+      ...options.preset ? { preset: options.preset } : {}
     });
     wireEvents(ed);
     instanceRef.current = ed;
@@ -96,6 +97,7 @@ function useEditor(options = {}, deps) {
       const mount = editorRef.current;
       if (mount && existing.view.dom.parentElement !== mount) {
         mount.appendChild(existing.view.dom);
+        existing.adoptPresetClass();
       }
       callbacksRef.current.onCreate?.(existing);
       return () => {
@@ -260,6 +262,7 @@ function useToolbarController(editor, layout) {
   const toolbarRef = useRef(null);
   const cleanupFloatingRef = useRef(null);
   const clickOutsideRef = useRef(null);
+  const escapeKeydownRef = useRef(null);
   const dismissOverlayRef = useRef(null);
   const editorElRef = useRef(null);
   const syncStateRafRef = useRef(0);
@@ -295,6 +298,18 @@ function useToolbarController(editor, layout) {
     };
     clickOutsideRef.current = clickOutside;
     document.addEventListener("mousedown", clickOutside);
+    const escapeKeydown = (e) => {
+      if (!controller.openDropdown) return;
+      if (e.key !== "Escape") return;
+      if (toolbarRef.current?.contains(document.activeElement)) return;
+      cleanupFloatingRef.current?.();
+      cleanupFloatingRef.current = null;
+      controller.closeDropdown();
+      syncState();
+      e.preventDefault();
+    };
+    escapeKeydownRef.current = escapeKeydown;
+    document.addEventListener("keydown", escapeKeydown);
     const editorEl = editor.view.dom.closest(".dm-editor");
     editorElRef.current = editorEl;
     if (editorEl) {
@@ -317,6 +332,10 @@ function useToolbarController(editor, layout) {
         document.removeEventListener("mousedown", clickOutsideRef.current);
         clickOutsideRef.current = null;
       }
+      if (escapeKeydownRef.current) {
+        document.removeEventListener("keydown", escapeKeydownRef.current);
+        escapeKeydownRef.current = null;
+      }
       if (dismissOverlayRef.current && editorElRef.current) {
         editorElRef.current.removeEventListener("dm:dismiss-overlays", dismissOverlayRef.current);
         dismissOverlayRef.current = null;
@@ -603,6 +622,19 @@ function getInlineStyleAtCursor(editor, prop) {
     return null;
   }
 }
+function useInnerHtml() {
+  const cache = useRef(null);
+  cache.current ??= /* @__PURE__ */ new Map();
+  return (html) => {
+    const store = cache.current;
+    let prop = store.get(html);
+    if (prop === void 0) {
+      prop = { __html: html };
+      store.set(html, prop);
+    }
+    return prop;
+  };
+}
 function ToolbarButton({
   item,
   isActive,
@@ -614,6 +646,7 @@ function ToolbarButton({
   onClick,
   onFocus
 }) {
+  const innerHtml = useInnerHtml();
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -625,7 +658,7 @@ function ToolbarButton({
       title: tooltip,
       tabIndex,
       disabled: isDisabled,
-      dangerouslySetInnerHTML: { __html: iconHtml },
+      dangerouslySetInnerHTML: innerHtml(iconHtml),
       onMouseDown: (e) => {
         e.preventDefault();
       },
@@ -644,6 +677,7 @@ function ToolbarDropdownPanel({
   getCachedItemContent,
   onItemClick
 }) {
+  const innerHtml = useInnerHtml();
   if (dropdown.layout === "grid") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -678,7 +712,7 @@ function ToolbarDropdownPanel({
               role: "menuitem",
               tabIndex: -1,
               "aria-label": sub.label,
-              dangerouslySetInnerHTML: { __html: getCachedItemContent(sub.icon, sub.label) },
+              dangerouslySetInnerHTML: innerHtml(getCachedItemContent(sub.icon, sub.label)),
               onMouseDown: (e) => {
                 e.preventDefault();
               },
@@ -709,7 +743,7 @@ function ToolbarDropdownPanel({
           ref: (el) => {
             if (el && sub.style) el.setAttribute("style", sub.style);
           },
-          dangerouslySetInnerHTML: { __html: getCachedItemContent(sub.icon, sub.label, dropdown.displayMode) },
+          dangerouslySetInnerHTML: innerHtml(getCachedItemContent(sub.icon, sub.label, dropdown.displayMode)),
           onMouseDown: (e) => {
             e.preventDefault();
           },
@@ -735,6 +769,7 @@ function ToolbarDropdown({
   onItemClick,
   onFocus
 }) {
+  const innerHtml = useInnerHtml();
   return /* @__PURE__ */ jsxs("div", { className: "dm-toolbar-dropdown-wrapper", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -748,7 +783,7 @@ function ToolbarDropdown({
         tabIndex,
         disabled: isDisabled,
         "data-dropdown": dropdown.name,
-        dangerouslySetInnerHTML: { __html: triggerHtml },
+        dangerouslySetInnerHTML: innerHtml(triggerHtml),
         onMouseDown: (e) => {
           e.preventDefault();
         },
@@ -912,20 +947,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 } = options;
   const contexts = explicitContexts ?? (items ? void 0 : editor ? defaultBubbleContexts(editor) : void 0);
@@ -936,8 +957,6 @@ function useBubbleMenu(options) {
   const [trailing, setTrailing] = useState(INITIAL_TRAILING_STATE);
   const activeMapRef = useRef(/* @__PURE__ */ new Map());
   const disabledMapRef = useRef(/* @__PURE__ */ new Map());
-  const itemMapRef = useRef(/* @__PURE__ */ new Map());
-  const bubbleDefaultsRef = useRef(/* @__PURE__ */ new Map());
   const resolvedItemsRef = useRef([]);
   const editorRef = useRef(editor);
   editorRef.current = editor;
@@ -946,127 +965,8 @@ function useBubbleMenu(options) {
     const exts = editor.extensionManager.extensions;
     const hasNotionColorPicker = exts.some((e) => e.name === "notionColorPicker");
     const hasBlockContextMenu = exts.some((e) => e.name === "blockContextMenu");
-    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);
-        }
-      }
-    }
-    itemMapRef.current = itemMap;
-    const 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 editor.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);
-    }
-    bubbleDefaultsRef.current = bubbleDefaults;
-    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 = 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);
-      });
-    };
-    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 !== "";
-        };
-      }
-    }
+    const maps = buildBubbleItemMaps(editor);
+    const shouldShowFn = shouldShow ?? createBubbleShouldShow(maps, contexts);
     const pluginKey = pluginKeyRef.current;
     const plugin = createBubbleMenuPlugin({
       pluginKey,
@@ -1082,13 +982,15 @@ function useBubbleMenu(options) {
       resolvedItemsRef.current = newItems;
       setResolvedItems(newItems);
     };
-    if (contexts) {
-      updateContextItems(editor, 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 = (ed) => {
+      setItems(resolveBubbleMenuItems({ editor: ed, maps, contexts, fallbackItems }));
+    };
+    refreshItems(editor);
     const updateStates = (ed) => {
       let canProxy = null;
       try {
@@ -1113,7 +1015,6 @@ function useBubbleMenu(options) {
         trackButton(item);
       }
     };
-    const defaultItems = items ? resolveNames(items) : resolveNames(["bold", "italic", "underline"]);
     const syncTrailingState = (ed) => {
       const sel = ed.state.selection;
       const isNode = !!sel.node;
@@ -1140,7 +1041,8 @@ function useBubbleMenu(options) {
       }
       setTrailing({
         isNodeSelection: isNode,
-        showColorPickerButton: hasNotionColorPicker,
+        // Hidden without a live notionColorOpen listener: the trigger would be dead.
+        showColorPickerButton: hasNotionColorPicker && ed.listenerCount("notionColorOpen") > 0,
         showBlockMenuButton: hasBlockContextMenu,
         blockMenuButtonDisabled: blockMenuDisabled,
         currentTextColorVar: textVar,
@@ -1149,16 +1051,7 @@ function useBubbleMenu(options) {
       });
     };
     const transactionHandler = () => {
-      if (contexts) {
-        updateContextItems(editor, contexts, detectContext, resolveNames, getFormatItems, filterBySchema, bubbleDefaults, setItems);
-      } else {
-        const sel = editor.state.selection;
-        if (sel.node && bubbleDefaults.has(sel.node.type.name)) {
-          setItems(bubbleDefaults.get(sel.node.type.name) ?? []);
-        } else {
-          setItems(defaultItems);
-        }
-      }
+      refreshItems(editor);
       updateStates(editor);
       syncTrailingState(editor);
       setActiveVersion((v) => v + 1);
@@ -1173,30 +1066,6 @@ function useBubbleMenu(options) {
       }
     };
   }, [editor]);
-  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.current.get(item.name) ?? false;
   };
@@ -1297,6 +1166,9 @@ function DomternalBubbleMenu({
   }, []);
   const colorBtnRef = useRef(null);
   const blockMenuBtnRef = useRef(null);
+  const innerHtml = useInnerHtml();
+  const showColor = trailing.showColorPickerButton && !trailing.isNodeSelection;
+  const showBlock = trailing.showBlockMenuButton && !trailing.isNodeSelection;
   return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "dm-bubble-menu", role: "toolbar", "aria-label": "Text formatting", children: [
     resolvedItems.map((item) => {
       if (item.type === "separator") {
@@ -1335,7 +1207,7 @@ function DomternalBubbleMenu({
           title: btn.label,
           "aria-label": btn.label,
           "aria-pressed": active,
-          dangerouslySetInnerHTML: { __html: getCachedHtml(btn.icon) },
+          dangerouslySetInnerHTML: innerHtml(getCachedHtml(btn.icon)),
           onMouseDown: (e) => {
             e.preventDefault();
           },
@@ -1346,8 +1218,8 @@ function DomternalBubbleMenu({
         btn.name
       );
     }),
-    trailing.showColorPickerButton && !trailing.isNodeSelection && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx("span", { className: "dm-toolbar-separator", role: "separator" }),
+    showColor && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      resolvedItems.length > 0 && /* @__PURE__ */ jsx("span", { className: "dm-toolbar-separator", role: "separator" }),
       /* @__PURE__ */ jsxs(
         "button",
         {
@@ -1383,8 +1255,8 @@ function DomternalBubbleMenu({
         }
       )
     ] }),
-    trailing.showBlockMenuButton && !trailing.isNodeSelection && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx("span", { className: "dm-toolbar-separator", role: "separator" }),
+    showBlock && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      (resolvedItems.length > 0 || showColor) && /* @__PURE__ */ jsx("span", { className: "dm-toolbar-separator", role: "separator" }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -1395,7 +1267,7 @@ function DomternalBubbleMenu({
           title: trailing.blockMenuButtonDisabled ? "Block actions (select within a single block)" : "More options",
           "aria-label": "More options",
           "aria-haspopup": "menu",
-          dangerouslySetInnerHTML: { __html: getCachedHtml("dotsThree") },
+          dangerouslySetInnerHTML: innerHtml(getCachedHtml("dotsThree")),
           onMouseDown: (e) => {
             e.preventDefault();
           },
@@ -1420,6 +1292,7 @@ function BubbleDropdown({
 }) {
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
+  const innerHtml = useInnerHtml();
   const dropdownActive = dropdown.items.some((sub) => isItemActive(sub));
   const activeChild = dropdown.dynamicIcon ? dropdown.items.find((sub) => isItemActive(sub)) : void 0;
   const triggerIcon = activeChild?.icon ?? dropdown.icon;
@@ -1471,7 +1344,7 @@ function BubbleDropdown({
         "aria-label": dropdown.label,
         title: dropdown.label,
         "data-dropdown": dropdown.name,
-        dangerouslySetInnerHTML: { __html: triggerHtml },
+        dangerouslySetInnerHTML: innerHtml(triggerHtml),
         onMouseDown: (e) => {
           e.preventDefault();
         },
@@ -1496,7 +1369,7 @@ function BubbleDropdown({
               className: `dm-toolbar-dropdown-item${subActive ? " dm-toolbar-dropdown-item--active" : ""}`,
               role: "menuitem",
               "aria-label": sub.label,
-              dangerouslySetInnerHTML: { __html: subHtml },
+              dangerouslySetInnerHTML: innerHtml(subHtml),
               onMouseDown: (e) => {
                 e.preventDefault();
               },
@@ -1682,6 +1555,7 @@ function FloatingMenuItemButton({
   iconHtml,
   onClick
 }) {
+  const innerHtml = useInnerHtml();
   const handleClick = useCallback(() => {
     onClick(item);
   }, [item, onClick]);
@@ -1708,7 +1582,7 @@ function FloatingMenuItemButton({
           {
             className: "dm-floating-menu-item-icon",
             "aria-hidden": "true",
-            dangerouslySetInnerHTML: { __html: iconHtml }
+            dangerouslySetInnerHTML: innerHtml(iconHtml)
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "dm-floating-menu-item-label", children: item.label }),
@@ -1918,10 +1792,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);
@@ -1929,7 +1803,10 @@ function categoryIcon(cat) {
 function formatName(name) {
   return name.replace(/_/g, " ");
 }
-function DomternalEmojiPicker({ editor: editorProp, emojis }) {
+function DomternalEmojiPicker({
+  editor: editorProp,
+  emojis
+}) {
   const { editor: contextEditor } = useCurrentEditor();
   const editor = editorProp ?? contextEditor;
   const {
@@ -1961,7 +1838,7 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
       return;
     }
     const cols = 8;
-    let next = idx;
+    let next;
     switch (event.key) {
       case "ArrowRight":
         event.preventDefault();
@@ -2099,6 +1976,7 @@ function DomternalContent({ className }) {
     const editorDom = editor.view.dom;
     if (editorDom.parentElement !== container) {
       container.appendChild(editorDom);
+      editor.adoptPresetClass();
     }
   }, [editor]);
   const classes = className ? `dm-editor ${className}` : "dm-editor";
@@ -2203,6 +2081,7 @@ function EditorContent({ editor, innerRef, ...htmlProps }) {
     const editorDom = editor.view.dom;
     if (editorDom.parentElement !== container) {
       container.appendChild(editorDom);
+      editor.adoptPresetClass();
     }
     return () => {
     };
@@ -2220,6 +2099,14 @@ function EditorContent({ editor, innerRef, ...htmlProps }) {
     }
   );
 }
+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",
@@ -2277,22 +2164,24 @@ function useNotionColorPicker(options) {
     setCurrentTextToken(attrs.colorToken ?? null);
     setCurrentBgToken(attrs.backgroundColorToken ?? null);
   }, []);
-  const close = useCallback((opts = {}) => {
-    if (!isOpenRef.current) return;
-    setIsOpen(false);
-    setStorageOpen2(false);
-    if (opts.refocus) {
-      editorRef.current?.view.focus();
-    }
-    setAnchorEl(null);
-  }, [setStorageOpen2]);
+  const close = useCallback(
+    (opts = {}) => {
+      if (!isOpenRef.current) return;
+      setIsOpen(false);
+      setStorageOpen2(false);
+      if (opts.refocus) {
+        editorRef.current?.view.focus();
+      }
+      setAnchorEl(null);
+    },
+    [setStorageOpen2]
+  );
   useEffect(() => {
     if (!editor || editor.isDestroyed) return;
     const host = editor.view.dom.closest(".dm-editor") ?? null;
     setHostEl(host);
     const ext = editor.extensionManager.extensions.find((e) => e.name === "notionColorPicker");
-    const extOptions = ext?.options ?? null;
-    setPalette(extOptions?.palette ? [...extOptions.palette] : []);
+    setPalette(paletteFromExtensionOptions(ext?.options));
     const onOpen = (...args) => {
       const detail = args[0];
       const incomingAnchor = detail?.anchorElement;
@@ -2330,35 +2219,49 @@ function useNotionColorPicker(options) {
     if (!isOpen) return;
     const controller = new AbortController();
     const { signal } = controller;
-    document.addEventListener("mousedown", (e) => {
-      const target = e.target;
-      if (!target) return;
-      if (panelRef.current?.contains(target)) return;
-      if (anchorRef.current?.contains(target)) return;
-      close({ refocus: false });
-    }, { signal });
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape" && isOpenRef.current) {
-        e.preventDefault();
-        close({ refocus: true });
-      }
-    }, { signal });
+    document.addEventListener(
+      "mousedown",
+      (e) => {
+        const target = e.target;
+        if (!target) return;
+        if (panelRef.current?.contains(target)) return;
+        if (anchorRef.current?.contains(target)) return;
+        close({ refocus: false });
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key === "Escape" && isOpenRef.current) {
+          e.preventDefault();
+          close({ refocus: true });
+        }
+      },
+      { signal }
+    );
     return () => {
       controller.abort();
     };
   }, [isOpen, close]);
-  const applyText = useCallback((token) => {
-    const ed = editorRef.current;
-    if (!ed) return;
-    ed.commands.setTextColorToken(token);
-    syncFromSelection();
-  }, [syncFromSelection]);
-  const applyBg = useCallback((token) => {
-    const ed = editorRef.current;
-    if (!ed) return;
-    ed.commands.setBackgroundColorToken(token);
-    syncFromSelection();
-  }, [syncFromSelection]);
+  const applyText = useCallback(
+    (token) => {
+      const ed = editorRef.current;
+      if (!ed) return;
+      ed.commands.setTextColorToken(token);
+      syncFromSelection();
+    },
+    [syncFromSelection]
+  );
+  const applyBg = useCallback(
+    (token) => {
+      const ed = editorRef.current;
+      if (!ed) return;
+      ed.commands.setBackgroundColorToken(token);
+      syncFromSelection();
+    },
+    [syncFromSelection]
+  );
   const tokenLabel = useCallback((token) => {
     return TOKEN_LABELS[token] ?? token.charAt(0).toUpperCase() + token.slice(1);
   }, []);
@@ -2366,14 +2269,12 @@ function useNotionColorPicker(options) {
     const cols = 5;
     const root = panelRef.current;
     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();