@domternal/react 0.6.2 → 0.7.1

package/dist/index.js

@@ -1,7 +1,9 @@
-import { createContext, forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo, useCallback, useSyncExternalStore, useContext, Fragment, createElement } from 'react';
-import { Editor, Document, Paragraph, Text, BaseKeymap, History, PluginKey, createFloatingMenuPlugin, ToolbarController, positionFloatingOnce, defaultIcons, createBubbleMenuPlugin } from '@domternal/core';
+import { createContext, forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo, useCallback, useSyncExternalStore, useContext, Fragment, useLayoutEffect, createElement } from 'react';
+import { Editor, Document, Paragraph, Text, BaseKeymap, History, positionFloatingOnce, PluginKey, FloatingMenuController, defaultIcons, positionFloating, ToolbarController, defaultBubbleContexts, createBubbleMenuPlugin } from '@domternal/core';
 export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { createFloatingMenuPlugin } from '@domternal/extension-block-menu';
+import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
 
 // src/useEditor.ts
@@ -95,7 +97,10 @@ function useEditor(options = {}, deps) {
   useEffect(() => {
     if (!deps || !instanceRef.current || instanceRef.current.isDestroyed) return;
     if (depsRef.current === deps) return;
-    if (depsRef.current && deps.length === depsRef.current.length && deps.every((d, i) => d === depsRef.current[i])) return;
+    const prevDeps = depsRef.current;
+    if (prevDeps?.length === deps.length && deps.every((d, i) => d === prevDeps[i])) {
+      return;
+    }
     const element = instanceRef.current.view.dom.parentElement ?? document.createElement("div");
     destroyCurrentEditor();
     const initialContent = pendingContentRef.current ?? "";
@@ -119,7 +124,13 @@ function useEditor(options = {}, deps) {
   return { editor, editorRef };
 }
 function useEditorState(editor, selector) {
-  if (selector) {
+  const isSelectorMode = typeof selector === "function";
+  const modeRef = useRef(null);
+  modeRef.current ??= isSelectorMode;
+  if (modeRef.current !== isSelectorMode) {
+    throw new Error("useEditorState selector mode must remain stable for a component instance.");
+  }
+  if (typeof selector === "function") {
     return useEditorStateSelector(editor, selector);
   }
   return useEditorStateFull(editor);
@@ -464,7 +475,7 @@ function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
     const idx = controllerRef.current?.focusedIndex ?? 0;
     const buttons = toolbarRef.current?.querySelectorAll(".dm-toolbar-button");
     buttons?.[idx]?.focus();
-  }, []);
+  }, [controllerRef, toolbarRef]);
   const focusDropdownItem = useCallback((direction, first) => {
     const panel = toolbarRef.current?.querySelector(".dm-toolbar-dropdown-panel");
     if (!panel) return;
@@ -478,7 +489,7 @@ function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
     const idx = items.indexOf(current);
     const next = idx === -1 ? direction > 0 ? 0 : items.length - 1 : (idx + direction + items.length) % items.length;
     items[next]?.focus();
-  }, []);
+  }, [toolbarRef]);
   const onKeyDown = useCallback((event) => {
     const controller = controllerRef.current;
     if (!controller) return;
@@ -501,7 +512,9 @@ function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
           const btn = document.activeElement;
           if (btn?.getAttribute("aria-haspopup") && btn.closest(".dm-toolbar")) {
             btn.click();
-            requestAnimationFrame(() => focusDropdownItem(0, true));
+            requestAnimationFrame(() => {
+              focusDropdownItem(0, true);
+            });
           }
         }
         break;
@@ -531,7 +544,7 @@ function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
         }
         break;
     }
-  }, [closeDropdown, focusCurrentButton, focusDropdownItem]);
+  }, [closeDropdown, focusCurrentButton, focusDropdownItem, controllerRef]);
   return { onKeyDown, focusCurrentButton };
 }
 
@@ -581,9 +594,15 @@ function ToolbarButton({
       tabIndex,
       disabled: isDisabled,
       dangerouslySetInnerHTML: { __html: iconHtml },
-      onMouseDown: (e) => e.preventDefault(),
-      onClick: (e) => onClick(item, e),
-      onFocus: () => onFocus(item.name)
+      onMouseDown: (e) => {
+        e.preventDefault();
+      },
+      onClick: (e) => {
+        onClick(item, e);
+      },
+      onFocus: () => {
+        onFocus(item.name);
+      }
     }
   );
 }
@@ -611,8 +630,12 @@ function ToolbarDropdownPanel({
               "aria-label": sub.label,
               title: sub.label,
               style: { backgroundColor: sub.color },
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: (e) => onItemClick(sub, e)
+              onMouseDown: (e) => {
+                e.preventDefault();
+              },
+              onClick: (e) => {
+                onItemClick(sub, e);
+              }
             },
             sub.name
           ) : /* @__PURE__ */ jsx(
@@ -624,8 +647,12 @@ function ToolbarDropdownPanel({
               tabIndex: -1,
               "aria-label": sub.label,
               dangerouslySetInnerHTML: { __html: getCachedItemContent(sub.icon, sub.label) },
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: (e) => onItemClick(sub, e)
+              onMouseDown: (e) => {
+                e.preventDefault();
+              },
+              onClick: (e) => {
+                onItemClick(sub, e);
+              }
             },
             sub.name
           )
@@ -651,8 +678,12 @@ function ToolbarDropdownPanel({
             if (el && sub.style) el.setAttribute("style", sub.style);
           },
           dangerouslySetInnerHTML: { __html: getCachedItemContent(sub.icon, sub.label, dropdown.displayMode) },
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: (e) => onItemClick(sub, e)
+          onMouseDown: (e) => {
+            e.preventDefault();
+          },
+          onClick: (e) => {
+            onItemClick(sub, e);
+          }
         },
         sub.name
       ))
@@ -686,9 +717,15 @@ function ToolbarDropdown({
         disabled: isDisabled,
         "data-dropdown": dropdown.name,
         dangerouslySetInnerHTML: { __html: triggerHtml },
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => onToggle(dropdown),
-        onFocus: () => onFocus(dropdown.name)
+        onMouseDown: (e) => {
+          e.preventDefault();
+        },
+        onClick: () => {
+          onToggle(dropdown);
+        },
+        onFocus: () => {
+          onFocus(dropdown.name);
+        }
       }
     ),
     isOpen && /* @__PURE__ */ jsx(
@@ -737,14 +774,16 @@ function DomternalToolbar({ editor: editorProp, icons, layout }) {
       return;
     }
     controllerRef.current?.executeCommand(item);
-    requestAnimationFrame(() => editor.view.focus());
-  }, [editor, closeDropdown]);
+    requestAnimationFrame(() => {
+      editor.view.focus();
+    });
+  }, [editor, closeDropdown, controllerRef]);
   const onDropdownItemClick = useCallback((item, event) => {
     if (!editor) return;
     let anchor;
     if (item.emitEvent) {
       const wrapper = event.currentTarget.closest(".dm-toolbar-dropdown-wrapper");
-      anchor = wrapper?.querySelector(".dm-toolbar-dropdown-trigger");
+      anchor = wrapper?.querySelector(".dm-toolbar-dropdown-trigger") ?? void 0;
     }
     closeDropdown();
     if (item.emitEvent) {
@@ -752,14 +791,16 @@ function DomternalToolbar({ editor: editorProp, icons, layout }) {
     } else {
       controllerRef.current?.executeCommand(item);
     }
-    requestAnimationFrame(() => editor.view.focus());
-  }, [editor, closeDropdown]);
+    requestAnimationFrame(() => {
+      editor.view.focus();
+    });
+  }, [editor, closeDropdown, controllerRef]);
   const onButtonFocus = useCallback((name) => {
     const index = controllerRef.current?.getFlatIndex(name) ?? -1;
     if (index >= 0) {
       controllerRef.current?.setFocusedIndex(index);
     }
-  }, []);
+  }, [controllerRef]);
   if (!editor) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -801,7 +842,7 @@ function DomternalToolbar({ editor: editorProp, icons, layout }) {
                 computed = getInlineStyleAtCursor(editor, dd.computedStyleProperty);
                 if (computed) {
                   const first = computed.split(",")[0]?.replace(/['"]+/g, "").trim();
-                  computed = first || null;
+                  computed = first ?? null;
                 }
               } else {
                 computed = getComputedStyleAtCursor(editor, dd.computedStyleProperty);
@@ -834,6 +875,15 @@ function DomternalToolbar({ editor: editorProp, icons, layout }) {
     }
   );
 }
+var INITIAL_TRAILING_STATE = {
+  isNodeSelection: false,
+  showColorPickerButton: false,
+  showBlockMenuButton: false,
+  blockMenuButtonDisabled: false,
+  currentTextColorVar: null,
+  currentBgColorVar: null,
+  hasAnyColor: false
+};
 function isInsideTableCell($pos) {
   for (let d = $pos.depth; d > 0; d--) {
     const name = $pos.node(d).type.name;
@@ -849,23 +899,32 @@ function findCellNode(pos) {
   return null;
 }
 function useBubbleMenu(options) {
-  const { editor, shouldShow, placement = "top", offset = 8, updateDelay = 0, items, contexts } = 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);
   const menuRef = useRef(null);
-  const pluginKeyRef = useRef(new PluginKey("reactBubbleMenu-" + Math.random().toString(36).slice(2, 8)));
+  const pluginKeyRef = useRef(new PluginKey("reactBubbleMenu-" + (globalThis.crypto?.randomUUID?.().slice(0, 8) ?? Math.random().toString(36).slice(2, 8))));
   const [resolvedItems, setResolvedItems] = useState([]);
   const [activeVersion, setActiveVersion] = useState(0);
+  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;
   useEffect(() => {
     if (!editor || editor.isDestroyed || !menuRef.current) return;
+    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);
         }
@@ -897,7 +956,7 @@ function useBubbleMenu(options) {
       let sepIdx = 0;
       for (const item of ctxItems) {
         if (lastGroup !== void 0 && item.group !== lastGroup) {
-          result.push({ type: "separator", name: `bsep-${sepIdx++}` });
+          result.push({ type: "separator", name: `bsep-${String(sepIdx++)}` });
         }
         result.push(item);
         lastGroup = item.group;
@@ -910,8 +969,13 @@ function useBubbleMenu(options) {
       let sepIdx = 0;
       for (const name of names) {
         if (name === "|") {
-          result.push({ type: "separator", name: `sep-${sepIdx++}` });
+          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);
         }
@@ -948,7 +1012,7 @@ function useBubbleMenu(options) {
       return schemaItems.filter((item) => {
         const markName = typeof item.isActive === "string" ? item.isActive : null;
         if (!markName) return true;
-        const markType = schema.marks?.[markName];
+        const markType = schema.marks[markName];
         if (!markType) return true;
         return nodeType.allowsMarkType(markType);
       });
@@ -968,14 +1032,16 @@ function useBubbleMenu(options) {
         };
       } else {
         shouldShowFn = ({ state }) => {
-          if (state.selection.empty || state.selection.node) return false;
+          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 pluginKey = pluginKeyRef.current;
     const plugin = createBubbleMenuPlugin({
-      pluginKey: pluginKeyRef.current,
+      pluginKey,
       editor,
       element: menuRef.current,
       shouldShow: shouldShowFn,
@@ -1001,30 +1067,81 @@ function useBubbleMenu(options) {
         canProxy = ed.can();
       } catch {
       }
-      for (const item of resolvedItemsRef.current) {
-        if (item.type === "separator") continue;
-        activeMapRef.current.set(item.name, ToolbarController.resolveActive(ed, item));
+      const trackButton = (btn) => {
+        activeMapRef.current.set(btn.name, ToolbarController.resolveActive(ed, btn));
         try {
-          const canCmd = canProxy?.[item.command];
-          disabledMapRef.current.set(item.name, canCmd ? !(item.commandArgs?.length ? canCmd(...item.commandArgs) : canCmd()) : false);
+          const canCmd = typeof btn.command === "string" ? canProxy?.[btn.command] : void 0;
+          disabledMapRef.current.set(btn.name, canCmd ? !(btn.commandArgs?.length ? canCmd(...btn.commandArgs) : canCmd()) : false);
         } catch {
-          disabledMapRef.current.set(item.name, false);
+          disabledMapRef.current.set(btn.name, false);
         }
+      };
+      for (const item of resolvedItemsRef.current) {
+        if (item.type === "separator") continue;
+        if (item.type === "dropdown") {
+          for (const sub of item.items) trackButton(sub);
+          continue;
+        }
+        trackButton(item);
       }
     };
+    const defaultItems = items ? resolveNames(items) : resolveNames(["bold", "italic", "underline"]);
+    const syncTrailingState = (ed) => {
+      const sel = ed.state.selection;
+      const isNode = !!sel.node;
+      let blockMenuDisabled = false;
+      if (hasBlockContextMenu) {
+        const { $from, $to } = ed.state.selection;
+        if ($from.depth < 1 || $to.depth < 1) {
+          blockMenuDisabled = true;
+        } else {
+          blockMenuDisabled = $from.before(1) !== $to.before(1);
+        }
+      }
+      let textVar = null;
+      let bgVar = null;
+      let hasAny = false;
+      if (hasNotionColorPicker) {
+        const mark = ed.state.selection.$from.marks().find((m) => m.type.name === "textStyle");
+        const attrs = mark?.attrs ?? {};
+        const tToken = attrs.colorToken ?? null;
+        const bToken = attrs.backgroundColorToken ?? null;
+        textVar = tToken ? `var(--dm-block-text-${tToken})` : null;
+        bgVar = bToken ? `var(--dm-block-bg-${bToken})` : null;
+        hasAny = tToken !== null || bToken !== null;
+      }
+      setTrailing({
+        isNodeSelection: isNode,
+        showColorPickerButton: hasNotionColorPicker,
+        showBlockMenuButton: hasBlockContextMenu,
+        blockMenuButtonDisabled: blockMenuDisabled,
+        currentTextColorVar: textVar,
+        currentBgColorVar: bgVar,
+        hasAnyColor: hasAny
+      });
+    };
     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);
+        }
       }
       updateStates(editor);
+      syncTrailingState(editor);
       setActiveVersion((v) => v + 1);
     };
     editor.on("transaction", transactionHandler);
     updateStates(editor);
+    syncTrailingState(editor);
     return () => {
       editor.off("transaction", transactionHandler);
       if (!editor.isDestroyed) {
-        editor.unregisterPlugin(pluginKeyRef.current);
+        editor.unregisterPlugin(pluginKey);
       }
     };
   }, [editor]);
@@ -1058,14 +1175,36 @@ function useBubbleMenu(options) {
   const isItemDisabled = (item) => {
     return disabledMapRef.current.get(item.name) ?? false;
   };
-  const executeCommand = (item) => {
+  const executeCommand = (item, event) => {
     if (!editor) return;
     if (item.emitEvent) {
-      editor.emit(item.emitEvent, {});
+      const anchor = event?.currentTarget ?? event?.target ?? null;
+      editor.emit(item.emitEvent, { anchorElement: anchor });
       return;
     }
     ToolbarController.executeItem(editor, item);
   };
+  const openColorPicker = (anchor) => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    ed.emit(
+      "notionColorOpen",
+      { anchorElement: anchor }
+    );
+  };
+  const openBlockContextMenu = (anchor) => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    const $from = ed.state.selection.$from;
+    if ($from.depth < 1) return;
+    const depth = $from.depth > 1 && $from.node($from.depth - 1).type.name !== "doc" ? $from.depth - 1 : $from.depth;
+    const blockPos = $from.before(depth);
+    const editorEl = ed.view.dom.closest(".dm-editor");
+    editorEl?.dispatchEvent(new CustomEvent("dm:block-context-menu-open", {
+      bubbles: false,
+      detail: { blockPos, anchorElement: anchor }
+    }));
+  };
   return {
     menuRef,
     resolvedItems,
@@ -1073,9 +1212,13 @@ function useBubbleMenu(options) {
     isItemDisabled,
     executeCommand,
     activeVersion,
-    getCachedIcon: (name) => defaultIcons[name] ?? ""
+    getCachedIcon: (name) => icons?.[name] ?? defaultIcons[name] ?? "",
+    trailing,
+    openColorPicker,
+    openBlockContextMenu
   };
 }
+var DROPDOWN_CARET2 = '<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>';
 function DomternalBubbleMenu({
   editor: editorProp,
   shouldShow,
@@ -1084,18 +1227,22 @@ function DomternalBubbleMenu({
   updateDelay,
   items,
   contexts,
+  icons,
   children
 }) {
   const { editor: contextEditor } = useCurrentEditor();
   const editor = editorProp ?? contextEditor;
-  const htmlCacheRef = useRef(/* @__PURE__ */ new Map());
   const {
     menuRef,
     resolvedItems,
     isItemActive,
     isItemDisabled,
     executeCommand,
-    getCachedIcon
+    activeVersion,
+    getCachedIcon,
+    trailing,
+    openColorPicker,
+    openBlockContextMenu
   } = useBubbleMenu({
     editor,
     shouldShow,
@@ -1103,21 +1250,54 @@ function DomternalBubbleMenu({
     offset,
     updateDelay,
     items,
-    contexts
+    contexts,
+    icons
   });
-  const getCachedHtml = (name) => {
-    const cache = htmlCacheRef.current;
-    const cached = cache.get(name);
-    if (cached) return cached;
-    const html = getCachedIcon(name);
-    cache.set(name, html);
-    return html;
-  };
+  const getCachedHtml = useMemo(() => {
+    const cache = /* @__PURE__ */ new Map();
+    return (name) => {
+      const cached = cache.get(name);
+      if (cached !== void 0) return cached;
+      const html = getCachedIcon(name);
+      cache.set(name, html);
+      return html;
+    };
+  }, [getCachedIcon]);
+  const [openDropdown, setOpenDropdown] = useState(null);
+  const closeDropdown = useCallback(() => {
+    setOpenDropdown(null);
+  }, []);
+  const colorBtnRef = useRef(null);
+  const blockMenuBtnRef = useRef(null);
   return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "dm-bubble-menu", role: "toolbar", "aria-label": "Text formatting", children: [
     resolvedItems.map((item) => {
       if (item.type === "separator") {
         return /* @__PURE__ */ jsx("span", { className: "dm-toolbar-separator", role: "separator" }, item.name);
       }
+      if (item.type === "dropdown") {
+        return /* @__PURE__ */ jsx(
+          BubbleDropdown,
+          {
+            dropdown: item,
+            isOpen: openDropdown === item.name,
+            onToggle: () => {
+              setOpenDropdown(openDropdown === item.name ? null : item.name);
+            },
+            onClose: closeDropdown,
+            isItemActive,
+            getCachedHtml,
+            activeVersion,
+            executeSubItem: (sub) => {
+              closeDropdown();
+              executeCommand(sub);
+              requestAnimationFrame(() => {
+                editor?.view.focus();
+              });
+            }
+          },
+          item.name
+        );
+      }
       const btn = item;
       const active = isItemActive(btn);
       return /* @__PURE__ */ jsx(
@@ -1130,48 +1310,388 @@ function DomternalBubbleMenu({
           "aria-label": btn.label,
           "aria-pressed": active,
           dangerouslySetInnerHTML: { __html: getCachedHtml(btn.icon) },
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => executeCommand(btn)
+          onMouseDown: (e) => {
+            e.preventDefault();
+          },
+          onClick: (e) => {
+            executeCommand(btn, e);
+          }
         },
         btn.name
       );
     }),
+    trailing.showColorPickerButton && !trailing.isNodeSelection && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx("span", { className: "dm-toolbar-separator", role: "separator" }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: colorBtnRef,
+          type: "button",
+          className: `dm-toolbar-button dm-ncp-trigger${trailing.hasAnyColor ? " dm-toolbar-button--active" : ""}`,
+          title: "Text and background color",
+          "aria-label": "Text and background color",
+          "aria-haspopup": "dialog",
+          onMouseDown: (e) => {
+            e.preventDefault();
+          },
+          onClick: () => {
+            if (colorBtnRef.current) openColorPicker(colorBtnRef.current);
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "dm-ncp-trigger-glyph",
+                style: trailing.currentTextColorVar ? { color: trailing.currentTextColorVar } : void 0,
+                children: "A"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "dm-ncp-trigger-underline",
+                style: trailing.currentBgColorVar ? { backgroundColor: trailing.currentBgColorVar } : void 0
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    trailing.showBlockMenuButton && !trailing.isNodeSelection && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx("span", { className: "dm-toolbar-separator", role: "separator" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: blockMenuBtnRef,
+          type: "button",
+          className: "dm-toolbar-button",
+          disabled: trailing.blockMenuButtonDisabled,
+          title: trailing.blockMenuButtonDisabled ? "Block actions (select within a single block)" : "More options",
+          "aria-label": "More options",
+          "aria-haspopup": "menu",
+          dangerouslySetInnerHTML: { __html: getCachedHtml("dotsThree") },
+          onMouseDown: (e) => {
+            e.preventDefault();
+          },
+          onClick: () => {
+            if (blockMenuBtnRef.current) openBlockContextMenu(blockMenuBtnRef.current);
+          }
+        }
+      )
+    ] }),
     children
   ] });
 }
+function BubbleDropdown({
+  dropdown,
+  isOpen,
+  onToggle,
+  onClose,
+  isItemActive,
+  getCachedHtml,
+  activeVersion,
+  executeSubItem
+}) {
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  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;
+  const triggerHtml = getCachedHtml(triggerIcon) + DROPDOWN_CARET2;
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    const trigger = triggerRef.current;
+    const panel = panelRef.current;
+    if (!trigger || !panel) return;
+    const cleanupFloating = positionFloatingOnce(trigger, panel, {
+      placement: "bottom-start",
+      offsetValue: 4
+    });
+    const controller = new AbortController();
+    const { signal } = controller;
+    document.addEventListener("mousedown", (e) => {
+      const target = e.target;
+      if (!target) return;
+      if (panel.contains(target)) return;
+      if (trigger.contains(target)) return;
+      onClose();
+    }, { signal });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    }, { signal });
+    const editorEl = trigger.closest(".dm-editor");
+    if (editorEl) {
+      editorEl.addEventListener("dm:dismiss-overlays", () => {
+        onClose();
+      }, { signal });
+    }
+    return () => {
+      controller.abort();
+      cleanupFloating();
+    };
+  }, [isOpen, onClose]);
+  return /* @__PURE__ */ jsxs("div", { className: "dm-toolbar-dropdown-wrapper", "data-dropdown-wrapper": dropdown.name, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: `dm-toolbar-button dm-toolbar-dropdown-trigger${dropdownActive ? " dm-toolbar-button--active" : ""}`,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        "aria-label": dropdown.label,
+        title: dropdown.label,
+        "data-dropdown": dropdown.name,
+        dangerouslySetInnerHTML: { __html: triggerHtml },
+        onMouseDown: (e) => {
+          e.preventDefault();
+        },
+        onClick: onToggle
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        className: "dm-toolbar-dropdown-panel",
+        role: "menu",
+        "data-dm-editor-ui": true,
+        "data-dropdown-panel": dropdown.name,
+        children: dropdown.items.map((sub) => {
+          const subActive = isItemActive(sub);
+          const subHtml = `${getCachedHtml(sub.icon)} ${sub.label}`;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `dm-toolbar-dropdown-item${subActive ? " dm-toolbar-dropdown-item--active" : ""}`,
+              role: "menuitem",
+              "aria-label": sub.label,
+              dangerouslySetInnerHTML: { __html: subHtml },
+              onMouseDown: (e) => {
+                e.preventDefault();
+              },
+              onClick: () => {
+                executeSubItem(sub);
+              }
+            },
+            sub.name
+          );
+        })
+      }
+    )
+  ] });
+}
 function DomternalFloatingMenu({
   editor: editorProp,
   shouldShow,
   offset = 0,
+  items,
+  keymap,
+  icons,
+  requireExplicitTrigger = false,
   children
 }) {
   const { editor: contextEditor } = useCurrentEditor();
   const editor = editorProp ?? contextEditor;
   const menuRef = useRef(null);
   const pluginKeyRef = useRef(
-    new PluginKey("reactFloatingMenu-" + Math.random().toString(36).slice(2, 8))
+    new PluginKey("reactFloatingMenu-" + (globalThis.crypto?.randomUUID?.().slice(0, 8) ?? Math.random().toString(36).slice(2, 8)))
   );
   const shouldShowRef = useRef(shouldShow);
   shouldShowRef.current = shouldShow;
   const offsetRef = useRef(offset);
   offsetRef.current = offset;
+  const keymapRef = useRef(keymap);
+  keymapRef.current = keymap;
+  const requireExplicitTriggerRef = useRef(requireExplicitTrigger);
+  requireExplicitTriggerRef.current = requireExplicitTrigger;
   useEffect(() => {
     if (!editor || editor.isDestroyed || !menuRef.current) return;
+    const pluginKey = pluginKeyRef.current;
     const plugin = createFloatingMenuPlugin({
-      pluginKey: pluginKeyRef.current,
+      pluginKey,
       editor,
       element: menuRef.current,
       ...shouldShowRef.current && { shouldShow: shouldShowRef.current },
-      offset: offsetRef.current
+      offset: offsetRef.current,
+      ...keymapRef.current && { keymap: keymapRef.current },
+      requireExplicitTrigger: requireExplicitTriggerRef.current
     });
     editor.registerPlugin(plugin);
     return () => {
-      if (!editor.isDestroyed) {
-        editor.unregisterPlugin(pluginKeyRef.current);
-      }
+      if (!editor.isDestroyed) editor.unregisterPlugin(pluginKey);
+    };
+  }, [editor]);
+  const useDefaultRender = !children;
+  const [, bump] = useState(0);
+  const forceRender = useCallback(() => {
+    bump((v) => v + 1);
+  }, []);
+  const controllerRef = useRef(null);
+  useEffect(() => {
+    if (!useDefaultRender || !editor || editor.isDestroyed) {
+      controllerRef.current = null;
+      return;
+    }
+    const controller2 = new FloatingMenuController(editor, forceRender, items);
+    controller2.subscribe();
+    controllerRef.current = controller2;
+    forceRender();
+    return () => {
+      controller2.destroy();
+      controllerRef.current = null;
     };
+  }, [editor, useDefaultRender, items, forceRender]);
+  const controller = controllerRef.current;
+  const groups = useMemo(() => controller?.groups ?? [], [controller]);
+  const focusedIndex = controller?.focusedIndex ?? -1;
+  useLayoutEffect(() => {
+    if (focusedIndex < 0 || !menuRef.current) return;
+    const target = menuRef.current.querySelector(
+      `[data-floating-menu-index="${String(focusedIndex)}"]`
+    );
+    target?.focus();
+  }, [focusedIndex]);
+  const resolveIcon = useCallback((name) => {
+    if (!name) return "";
+    return icons?.[name] ?? defaultIcons[name] ?? "";
+  }, [icons]);
+  const onItemClick = useCallback((item) => {
+    if (!editor || !controllerRef.current) return;
+    controllerRef.current.execute(item);
+    requestAnimationFrame(() => {
+      editor.view.focus();
+    });
   }, [editor]);
-  return /* @__PURE__ */ jsx("div", { ref: menuRef, className: "dm-floating-menu", children });
+  const onMenuKeyDown = useCallback((e) => {
+    const ctl = controllerRef.current;
+    if (!ctl) return;
+    const focused = ctl.focusedItem();
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        ctl.next();
+        return;
+      case "ArrowUp":
+        e.preventDefault();
+        ctl.prev();
+        return;
+      case "Home":
+        e.preventDefault();
+        ctl.first();
+        return;
+      case "End":
+        e.preventDefault();
+        ctl.last();
+        return;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        ctl.leaveMenu();
+        if (editor) editor.view.focus();
+        return;
+      case "Enter":
+      case " ":
+        if (focused) {
+          e.preventDefault();
+          onItemClick(focused);
+        }
+        return;
+      default:
+        return;
+    }
+  }, [editor, onItemClick]);
+  const flatNames = useMemo(
+    () => groups.flatMap((g) => g.items.map((i) => i.name)),
+    [groups]
+  );
+  if (!editor && !useDefaultRender) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menuRef,
+      className: "dm-floating-menu",
+      role: "menu",
+      "aria-label": "Insert block",
+      "data-dm-editor-ui": "",
+      onKeyDown: useDefaultRender ? onMenuKeyDown : void 0,
+      children: useDefaultRender ? groups.map((group, gi) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        group.name && /* @__PURE__ */ jsx("div", { className: "dm-floating-menu-group-label", id: `dm-fm-g${String(gi)}`, children: group.name }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "dm-floating-menu-group",
+            role: "group",
+            ...group.name && { "aria-labelledby": `dm-fm-g${String(gi)}` },
+            children: group.items.map((item) => {
+              const flatIndex = flatNames.indexOf(item.name);
+              const isFocused = flatIndex === focusedIndex;
+              const disabled = controller?.isDisabled(item) ?? false;
+              return /* @__PURE__ */ jsx(
+                FloatingMenuItemButton,
+                {
+                  item,
+                  flatIndex,
+                  tabIndex: isFocused || focusedIndex < 0 && flatIndex === 0 ? 0 : -1,
+                  disabled,
+                  iconHtml: resolveIcon(item.icon),
+                  onClick: onItemClick
+                },
+                item.name
+              );
+            })
+          }
+        )
+      ] }, group.name || `__group-${String(gi)}`)) : children
+    }
+  );
+}
+function FloatingMenuItemButton({
+  item,
+  flatIndex,
+  tabIndex,
+  disabled,
+  iconHtml,
+  onClick
+}) {
+  const handleClick = useCallback(() => {
+    onClick(item);
+  }, [item, onClick]);
+  const onMouseDown = useCallback((e) => {
+    e.preventDefault();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: "dm-floating-menu-item",
+      "data-floating-menu-item": item.name,
+      "data-floating-menu-index": String(flatIndex),
+      tabIndex,
+      "aria-disabled": disabled || void 0,
+      "aria-keyshortcuts": item.shortcut,
+      disabled,
+      onClick: handleClick,
+      onMouseDown,
+      children: [
+        iconHtml && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "dm-floating-menu-item-icon",
+            "aria-hidden": "true",
+            dangerouslySetInnerHTML: { __html: iconHtml }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "dm-floating-menu-item-label", children: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx("span", { className: "dm-floating-menu-item-shortcut", "aria-hidden": "true", children: item.shortcut })
+      ]
+    }
+  );
 }
 function useEmojiPicker(editor, emojis) {
   const [isOpen, setIsOpen] = useState(false);
@@ -1209,7 +1729,8 @@ function useEmojiPicker(editor, emojis) {
   const frequentlyUsed = useMemo(() => {
     if (!isOpen) return [];
     const storage = getEmojiStorage(editor);
-    const getFreq = storage?.["getFrequentlyUsed"];
+    if (!storage) return [];
+    const getFreq = storage["getFrequentlyUsed"];
     if (!getFreq) return [];
     const names = getFreq();
     if (!names.length) return [];
@@ -1242,7 +1763,9 @@ function useEmojiPicker(editor, emojis) {
     clickOutsideRef.current = (e) => {
       const target = e.target;
       if (pickerRef.current && !pickerRef.current.contains(target) && target !== anchorRef.current && !anchorRef.current?.contains(target)) {
-        requestAnimationFrame(() => close());
+        requestAnimationFrame(() => {
+          close();
+        });
       }
     };
     document.addEventListener("mousedown", clickOutsideRef.current);
@@ -1405,7 +1928,7 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
     const swatches = Array.from(grid.querySelectorAll(".dm-emoji-swatch"));
     if (!swatches.length) return;
     const current = document.activeElement;
-    let idx = swatches.indexOf(current);
+    const idx = swatches.indexOf(current);
     if (idx === -1) {
       if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) {
         event.preventDefault();
@@ -1466,8 +1989,12 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
         "aria-selected": activeCategory === cat,
         title: cat,
         "aria-label": cat,
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => scrollToCategory(cat),
+        onMouseDown: (e) => {
+          e.preventDefault();
+        },
+        onClick: () => {
+          scrollToCategory(cat);
+        },
         children: categoryIcon(cat)
       },
       cat
@@ -1480,8 +2007,12 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
         tabIndex: -1,
         title: formatName(item.name),
         "aria-label": formatName(item.name),
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => selectEmoji(item),
+        onMouseDown: (e) => {
+          e.preventDefault();
+        },
+        onClick: () => {
+          selectEmoji(item);
+        },
         children: item.emoji
       },
       item.name
@@ -1496,8 +2027,12 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
             tabIndex: -1,
             title: formatName(item.name),
             "aria-label": formatName(item.name),
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => selectEmoji(item),
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onClick: () => {
+              selectEmoji(item);
+            },
             children: item.emoji
           },
           item.name
@@ -1513,8 +2048,12 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
             tabIndex: -1,
             title: formatName(item.name),
             "aria-label": formatName(item.name),
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => selectEmoji(item),
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onClick: () => {
+              selectEmoji(item);
+            },
             children: item.emoji
           },
           item.name
@@ -1657,6 +2196,349 @@ function EditorContent({ editor, innerRef, ...htmlProps }) {
     }
   );
 }
+var TOKEN_LABELS = {
+  gray: "Gray",
+  brown: "Brown",
+  orange: "Orange",
+  yellow: "Yellow",
+  green: "Green",
+  blue: "Blue",
+  purple: "Purple",
+  pink: "Pink",
+  red: "Red"
+};
+function useNotionColorPicker(options) {
+  const { editor } = options;
+  const [isOpen, setIsOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [hostEl, setHostEl] = useState(null);
+  const [currentTextToken, setCurrentTextToken] = useState(null);
+  const [currentBgToken, setCurrentBgToken] = useState(null);
+  const [palette, setPalette] = useState([]);
+  const panelRef = useRef(null);
+  const isOpenRef = useRef(false);
+  isOpenRef.current = isOpen;
+  const editorRef = useRef(editor);
+  useEffect(() => {
+    editorRef.current = editor;
+  }, [editor]);
+  const anchorRef = useRef(null);
+  anchorRef.current = anchorEl;
+  const setStorageOpen2 = useCallback((open) => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    const slot = ed.storage["notionColorPicker"];
+    if (slot && typeof slot === "object") {
+      slot.isOpen = open;
+    }
+  }, []);
+  const syncFromSelection = useCallback(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    const { selection } = ed.state;
+    let mark = null;
+    if (selection.empty) {
+      mark = selection.$from.marks().find((m) => m.type.name === "textStyle") ?? null;
+    } else {
+      ed.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+        if (mark) return false;
+        if (node.isText) {
+          const found = node.marks.find((m) => m.type.name === "textStyle");
+          if (found) mark = found;
+        }
+        return true;
+      });
+    }
+    const attrs = mark?.attrs ?? {};
+    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]);
+  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] : []);
+    const onOpen = (...args) => {
+      const detail = args[0];
+      const incomingAnchor = detail?.anchorElement;
+      if (!incomingAnchor) return;
+      if (isOpenRef.current && anchorRef.current === incomingAnchor) {
+        close({ refocus: true });
+        return;
+      }
+      setAnchorEl(incomingAnchor);
+      syncFromSelection();
+      setIsOpen(true);
+      setStorageOpen2(true);
+    };
+    const onSelectionUpdate = () => {
+      if (!isOpenRef.current) return;
+      if (!anchorRef.current?.isConnected) {
+        close();
+        return;
+      }
+      if (editor.state.selection.empty) {
+        close();
+      } else {
+        syncFromSelection();
+      }
+    };
+    editor.on("notionColorOpen", onOpen);
+    editor.on("selectionUpdate", onSelectionUpdate);
+    return () => {
+      editor.off("notionColorOpen", onOpen);
+      editor.off("selectionUpdate", onSelectionUpdate);
+      if (isOpenRef.current) setStorageOpen2(false);
+    };
+  }, [editor, close, syncFromSelection, setStorageOpen2]);
+  useEffect(() => {
+    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 });
+    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 tokenLabel = useCallback((token) => {
+    return TOKEN_LABELS[token] ?? token.charAt(0).toUpperCase() + token.slice(1);
+  }, []);
+  const onPanelKeydown = useCallback((event) => {
+    const cols = 5;
+    const root = panelRef.current;
+    if (!root) return;
+    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;
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault();
+        next = Math.min(idx + 1, swatches.length - 1);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        next = Math.max(idx - 1, 0);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        next = Math.min(idx + cols, swatches.length - 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        next = Math.max(idx - cols, 0);
+        break;
+      case "Home":
+        event.preventDefault();
+        next = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        next = swatches.length - 1;
+        break;
+      default:
+        return;
+    }
+    swatches[next]?.focus();
+  }, []);
+  return {
+    isOpen,
+    hostEl,
+    anchorEl,
+    panelRef,
+    currentTextToken,
+    currentBgToken,
+    palette,
+    applyText,
+    applyBg,
+    close,
+    tokenLabel,
+    onPanelKeydown
+  };
+}
+function DomternalNotionColorPicker({
+  editor: editorProp,
+  children
+}) {
+  const { editor: contextEditor } = useCurrentEditor();
+  const editor = editorProp ?? contextEditor;
+  const api = useNotionColorPicker({ editor });
+  const {
+    isOpen,
+    hostEl,
+    anchorEl,
+    panelRef,
+    currentTextToken,
+    currentBgToken,
+    palette,
+    applyText,
+    applyBg,
+    tokenLabel,
+    onPanelKeydown
+  } = api;
+  useLayoutEffect(() => {
+    if (!isOpen || !anchorEl || !panelRef.current) return;
+    const panel = panelRef.current;
+    const cleanupFloating = positionFloating(anchorEl, panel, {
+      placement: "bottom-start",
+      offsetValue: 4
+    });
+    let id2 = 0;
+    const id1 = requestAnimationFrame(() => {
+      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"]');
+        (active ?? fallback)?.focus({ preventScroll: true });
+      });
+    });
+    return () => {
+      cancelAnimationFrame(id1);
+      if (id2) cancelAnimationFrame(id2);
+      cleanupFloating();
+    };
+  }, [isOpen, anchorEl, panelRef]);
+  if (!isOpen || !hostEl) return null;
+  const defaultContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "dm-ncp-section", children: [
+      /* @__PURE__ */ jsx("div", { className: "dm-ncp-label", children: "Text color" }),
+      /* @__PURE__ */ jsxs("div", { className: "dm-ncp-grid", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `dm-ncp-swatch dm-ncp-swatch--text${currentTextToken === null ? " dm-ncp-active" : ""}`,
+            "aria-pressed": currentTextToken === null,
+            "data-color": "null",
+            title: "Default text color",
+            "aria-label": "Default text color",
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onClick: () => {
+              applyText(null);
+            }
+          }
+        ),
+        palette.map((t) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `dm-ncp-swatch dm-ncp-swatch--text${currentTextToken === t ? " dm-ncp-active" : ""}`,
+            "aria-pressed": currentTextToken === t,
+            "data-color": t,
+            title: tokenLabel(t),
+            "aria-label": `${tokenLabel(t)} text`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onClick: () => {
+              applyText(t);
+            }
+          },
+          t
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "dm-ncp-section", children: [
+      /* @__PURE__ */ jsx("div", { className: "dm-ncp-label", children: "Background color" }),
+      /* @__PURE__ */ jsxs("div", { className: "dm-ncp-grid", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `dm-ncp-swatch dm-ncp-swatch--bg${currentBgToken === null ? " dm-ncp-active" : ""}`,
+            "aria-pressed": currentBgToken === null,
+            "data-color": "null",
+            title: "Default background",
+            "aria-label": "Default background",
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onClick: () => {
+              applyBg(null);
+            }
+          }
+        ),
+        palette.map((t) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `dm-ncp-swatch dm-ncp-swatch--bg${currentBgToken === t ? " dm-ncp-active" : ""}`,
+            "aria-pressed": currentBgToken === t,
+            "data-color": t,
+            title: `${tokenLabel(t)} background`,
+            "aria-label": `${tokenLabel(t)} background`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onClick: () => {
+              applyBg(t);
+            }
+          },
+          t
+        ))
+      ] })
+    ] })
+  ] });
+  const content = typeof children === "function" ? children(api) : children ?? defaultContent;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        className: "dm-notion-color-picker",
+        "data-show": true,
+        "data-dm-editor-ui": true,
+        role: "dialog",
+        "aria-label": "Text and background color",
+        "aria-modal": "false",
+        onKeyDown: onPanelKeydown,
+        children: content
+      }
+    ),
+    hostEl
+  );
+}
 var ReactNodeViewContext = createContext(null);
 var ReactNodeViewProvider = ReactNodeViewContext.Provider;
 function useReactNodeView() {
@@ -1775,7 +2657,9 @@ var ReactNodeView = class {
   }
   destroy() {
     const root = this.root;
-    setTimeout(() => root.unmount(), 0);
+    setTimeout(() => {
+      root.unmount();
+    }, 0);
   }
   ignoreMutation(mutation) {
     if (!this.contentDOM) return true;
@@ -1810,6 +2694,6 @@ function NodeViewContent({ as: Tag = "div", style, ...props }) {
   );
 }
 
-export { DEFAULT_EXTENSIONS, Domternal, DomternalBubbleMenu, DomternalEditor, DomternalEmojiPicker, DomternalFloatingMenu, DomternalToolbar, EditorContent, EditorProvider, NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+export { DEFAULT_EXTENSIONS, Domternal, DomternalBubbleMenu, DomternalEditor, DomternalEmojiPicker, DomternalFloatingMenu, DomternalNotionColorPicker, DomternalToolbar, EditorContent, EditorProvider, NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, useCurrentEditor, useEditor, useEditorState, useNotionColorPicker, useReactNodeView };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map