@domternal/vue 0.6.1 → 0.7.0

package/dist/index.js

@@ -1,6 +1,7 @@
-import { defineComponent, ref, watchEffect, h, watch, computed, Fragment, onMounted, onScopeDispose, inject, shallowRef, provide, getCurrentInstance, markRaw, customRef, shallowReactive, render } from 'vue';
-import { PluginKey, ToolbarController, createFloatingMenuPlugin, Editor, Document, Paragraph, Text, BaseKeymap, History, positionFloatingOnce, defaultIcons, createBubbleMenuPlugin } from '@domternal/core';
+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, FloatingMenuController, defaultIcons, defaultBubbleContexts, createBubbleMenuPlugin, Editor, Document, Paragraph, Text, BaseKeymap, History } from '@domternal/core';
 export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
+import { createFloatingMenuPlugin } from '@domternal/extension-block-menu';
 
 // src/useEditor.ts
 var DEFAULT_EXTENSIONS = [Document, Paragraph, Text, BaseKeymap, History];
@@ -46,7 +47,7 @@ function useEditor(options = {}) {
       pendingContent = current.getJSON();
       options.onDestroy?.();
       const dom = current.view.dom;
-      const parent = dom?.parentNode;
+      const parent = dom.parentNode;
       if (parent) {
         const clone = dom.cloneNode(true);
         clone.style.pointerEvents = "none";
@@ -242,7 +243,8 @@ function provideEditor(editor) {
   if (instance) {
     const buildCtx = () => {
       const ctx = Object.create(instance.appContext);
-      ctx.provides = instance.provides;
+      const instanceWithProvides = instance;
+      ctx.provides = instanceWithProvides.provides;
       return ctx;
     };
     pendingAppContextStore.value = buildCtx();
@@ -259,189 +261,6 @@ function useCurrentEditor() {
   const editor = inject(EDITOR_KEY, shallowRef(null));
   return { editor };
 }
-var Domternal = defineComponent({
-  name: "Domternal",
-  props: {
-    extensions: { type: Array, default: void 0 },
-    content: { type: [String, Object], default: "" },
-    editable: { type: Boolean, default: true },
-    autofocus: { type: [Boolean, String, Number], default: false },
-    outputFormat: { type: String, default: "html" },
-    immediatelyRender: { type: Boolean, default: false },
-    onCreate: { type: Function, default: void 0 },
-    onUpdate: { type: Function, default: void 0 },
-    onSelectionChange: { type: Function, default: void 0 },
-    onFocus: { type: Function, default: void 0 },
-    onBlur: { type: Function, default: void 0 },
-    onDestroy: { type: Function, default: void 0 }
-  },
-  setup(props, { slots }) {
-    const { editor } = useEditor({
-      ...props.extensions && { extensions: props.extensions },
-      content: props.content,
-      editable: props.editable,
-      autofocus: props.autofocus,
-      outputFormat: props.outputFormat,
-      immediatelyRender: props.immediatelyRender,
-      ...props.onCreate && { onCreate: props.onCreate },
-      ...props.onUpdate && { onUpdate: props.onUpdate },
-      ...props.onSelectionChange && { onSelectionChange: props.onSelectionChange },
-      ...props.onFocus && { onFocus: props.onFocus },
-      ...props.onBlur && { onBlur: props.onBlur },
-      ...props.onDestroy && { onDestroy: props.onDestroy }
-    });
-    provideEditor(editor);
-    return () => slots["default"]?.();
-  }
-});
-var DomternalContent = defineComponent({
-  name: "DomternalContent",
-  props: {
-    class: { type: String, default: void 0 }
-  },
-  setup(props) {
-    const { editor } = useCurrentEditor();
-    const containerRef = ref();
-    watchEffect(() => {
-      const container = containerRef.value;
-      const ed = editor.value;
-      if (!container || !ed || ed.isDestroyed) return;
-      const editorDom = ed.view.dom;
-      if (editorDom.parentElement !== container) {
-        container.appendChild(editorDom);
-      }
-    });
-    return () => {
-      const classes = props.class ? `dm-editor ${props.class}` : "dm-editor";
-      return h("div", { class: classes, "data-dm-editor-ui": "" }, [h("div", { ref: containerRef })]);
-    };
-  }
-});
-var DomternalLoading = defineComponent({
-  name: "DomternalLoading",
-  setup(_props, { slots }) {
-    const { editor } = useCurrentEditor();
-    return () => editor.value ? null : slots["default"]?.();
-  }
-});
-Domternal.Content = DomternalContent;
-Domternal.Loading = DomternalLoading;
-var DomternalEditor = defineComponent({
-  name: "DomternalEditor",
-  props: {
-    extensions: { type: Array, default: void 0 },
-    content: { type: [String, Object], default: void 0 },
-    editable: { type: Boolean, default: true },
-    autofocus: { type: [Boolean, String, Number], default: false },
-    immediatelyRender: { type: Boolean, default: false },
-    outputFormat: { type: String, default: "html" },
-    modelValue: { type: [String, Object], default: void 0 },
-    class: { type: String, default: void 0 },
-    onCreate: { type: Function, default: void 0 },
-    onUpdate: { type: Function, default: void 0 },
-    onSelectionChange: { type: Function, default: void 0 },
-    onFocus: { type: Function, default: void 0 },
-    onBlur: { type: Function, default: void 0 },
-    onDestroy: { type: Function, default: void 0 }
-  },
-  emits: {
-    "update:modelValue": (_value) => true
-  },
-  setup(props, { slots, emit, expose }) {
-    const { editor, editorRef } = useEditor({
-      ...props.extensions && { extensions: props.extensions },
-      content: props.modelValue ?? props.content ?? "",
-      editable: props.editable,
-      autofocus: props.autofocus,
-      immediatelyRender: props.immediatelyRender,
-      outputFormat: props.outputFormat,
-      ...props.onCreate && { onCreate: props.onCreate },
-      ...props.onUpdate && { onUpdate: props.onUpdate },
-      ...props.onSelectionChange && { onSelectionChange: props.onSelectionChange },
-      ...props.onFocus && { onFocus: props.onFocus },
-      ...props.onBlur && { onBlur: props.onBlur },
-      ...props.onDestroy && { onDestroy: props.onDestroy }
-    });
-    const state = useEditorState(editor);
-    expose({
-      editor,
-      htmlContent: state.htmlContent,
-      jsonContent: state.jsonContent,
-      isEmpty: state.isEmpty,
-      isFocused: state.isFocused
-    });
-    provideEditor(editor);
-    const prevModelValue = ref(props.modelValue);
-    watch(
-      () => props.modelValue,
-      (newValue) => {
-        if (newValue === void 0) return;
-        const ed = editor.value;
-        if (!ed || ed.isDestroyed) return;
-        if (newValue === prevModelValue.value) return;
-        prevModelValue.value = newValue;
-        if (props.outputFormat === "html") {
-          if (newValue !== ed.getHTML()) {
-            ed.setContent(newValue, false);
-          }
-        } else {
-          if (JSON.stringify(newValue) !== JSON.stringify(ed.getJSON())) {
-            ed.setContent(newValue, false);
-          }
-        }
-      },
-      { flush: "post" }
-    );
-    watch(editor, (ed, _oldEd, onCleanup) => {
-      if (!ed || ed.isDestroyed) return;
-      const handler = () => {
-        const val = props.outputFormat === "html" ? ed.getHTML() : ed.getJSON();
-        prevModelValue.value = val;
-        emit("update:modelValue", val);
-      };
-      ed.on("update", handler);
-      onCleanup(() => {
-        ed.off("update", handler);
-      });
-    }, { immediate: true });
-    return () => {
-      const classes = props.class ? `dm-editor ${props.class}` : "dm-editor";
-      return [
-        h("div", { class: classes, "data-dm-editor-ui": "" }, [h("div", { ref: editorRef })]),
-        slots["default"]?.()
-      ];
-    };
-  }
-});
-var EditorContent = defineComponent({
-  name: "EditorContent",
-  props: {
-    editor: {
-      type: Object,
-      default: null
-    },
-    class: {
-      type: String,
-      default: void 0
-    }
-  },
-  setup(props) {
-    const containerRef = ref();
-    watchEffect(() => {
-      const container = containerRef.value;
-      const editor = props.editor;
-      if (!container || !editor || editor.isDestroyed) return;
-      const editorDom = editor.view.dom;
-      if (editorDom.parentElement !== container) {
-        container.appendChild(editorDom);
-      }
-    });
-    return () => h("div", {
-      ref: containerRef,
-      class: props.class
-    });
-  }
-});
 function useToolbarController(editor, layout) {
   const groups = shallowRef([]);
   const focusedIndex = ref(0);
@@ -527,8 +346,9 @@ function useToolbarController(editor, layout) {
   function isDropdownActive(dropdown) {
     if (dropdown.layout === "grid") return false;
     if (dropdown.dynamicLabel) return false;
-    if (!controller) return false;
-    return dropdown.items.some((item) => controller.activeMap.get(item.name) ?? false);
+    const ctl = controller;
+    if (!ctl) return false;
+    return dropdown.items.some((item) => ctl.activeMap.get(item.name) ?? false);
   }
   function getAriaExpanded(item) {
     if (!item.emitEvent) return null;
@@ -742,7 +562,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;
@@ -777,31 +599,25 @@ function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
 }
 
 // src/toolbar/useComputedStyle.ts
+function resolveElementAtCursor(editor) {
+  const { from } = editor.state.selection;
+  const { node } = editor.view.domAtPos(from);
+  return node instanceof HTMLElement ? node : node.parentElement;
+}
 function getComputedStyleAtCursor(editor, prop) {
   try {
-    const { from } = editor.state.selection;
-    const domAtPos = editor.view.domAtPos(from);
-    let node = domAtPos.node;
-    if (!(node instanceof HTMLElement)) {
-      node = node.parentElement;
-    }
+    const node = resolveElementAtCursor(editor);
     if (!node) return null;
-    const el = node;
-    const inline = el.style.getPropertyValue(prop);
+    const inline = node.style.getPropertyValue(prop);
     if (inline) return inline;
-    return window.getComputedStyle(el).getPropertyValue(prop) || null;
+    return window.getComputedStyle(node).getPropertyValue(prop) || null;
   } catch {
     return null;
   }
 }
 function getInlineStyleAtCursor(editor, prop) {
   try {
-    const { from } = editor.state.selection;
-    const domAtPos = editor.view.domAtPos(from);
-    let node = domAtPos.node;
-    if (!(node instanceof HTMLElement)) {
-      node = node.parentElement;
-    }
+    const node = resolveElementAtCursor(editor);
     if (!node) return null;
     return node.style.getPropertyValue(prop) || null;
   } catch {
@@ -834,9 +650,15 @@ var ToolbarButton = defineComponent({
       "aria-expanded": props.ariaExpanded === "true" ? true : void 0,
       "aria-label": props.item.label,
       title: props.tooltip,
-      onMousedown: (e) => e.preventDefault(),
-      onClick: (e) => emit("click", props.item, e),
-      onFocus: () => emit("focus", props.item.name)
+      onMousedown: (e) => {
+        e.preventDefault();
+      },
+      onClick: (e) => {
+        emit("click", props.item, e);
+      },
+      onFocus: () => {
+        emit("focus", props.item.name);
+      }
     });
   }
 });
@@ -872,8 +694,12 @@ var ToolbarDropdownPanel = defineComponent({
               "aria-label": sub.label,
               title: sub.label,
               style: { backgroundColor: sub.color },
-              onMousedown: (e) => e.preventDefault(),
-              onClick: (e) => emit("itemClick", sub, e)
+              onMousedown: (e) => {
+                e.preventDefault();
+              },
+              onClick: (e) => {
+                emit("itemClick", sub, e);
+              }
             }) : h("button", {
               key: sub.name,
               type: "button",
@@ -882,8 +708,12 @@ var ToolbarDropdownPanel = defineComponent({
               tabindex: -1,
               "aria-label": sub.label,
               innerHTML: getCachedItemContent(sub.icon, sub.label),
-              onMousedown: (e) => e.preventDefault(),
-              onClick: (e) => emit("itemClick", sub, e)
+              onMousedown: (e) => {
+                e.preventDefault();
+              },
+              onClick: (e) => {
+                emit("itemClick", sub, e);
+              }
             })
           )
         );
@@ -908,8 +738,12 @@ var ToolbarDropdownPanel = defineComponent({
             onVnodeMounted: (vnode) => {
               if (sub.style && vnode.el) vnode.el.setAttribute("style", sub.style);
             },
-            onMousedown: (e) => e.preventDefault(),
-            onClick: (e) => emit("itemClick", sub, e)
+            onMousedown: (e) => {
+              e.preventDefault();
+            },
+            onClick: (e) => {
+              emit("itemClick", sub, e);
+            }
           })
         )
       );
@@ -948,9 +782,15 @@ var ToolbarDropdown = defineComponent({
           disabled: props.isDisabled,
           "data-dropdown": props.dropdown.name,
           innerHTML: props.triggerHtml,
-          onMousedown: (e) => e.preventDefault(),
-          onClick: () => emit("toggle", props.dropdown),
-          onFocus: () => emit("focus", props.dropdown.name)
+          onMousedown: (e) => {
+            e.preventDefault();
+          },
+          onClick: () => {
+            emit("toggle", props.dropdown);
+          },
+          onFocus: () => {
+            emit("focus", props.dropdown.name);
+          }
         })
       ];
       if (props.isOpen) {
@@ -959,7 +799,9 @@ var ToolbarDropdown = defineComponent({
             dropdown: props.dropdown,
             isActive: props.isActive,
             getCachedItemContent: props.getCachedItemContent,
-            onItemClick: (item, event) => emit("itemClick", item, event)
+            onItemClick: (item, event) => {
+              emit("itemClick", item, event);
+            }
           })
         );
       }
@@ -1011,20 +853,23 @@ var DomternalToolbar = defineComponent({
         closeDropdown();
       }
       if (item.emitEvent) {
-        const anchor = event?.target?.closest?.(".dm-toolbar-button") ?? event?.target;
+        const target = event?.target;
+        const anchor = target?.closest(".dm-toolbar-button") ?? target;
         editor.emit(item.emitEvent, { anchorElement: anchor });
         return;
       }
       executeCommand(item);
-      requestAnimationFrame(() => editor.view.focus());
+      requestAnimationFrame(() => {
+        editor.view.focus();
+      });
     }
     function onDropdownItemClick(item, event) {
       const editor = props.editor ?? contextEditor.value;
       if (!editor) return;
       let anchor;
       if (item.emitEvent) {
-        const wrapper = event.target?.closest?.(".dm-toolbar-dropdown-wrapper");
-        anchor = wrapper?.querySelector(".dm-toolbar-dropdown-trigger");
+        const wrapper = event.target.closest(".dm-toolbar-dropdown-wrapper");
+        anchor = wrapper?.querySelector(".dm-toolbar-dropdown-trigger") ?? void 0;
       }
       closeDropdown();
       if (item.emitEvent) {
@@ -1032,7 +877,9 @@ var DomternalToolbar = defineComponent({
       } else {
         executeCommand(item);
       }
-      requestAnimationFrame(() => editor.view.focus());
+      requestAnimationFrame(() => {
+        editor.view.focus();
+      });
     }
     function onButtonFocus(name) {
       const index = controllerRef.current?.getFlatIndex(name) ?? -1;
@@ -1072,7 +919,9 @@ var DomternalToolbar = defineComponent({
                     tooltip: getTooltip(btn),
                     iconHtml: getCachedIcon(btn.icon),
                     ariaExpanded: getAriaExpanded(btn),
-                    onClick: (clickedItem, event) => onButtonClick(clickedItem, event),
+                    onClick: (clickedItem, event) => {
+                      onButtonClick(clickedItem, event);
+                    },
                     onFocus: onButtonFocus
                   });
                 }
@@ -1081,18 +930,18 @@ var DomternalToolbar = defineComponent({
                   const activeItem = dd.items.find((sub) => controllerRef.current?.activeMap.get(sub.name));
                   let triggerHtml = getDropdownTriggerHtml(dd, activeItem);
                   if (dd.dynamicLabel && !activeItem && dd.computedStyleProperty) {
-                    let computed6;
+                    let computed7;
                     if (dd.computedStyleProperty === "font-family") {
-                      computed6 = getInlineStyleAtCursor(editor, dd.computedStyleProperty);
-                      if (computed6) {
-                        const first = computed6.split(",")[0]?.replace(/['"]+/g, "").trim();
-                        computed6 = first || null;
+                      computed7 = getInlineStyleAtCursor(editor, dd.computedStyleProperty);
+                      if (computed7) {
+                        const first = computed7.split(",")[0]?.replace(/['"]+/g, "").trim();
+                        computed7 = first ?? null;
                       }
                     } else {
-                      computed6 = getComputedStyleAtCursor(editor, dd.computedStyleProperty);
+                      computed7 = getComputedStyleAtCursor(editor, dd.computedStyleProperty);
                     }
-                    if (computed6) {
-                      triggerHtml = `<span class="dm-toolbar-trigger-label">${computed6}</span>${DROPDOWN_CARET}`;
+                    if (computed7) {
+                      triggerHtml = `<span class="dm-toolbar-trigger-label">${computed7}</span>${DROPDOWN_CARET}`;
                     }
                   }
                   return h(ToolbarDropdown, {
@@ -1119,6 +968,15 @@ var DomternalToolbar = defineComponent({
     };
   }
 });
+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;
@@ -1134,26 +992,37 @@ 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: iconsRef } = options;
   const menuRef = ref();
-  const pluginKey = new PluginKey("vueBubbleMenu-" + Math.random().toString(36).slice(2, 8));
+  const cryptoRef = globalThis.crypto;
+  const pluginKey = new PluginKey(
+    "vueBubbleMenu-" + (cryptoRef?.randomUUID?.().slice(0, 8) ?? Math.random().toString(36).slice(2, 8))
+  );
   const resolvedItems = shallowRef([]);
   const activeVersion = useDebouncedRef(0);
+  const trailing = shallowRef(INITIAL_TRAILING_STATE);
   const activeMapRef = /* @__PURE__ */ new Map();
   const disabledMapRef = /* @__PURE__ */ new Map();
   let itemMap;
+  let dropdownMap;
   let bubbleDefaults;
   let currentResolvedItems = [];
   let initialized = false;
   let stopEditorWatch = null;
   const doInit = (ed) => {
-    if (initialized || !ed || ed.isDestroyed || !menuRef.value) return;
+    if (initialized || ed.isDestroyed || !menuRef.value) return;
     initialized = true;
+    const contexts = explicitContexts ?? (items ? void 0 : defaultBubbleContexts(ed));
+    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);
         }
@@ -1184,7 +1053,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;
@@ -1196,8 +1065,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);
         }
@@ -1234,7 +1108,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);
       });
@@ -1254,7 +1128,8 @@ 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 !== "";
         };
@@ -1287,26 +1162,77 @@ function useBubbleMenu(options) {
         canProxy = currentEd.can();
       } catch {
       }
-      for (const item of currentResolvedItems) {
-        if (item.type === "separator") continue;
-        activeMapRef.set(item.name, ToolbarController.resolveActive(currentEd, item));
+      const trackButton = (btn) => {
+        activeMapRef.set(btn.name, ToolbarController.resolveActive(currentEd, btn));
         try {
-          const canCmd = canProxy?.[item.command];
-          disabledMapRef.set(item.name, canCmd ? !(item.commandArgs?.length ? canCmd(...item.commandArgs) : canCmd()) : false);
+          const canCmd = typeof btn.command === "string" ? canProxy?.[btn.command] : void 0;
+          disabledMapRef.set(btn.name, canCmd ? !(btn.commandArgs?.length ? canCmd(...btn.commandArgs) : canCmd()) : false);
         } catch {
-          disabledMapRef.set(item.name, false);
+          disabledMapRef.set(btn.name, false);
+        }
+      };
+      for (const item of currentResolvedItems) {
+        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 = (currentEd) => {
+      const sel = currentEd.state.selection;
+      const isNode = !!sel.node;
+      let blockMenuDisabled = false;
+      if (hasBlockContextMenu) {
+        const { $from, $to } = currentEd.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 = currentEd.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;
+      }
+      trailing.value = {
+        isNodeSelection: isNode,
+        showColorPickerButton: hasNotionColorPicker,
+        showBlockMenuButton: hasBlockContextMenu,
+        blockMenuButtonDisabled: blockMenuDisabled,
+        currentTextColorVar: textVar,
+        currentBgColorVar: bgVar,
+        hasAnyColor: hasAny
+      };
     };
     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);
+        }
       }
       updateStates(ed);
+      syncTrailingState(ed);
       activeVersion.value++;
     };
     ed.on("transaction", transactionHandler);
     updateStates(ed);
+    syncTrailingState(ed);
     initializedEditor = ed;
     initializedHandler = transactionHandler;
   };
@@ -1364,17 +1290,39 @@ function useBubbleMenu(options) {
   const isItemDisabled = (item) => {
     return disabledMapRef.get(item.name) ?? false;
   };
-  const executeCommand = (item) => {
+  const executeCommand = (item, event) => {
     const ed = editor.value;
     if (!ed) return;
     if (item.emitEvent) {
-      ed.emit(item.emitEvent, {});
+      const anchor = event?.currentTarget ?? event?.target ?? null;
+      ed.emit(item.emitEvent, { anchorElement: anchor });
       return;
     }
     ToolbarController.executeItem(ed, item);
   };
   const getCachedIcon = (name) => {
-    return defaultIcons[name] ?? "";
+    return iconsRef?.value?.[name] ?? defaultIcons[name] ?? "";
+  };
+  const openColorPicker = (anchor) => {
+    const ed = editor.value;
+    if (!ed) return;
+    ed.emit(
+      "notionColorOpen",
+      { anchorElement: anchor }
+    );
+  };
+  const openBlockContextMenu = (anchor) => {
+    const ed = editor.value;
+    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,
@@ -1383,11 +1331,15 @@ function useBubbleMenu(options) {
     isItemDisabled,
     executeCommand,
     activeVersion,
-    getCachedIcon
+    getCachedIcon,
+    trailing,
+    openColorPicker,
+    openBlockContextMenu
   };
 }
 
 // src/bubble-menu/DomternalBubbleMenu.ts
+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>';
 var DomternalBubbleMenu = defineComponent({
   name: "DomternalBubbleMenu",
   props: {
@@ -1397,10 +1349,13 @@ var DomternalBubbleMenu = defineComponent({
     offset: { type: Number, default: 8 },
     updateDelay: { type: Number, default: 0 },
     items: { type: Array, default: void 0 },
-    contexts: { type: Object, default: void 0 }
+    contexts: { type: Object, default: void 0 },
+    icons: { type: Object, default: void 0 }
   },
   setup(props, { slots }) {
     const { editor: contextEditor } = useCurrentEditor();
+    const editorRef = computed(() => props.editor ?? contextEditor.value);
+    const iconsRef = computed(() => props.icons);
     const {
       menuRef,
       resolvedItems,
@@ -1408,67 +1363,300 @@ var DomternalBubbleMenu = defineComponent({
       isItemDisabled,
       executeCommand,
       activeVersion,
-      getCachedIcon
+      getCachedIcon,
+      trailing,
+      openColorPicker,
+      openBlockContextMenu
     } = useBubbleMenu({
-      editor: computed(() => props.editor ?? contextEditor.value),
+      editor: editorRef,
       shouldShow: props.shouldShow,
       placement: props.placement,
       offset: props.offset,
       updateDelay: props.updateDelay,
       items: props.items,
-      contexts: props.contexts
+      contexts: props.contexts,
+      icons: iconsRef
     });
+    const openDropdown = ref(null);
+    const closeDropdown = () => {
+      openDropdown.value = null;
+    };
+    const executeSubItem = (sub) => {
+      closeDropdown();
+      const ed = editorRef.value;
+      if (!ed) return;
+      ToolbarController.executeItem(ed, sub);
+      requestAnimationFrame(() => {
+        ed.view.focus();
+      });
+    };
+    const colorBtnRef = ref();
+    const blockMenuBtnRef = ref();
     return () => {
       void activeVersion.value;
-      return h("div", { ref: menuRef, class: "dm-bubble-menu", role: "toolbar", "aria-label": "Text formatting" }, [
-        ...resolvedItems.value.map((item) => {
-          if (item.type === "separator") {
-            return h("span", { key: item.name, class: "dm-toolbar-separator", role: "separator" });
+      const t = trailing.value;
+      const children = [];
+      for (const item of resolvedItems.value) {
+        if (item.type === "separator") {
+          children.push(h("span", { key: item.name, class: "dm-toolbar-separator", role: "separator" }));
+          continue;
+        }
+        if (item.type === "dropdown") {
+          children.push(
+            h(BubbleDropdown, {
+              key: item.name,
+              dropdown: item,
+              isOpen: openDropdown.value === item.name,
+              isItemActive,
+              getCachedIcon,
+              activeVersion: activeVersion.value,
+              executeSubItem,
+              onToggle: () => {
+                openDropdown.value = openDropdown.value === item.name ? null : item.name;
+              },
+              onClose: closeDropdown
+            })
+          );
+          continue;
+        }
+        const btn = item;
+        const active = isItemActive(btn);
+        children.push(h("button", {
+          key: btn.name,
+          type: "button",
+          class: ["dm-toolbar-button", active && "dm-toolbar-button--active"],
+          disabled: isItemDisabled(btn),
+          "aria-label": btn.label,
+          "aria-pressed": active,
+          title: btn.label,
+          innerHTML: getCachedIcon(btn.icon),
+          onMousedown: (e) => {
+            e.preventDefault();
+          },
+          onClick: (e) => {
+            executeCommand(btn, e);
           }
-          const btn = item;
-          const active = isItemActive(btn);
-          return h("button", {
-            key: btn.name,
+        }));
+      }
+      if (t.showColorPickerButton && !t.isNodeSelection) {
+        children.push(
+          h("span", { class: "dm-toolbar-separator", role: "separator" }),
+          h("button", {
+            ref: colorBtnRef,
             type: "button",
-            class: ["dm-toolbar-button", active && "dm-toolbar-button--active"],
-            disabled: isItemDisabled(btn),
-            "aria-label": btn.label,
-            "aria-pressed": active,
-            title: btn.label,
-            innerHTML: getCachedIcon(btn.icon),
-            onMousedown: (e) => e.preventDefault(),
-            onClick: () => executeCommand(btn)
-          });
-        }),
-        slots["default"]?.()
-      ]);
-    };
-  }
-});
-var DomternalFloatingMenu = defineComponent({
-  name: "DomternalFloatingMenu",
-  props: {
-    editor: { type: Object, default: void 0 },
-    shouldShow: { type: Function, default: void 0 },
-    offset: { type: Number, default: 0 }
-  },
+            class: ["dm-toolbar-button", "dm-ncp-trigger", t.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.value) openColorPicker(colorBtnRef.value);
+            }
+          }, [
+            h("span", {
+              class: "dm-ncp-trigger-glyph",
+              style: t.currentTextColorVar ? { color: t.currentTextColorVar } : void 0
+            }, "A"),
+            h("span", {
+              class: "dm-ncp-trigger-underline",
+              style: t.currentBgColorVar ? { backgroundColor: t.currentBgColorVar } : void 0
+            })
+          ])
+        );
+      }
+      if (t.showBlockMenuButton && !t.isNodeSelection) {
+        children.push(
+          h("span", { class: "dm-toolbar-separator", role: "separator" }),
+          h("button", {
+            ref: blockMenuBtnRef,
+            type: "button",
+            class: "dm-toolbar-button",
+            disabled: t.blockMenuButtonDisabled,
+            title: t.blockMenuButtonDisabled ? "Block actions (select within a single block)" : "More options",
+            "aria-label": "More options",
+            "aria-haspopup": "menu",
+            innerHTML: getCachedIcon("dotsThree"),
+            onMousedown: (e) => {
+              e.preventDefault();
+            },
+            onClick: () => {
+              if (blockMenuBtnRef.value) openBlockContextMenu(blockMenuBtnRef.value);
+            }
+          })
+        );
+      }
+      const slotContent = slots["default"]?.();
+      if (slotContent) children.push(...slotContent);
+      return h("div", {
+        ref: menuRef,
+        class: "dm-bubble-menu",
+        role: "toolbar",
+        "aria-label": "Text formatting"
+      }, children);
+    };
+  }
+});
+var BubbleDropdown = defineComponent({
+  name: "BubbleDropdown",
+  props: {
+    dropdown: { type: Object, required: true },
+    isOpen: { type: Boolean, required: true },
+    isItemActive: { type: Function, required: true },
+    getCachedIcon: { type: Function, required: true },
+    activeVersion: { type: Number, required: true },
+    executeSubItem: { type: Function, required: true }
+  },
+  emits: ["toggle", "close"],
+  setup(props, { emit }) {
+    const triggerRef = ref();
+    const panelRef = ref();
+    watch(
+      () => props.isOpen,
+      (open, _old, onCleanup) => {
+        if (!open) return;
+        const trigger = triggerRef.value;
+        const panel = panelRef.value;
+        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;
+          emit("close");
+        }, { signal });
+        document.addEventListener("keydown", (e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            emit("close");
+          }
+        }, { signal });
+        const editorEl = trigger.closest(".dm-editor");
+        editorEl?.addEventListener("dm:dismiss-overlays", () => {
+          emit("close");
+        }, { signal });
+        onCleanup(() => {
+          controller.abort();
+          cleanupFloating();
+        });
+      },
+      { flush: "post" }
+    );
+    return () => {
+      void props.activeVersion;
+      const dropdown = props.dropdown;
+      const dropdownActive = dropdown.items.some((sub) => props.isItemActive(sub));
+      const activeChild = dropdown.dynamicIcon ? dropdown.items.find((sub) => props.isItemActive(sub)) : void 0;
+      const triggerIcon = activeChild?.icon ?? dropdown.icon;
+      const triggerHtml = props.getCachedIcon(triggerIcon) + DROPDOWN_CARET2;
+      return h("div", {
+        class: "dm-toolbar-dropdown-wrapper",
+        "data-dropdown-wrapper": dropdown.name
+      }, [
+        h("button", {
+          ref: triggerRef,
+          type: "button",
+          class: ["dm-toolbar-button", "dm-toolbar-dropdown-trigger", dropdownActive && "dm-toolbar-button--active"],
+          "aria-expanded": props.isOpen,
+          "aria-haspopup": "true",
+          "aria-label": dropdown.label,
+          title: dropdown.label,
+          "data-dropdown": dropdown.name,
+          innerHTML: triggerHtml,
+          onMousedown: (e) => {
+            e.preventDefault();
+          },
+          onClick: () => {
+            emit("toggle");
+          }
+        }),
+        props.isOpen ? h("div", {
+          ref: panelRef,
+          class: "dm-toolbar-dropdown-panel",
+          role: "menu",
+          "data-dm-editor-ui": "",
+          "data-dropdown-panel": dropdown.name
+        }, dropdown.items.map((sub) => {
+          const subActive = props.isItemActive(sub);
+          const subHtml = `${props.getCachedIcon(sub.icon)} ${sub.label}`;
+          return h("button", {
+            key: sub.name,
+            type: "button",
+            class: ["dm-toolbar-dropdown-item", subActive && "dm-toolbar-dropdown-item--active"],
+            role: "menuitem",
+            "aria-label": sub.label,
+            innerHTML: subHtml,
+            onMousedown: (e) => {
+              e.preventDefault();
+            },
+            onClick: () => {
+              props.executeSubItem(sub);
+            }
+          });
+        })) : null
+      ]);
+    };
+  }
+});
+var DomternalFloatingMenu = defineComponent({
+  name: "DomternalFloatingMenu",
+  props: {
+    editor: { type: Object, default: void 0 },
+    shouldShow: { type: Function, default: void 0 },
+    offset: { type: Number, default: 0 },
+    items: {
+      type: [Array, Function],
+      default: void 0
+    },
+    keymap: { type: Object, default: void 0 },
+    icons: { type: Object, default: void 0 },
+    requireExplicitTrigger: { type: Boolean, default: false }
+  },
   setup(props, { slots }) {
     const { editor: contextEditor } = useCurrentEditor();
     const menuRef = ref();
-    const pluginKey = new PluginKey("vueFloatingMenu-" + Math.random().toString(36).slice(2, 8));
+    const cryptoRef = globalThis.crypto;
+    const pluginKey = new PluginKey(
+      "vueFloatingMenu-" + (cryptoRef?.randomUUID?.().slice(0, 8) ?? Math.random().toString(36).slice(2, 8))
+    );
+    const controller = shallowRef(null);
+    const version = ref(0);
     let registered = false;
     let stopWatch = null;
+    let currentEditor = null;
+    const resolveIcon = (name) => {
+      if (!name) return "";
+      return props.icons?.[name] ?? defaultIcons[name] ?? "";
+    };
     const doRegister = (editor) => {
       if (registered || editor.isDestroyed || !menuRef.value) return;
       registered = true;
+      currentEditor = editor;
       const plugin = createFloatingMenuPlugin({
         pluginKey,
         editor,
         element: menuRef.value,
         ...props.shouldShow && { shouldShow: props.shouldShow },
-        offset: props.offset
+        offset: props.offset,
+        ...props.keymap && { keymap: props.keymap },
+        requireExplicitTrigger: props.requireExplicitTrigger
       });
       editor.registerPlugin(plugin);
+      const hasCustomSlot = Boolean(slots["default"]);
+      if (!hasCustomSlot) {
+        const ctl = new FloatingMenuController(editor, () => {
+          version.value++;
+        }, props.items);
+        ctl.subscribe();
+        controller.value = ctl;
+      }
     };
     onMounted(() => {
       const ed = props.editor ?? contextEditor.value;
@@ -1487,14 +1675,149 @@ var DomternalFloatingMenu = defineComponent({
         );
       }
     });
+    watch(
+      () => [controller.value?.focusedIndex ?? -1, version.value],
+      ([focusedIndex]) => {
+        if (focusedIndex < 0 || !menuRef.value) return;
+        void nextTick(() => {
+          const target = menuRef.value?.querySelector(
+            `[data-floating-menu-index="${String(focusedIndex)}"]`
+          );
+          target?.focus();
+        });
+      }
+    );
     onScopeDispose(() => {
       stopWatch?.();
-      const editor = props.editor ?? contextEditor.value;
+      controller.value?.destroy();
+      controller.value = null;
+      const editor = currentEditor ?? props.editor ?? contextEditor.value;
       if (editor && !editor.isDestroyed) {
         editor.unregisterPlugin(pluginKey);
       }
     });
-    return () => h("div", { ref: menuRef, class: "dm-floating-menu" }, slots["default"]?.());
+    const onItemClick = (item) => {
+      const ctl = controller.value;
+      const ed = currentEditor;
+      if (!ctl || !ed) return;
+      ctl.execute(item);
+      requestAnimationFrame(() => {
+        ed.view.focus();
+      });
+    };
+    const onMenuKeyDown = (e) => {
+      const ctl = controller.value;
+      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();
+          currentEditor?.view.focus();
+          return;
+        case "Enter":
+        case " ":
+          if (focused) {
+            e.preventDefault();
+            onItemClick(focused);
+          }
+          return;
+        default:
+          return;
+      }
+    };
+    return () => {
+      if (slots["default"]) {
+        return h(
+          "div",
+          { ref: menuRef, class: "dm-floating-menu", "data-dm-editor-ui": "" },
+          slots["default"]()
+        );
+      }
+      const ctl = controller.value;
+      void version.value;
+      const groups = ctl?.groups ?? [];
+      const focusedIndex = ctl?.focusedIndex ?? -1;
+      const flatNames = groups.flatMap((g) => g.items.map((i) => i.name));
+      return h(
+        "div",
+        {
+          ref: menuRef,
+          class: "dm-floating-menu",
+          role: "menu",
+          "aria-label": "Insert block",
+          "data-dm-editor-ui": "",
+          onKeydown: onMenuKeyDown
+        },
+        groups.map((group, gi) => {
+          const groupId = `dm-fm-g${String(gi)}`;
+          return h("div", { key: group.name || `__group-${String(gi)}`, class: "dm-floating-menu-group-wrapper" }, [
+            group.name ? h("div", { class: "dm-floating-menu-group-label", id: groupId }, group.name) : null,
+            h(
+              "div",
+              {
+                class: "dm-floating-menu-group",
+                role: "group",
+                ...group.name ? { "aria-labelledby": groupId } : {}
+              },
+              group.items.map((item) => {
+                const flatIndex = flatNames.indexOf(item.name);
+                const isFocused = flatIndex === focusedIndex;
+                const disabled = ctl?.isDisabled(item) ?? false;
+                const iconHtml = resolveIcon(item.icon);
+                return h(
+                  "button",
+                  {
+                    key: item.name,
+                    type: "button",
+                    role: "menuitem",
+                    class: "dm-floating-menu-item",
+                    "data-floating-menu-item": item.name,
+                    "data-floating-menu-index": String(flatIndex),
+                    tabindex: isFocused || focusedIndex < 0 && flatIndex === 0 ? 0 : -1,
+                    "aria-disabled": disabled ? "true" : void 0,
+                    "aria-keyshortcuts": item.shortcut,
+                    disabled,
+                    onMousedown: (e) => {
+                      e.preventDefault();
+                    },
+                    onClick: () => {
+                      onItemClick(item);
+                    }
+                  },
+                  [
+                    iconHtml ? h("span", {
+                      class: "dm-floating-menu-item-icon",
+                      "aria-hidden": "true",
+                      innerHTML: iconHtml
+                    }) : null,
+                    h("span", { class: "dm-floating-menu-item-label" }, item.label),
+                    item.shortcut ? h("span", { class: "dm-floating-menu-item-shortcut", "aria-hidden": "true" }, item.shortcut) : null
+                  ]
+                );
+              })
+            )
+          ]);
+        })
+      );
+    };
   }
 });
 var SCROLL_SETTLE_MS = 50;
@@ -1533,7 +1856,8 @@ function useEmojiPicker(editor, emojis) {
   const frequentlyUsed = computed(() => {
     if (!isOpen.value) return [];
     const storage = getEmojiStorage(editor.value);
-    const getFreq = storage?.["getFrequentlyUsed"];
+    if (!storage) return [];
+    const getFreq = storage["getFrequentlyUsed"];
     if (!getFreq) return [];
     const names = getFreq();
     if (!names.length) return [];
@@ -1565,7 +1889,9 @@ function useEmojiPicker(editor, emojis) {
     clickOutsideHandler = (e) => {
       const target = e.target;
       if (pickerRef.value && !pickerRef.value.contains(target) && target !== anchorEl && !anchorEl?.contains(target)) {
-        requestAnimationFrame(() => close());
+        requestAnimationFrame(() => {
+          close();
+        });
       }
     };
     document.addEventListener("mousedown", clickOutsideHandler);
@@ -1743,7 +2069,7 @@ var DomternalEmojiPicker = defineComponent({
       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();
@@ -1788,8 +2114,12 @@ var DomternalEmojiPicker = defineComponent({
         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);
+        }
       }, item.emoji);
     }
     return () => {
@@ -1824,8 +2154,12 @@ var DomternalEmojiPicker = defineComponent({
                 "aria-selected": activeCategory.value === cat,
                 title: cat,
                 "aria-label": cat,
-                onMousedown: (e) => e.preventDefault(),
-                onClick: () => scrollToCategory(cat)
+                onMousedown: (e) => {
+                  e.preventDefault();
+                },
+                onClick: () => {
+                  scrollToCategory(cat);
+                }
               }, categoryIcon(cat))
             )
           ),
@@ -1855,6 +2189,552 @@ var DomternalEmojiPicker = defineComponent({
     };
   }
 });
+
+// src/Domternal.ts
+var Domternal = defineComponent({
+  name: "Domternal",
+  props: {
+    extensions: { type: Array, default: void 0 },
+    content: { type: [String, Object], default: "" },
+    editable: { type: Boolean, default: true },
+    autofocus: { type: [Boolean, String, Number], default: false },
+    outputFormat: { type: String, default: "html" },
+    immediatelyRender: { type: Boolean, default: false },
+    onCreate: { type: Function, default: void 0 },
+    onUpdate: { type: Function, default: void 0 },
+    onSelectionChange: { type: Function, default: void 0 },
+    onFocus: { type: Function, default: void 0 },
+    onBlur: { type: Function, default: void 0 },
+    onDestroy: { type: Function, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const { editor } = useEditor({
+      ...props.extensions && { extensions: props.extensions },
+      content: props.content,
+      editable: props.editable,
+      autofocus: props.autofocus,
+      outputFormat: props.outputFormat,
+      immediatelyRender: props.immediatelyRender,
+      ...props.onCreate && { onCreate: props.onCreate },
+      ...props.onUpdate && { onUpdate: props.onUpdate },
+      ...props.onSelectionChange && { onSelectionChange: props.onSelectionChange },
+      ...props.onFocus && { onFocus: props.onFocus },
+      ...props.onBlur && { onBlur: props.onBlur },
+      ...props.onDestroy && { onDestroy: props.onDestroy }
+    });
+    provideEditor(editor);
+    watch(
+      () => props.editable,
+      (newEditable) => {
+        const ed = editor.value;
+        if (ed && !ed.isDestroyed) ed.setEditable(newEditable);
+      }
+    );
+    return () => slots["default"]?.();
+  }
+});
+var DomternalContent = defineComponent({
+  name: "DomternalContent",
+  props: {
+    class: { type: String, default: void 0 }
+  },
+  setup(props) {
+    const { editor } = useCurrentEditor();
+    const containerRef = ref();
+    watchEffect(() => {
+      const container = containerRef.value;
+      const ed = editor.value;
+      if (!container || !ed || ed.isDestroyed) return;
+      const editorDom = ed.view.dom;
+      if (editorDom.parentElement !== container) {
+        container.appendChild(editorDom);
+      }
+    });
+    return () => {
+      const classes = props.class ? `dm-editor ${props.class}` : "dm-editor";
+      return h("div", { class: classes, "data-dm-editor-ui": "" }, [h("div", { ref: containerRef })]);
+    };
+  }
+});
+var DomternalLoading = defineComponent({
+  name: "DomternalLoading",
+  setup(_props, { slots }) {
+    const { editor } = useCurrentEditor();
+    return () => editor.value ? null : slots["default"]?.();
+  }
+});
+Domternal.Content = DomternalContent;
+Domternal.Loading = DomternalLoading;
+Domternal.Toolbar = DomternalToolbar;
+Domternal.BubbleMenu = DomternalBubbleMenu;
+Domternal.FloatingMenu = DomternalFloatingMenu;
+Domternal.EmojiPicker = DomternalEmojiPicker;
+var DomternalEditor = defineComponent({
+  name: "DomternalEditor",
+  props: {
+    extensions: { type: Array, default: void 0 },
+    content: { type: [String, Object], default: void 0 },
+    editable: { type: Boolean, default: true },
+    autofocus: { type: [Boolean, String, Number], default: false },
+    immediatelyRender: { type: Boolean, default: false },
+    outputFormat: { type: String, default: "html" },
+    modelValue: { type: [String, Object], default: void 0 },
+    class: { type: String, default: void 0 },
+    onCreate: { type: Function, default: void 0 },
+    onUpdate: { type: Function, default: void 0 },
+    onSelectionChange: { type: Function, default: void 0 },
+    onFocus: { type: Function, default: void 0 },
+    onBlur: { type: Function, default: void 0 },
+    onDestroy: { type: Function, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": (_value) => true
+  },
+  setup(props, { slots, emit, expose }) {
+    const { editor, editorRef } = useEditor({
+      ...props.extensions && { extensions: props.extensions },
+      content: props.modelValue ?? props.content ?? "",
+      editable: props.editable,
+      autofocus: props.autofocus,
+      immediatelyRender: props.immediatelyRender,
+      outputFormat: props.outputFormat,
+      ...props.onCreate && { onCreate: props.onCreate },
+      ...props.onUpdate && { onUpdate: props.onUpdate },
+      ...props.onSelectionChange && { onSelectionChange: props.onSelectionChange },
+      ...props.onFocus && { onFocus: props.onFocus },
+      ...props.onBlur && { onBlur: props.onBlur },
+      ...props.onDestroy && { onDestroy: props.onDestroy }
+    });
+    const state = useEditorState(editor);
+    expose({
+      editor,
+      htmlContent: state.htmlContent,
+      jsonContent: state.jsonContent,
+      isEmpty: state.isEmpty,
+      isFocused: state.isFocused
+    });
+    provideEditor(editor);
+    watch(
+      () => props.editable,
+      (newEditable) => {
+        const ed = editor.value;
+        if (ed && !ed.isDestroyed) ed.setEditable(newEditable);
+      }
+    );
+    const prevModelValue = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        if (newValue === void 0) return;
+        const ed = editor.value;
+        if (!ed || ed.isDestroyed) return;
+        if (newValue === prevModelValue.value) return;
+        prevModelValue.value = newValue;
+        if (props.outputFormat === "html") {
+          if (newValue !== ed.getHTML()) {
+            ed.setContent(newValue, false);
+          }
+        } else {
+          if (JSON.stringify(newValue) !== JSON.stringify(ed.getJSON())) {
+            ed.setContent(newValue, false);
+          }
+        }
+      },
+      { flush: "post" }
+    );
+    watch(editor, (ed, _oldEd, onCleanup) => {
+      if (!ed || ed.isDestroyed) return;
+      const handler = () => {
+        const val = props.outputFormat === "html" ? ed.getHTML() : ed.getJSON();
+        prevModelValue.value = val;
+        emit("update:modelValue", val);
+      };
+      ed.on("update", handler);
+      onCleanup(() => {
+        ed.off("update", handler);
+      });
+    }, { immediate: true });
+    return () => {
+      const classes = props.class ? `dm-editor ${props.class}` : "dm-editor";
+      return [
+        h("div", { class: classes, "data-dm-editor-ui": "" }, [h("div", { ref: editorRef })]),
+        slots["default"]?.()
+      ];
+    };
+  }
+});
+var EditorContent = defineComponent({
+  name: "EditorContent",
+  props: {
+    editor: {
+      type: Object,
+      default: null
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const containerRef = ref();
+    watchEffect(() => {
+      const container = containerRef.value;
+      const editor = props.editor;
+      if (!container || !editor || editor.isDestroyed) return;
+      const editorDom = editor.view.dom;
+      if (editorDom.parentElement !== container) {
+        container.appendChild(editorDom);
+      }
+    });
+    return () => h("div", {
+      ref: containerRef,
+      class: props.class,
+      "data-dm-editor-ui": ""
+    });
+  }
+});
+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 = ref(false);
+  const anchorEl = shallowRef(null);
+  const hostEl = shallowRef(null);
+  const panelRef = ref();
+  const currentTextToken = ref(null);
+  const currentBgToken = ref(null);
+  const palette = shallowRef([]);
+  const setStorageOpen2 = (open) => {
+    const ed = editor.value;
+    if (!ed) return;
+    const slot = ed.storage["notionColorPicker"];
+    if (slot && typeof slot === "object") {
+      slot.isOpen = open;
+    }
+  };
+  const syncFromSelection = () => {
+    const ed = editor.value;
+    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 ?? {};
+    currentTextToken.value = attrs.colorToken ?? null;
+    currentBgToken.value = attrs.backgroundColorToken ?? null;
+  };
+  const close = (opts = {}) => {
+    if (!isOpen.value) return;
+    isOpen.value = false;
+    setStorageOpen2(false);
+    if (opts.refocus) {
+      editor.value?.view.focus();
+    }
+    anchorEl.value = null;
+  };
+  watch(
+    editor,
+    (ed, _oldEd, onCleanup) => {
+      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] : [];
+      const onOpen = (...args) => {
+        const detail = args[0];
+        const incomingAnchor = detail?.anchorElement;
+        if (!incomingAnchor) return;
+        if (isOpen.value && anchorEl.value === incomingAnchor) {
+          close({ refocus: true });
+          return;
+        }
+        anchorEl.value = incomingAnchor;
+        syncFromSelection();
+        isOpen.value = true;
+        setStorageOpen2(true);
+      };
+      const onSelectionUpdate = () => {
+        if (!isOpen.value) return;
+        if (!anchorEl.value?.isConnected) {
+          close();
+          return;
+        }
+        if (ed.state.selection.empty) {
+          close();
+        } else {
+          syncFromSelection();
+        }
+      };
+      ed.on("notionColorOpen", onOpen);
+      ed.on("selectionUpdate", onSelectionUpdate);
+      onCleanup(() => {
+        ed.off("notionColorOpen", onOpen);
+        ed.off("selectionUpdate", onSelectionUpdate);
+        if (isOpen.value) setStorageOpen2(false);
+      });
+    },
+    { immediate: true }
+  );
+  watch(isOpen, (open, _old, onCleanup) => {
+    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 });
+    onCleanup(() => {
+      controller.abort();
+    });
+  });
+  const applyText = (token) => {
+    const ed = editor.value;
+    if (!ed) return;
+    ed.commands.setTextColorToken(token);
+    syncFromSelection();
+  };
+  const applyBg = (token) => {
+    const ed = editor.value;
+    if (!ed) return;
+    ed.commands.setBackgroundColorToken(token);
+    syncFromSelection();
+  };
+  const tokenLabel = (token) => {
+    return TOKEN_LABELS[token] ?? token.charAt(0).toUpperCase() + token.slice(1);
+  };
+  const onPanelKeydown = (event) => {
+    const cols = 5;
+    const root = panelRef.value;
+    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
+  };
+}
+
+// src/notion-color-picker/DomternalNotionColorPicker.ts
+var DomternalNotionColorPicker = defineComponent({
+  name: "DomternalNotionColorPicker",
+  props: {
+    editor: { type: Object, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const { editor: contextEditor } = useCurrentEditor();
+    const editorRef = computed(() => props.editor ?? contextEditor.value);
+    const api = useNotionColorPicker({ editor: editorRef });
+    const {
+      isOpen,
+      hostEl,
+      anchorEl,
+      panelRef,
+      currentTextToken,
+      currentBgToken,
+      palette,
+      applyText,
+      applyBg,
+      tokenLabel,
+      onPanelKeydown
+    } = api;
+    watch(
+      [isOpen, anchorEl],
+      ([open, anchor], _old, onCleanup) => {
+        if (!open || !anchor || !panelRef.value) return;
+        const panel = panelRef.value;
+        const cleanupFloating = positionFloating(anchor, 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 });
+          });
+        });
+        onCleanup(() => {
+          cancelAnimationFrame(id1);
+          if (id2) cancelAnimationFrame(id2);
+          cleanupFloating();
+        });
+      },
+      { flush: "post" }
+    );
+    const renderDefaultPanel = () => {
+      const tToken = currentTextToken.value;
+      const bToken = currentBgToken.value;
+      const pal = palette.value;
+      return [
+        h("div", { class: "dm-ncp-section" }, [
+          h("div", { class: "dm-ncp-label" }, "Text color"),
+          h("div", { class: "dm-ncp-grid" }, [
+            h("button", {
+              type: "button",
+              class: ["dm-ncp-swatch", "dm-ncp-swatch--text", tToken === null && "dm-ncp-active"],
+              "aria-pressed": tToken === null,
+              "data-color": "null",
+              title: "Default text color",
+              "aria-label": "Default text color",
+              onMousedown: (e) => {
+                e.preventDefault();
+              },
+              onClick: () => {
+                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);
+              }
+            }))
+          ])
+        ]),
+        h("div", { class: "dm-ncp-section" }, [
+          h("div", { class: "dm-ncp-label" }, "Background color"),
+          h("div", { class: "dm-ncp-grid" }, [
+            h("button", {
+              type: "button",
+              class: ["dm-ncp-swatch", "dm-ncp-swatch--bg", bToken === null && "dm-ncp-active"],
+              "aria-pressed": bToken === null,
+              "data-color": "null",
+              title: "Default background",
+              "aria-label": "Default background",
+              onMousedown: (e) => {
+                e.preventDefault();
+              },
+              onClick: () => {
+                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);
+              }
+            }))
+          ])
+        ])
+      ];
+    };
+    return () => {
+      if (!isOpen.value || !hostEl.value) return null;
+      const slot = slots["default"];
+      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)
+      ]);
+    };
+  }
+});
 var NODE_VIEW_ON_DRAG_START = /* @__PURE__ */ Symbol("domternal-node-view-drag");
 var NODE_VIEW_CONTENT_REF = /* @__PURE__ */ Symbol("domternal-node-view-content");
 function useVueNodeView() {
@@ -1865,7 +2745,7 @@ function useVueNodeView() {
 
 // src/node-views/VueNodeViewRenderer.ts
 function VueNodeViewRenderer(component, options = {}) {
-  const normalizedComponent = typeof component === "function" && "__vccOpts" in component ? component["__vccOpts"] ?? component : component;
+  const normalizedComponent = typeof component === "function" ? component["__vccOpts"] ?? component : component;
   markRaw(normalizedComponent);
   const constructor = (node, _view, getPos, decorations) => {
     const ctx = constructor.__domternalContext;
@@ -1878,8 +2758,8 @@ function VueNodeViewRenderer(component, options = {}) {
         appContextStore.set(editor, appContext);
       }
     }
-    if (!appContext) {
-      if (typeof globalThis !== "undefined" && globalThis.__DEV__ !== false) {
+    if (!appContext || !editor) {
+      if (globalThis.__DEV__ !== false) {
         console.warn(
           "[VueNodeViewRenderer] appContext not found for editor. Custom Vue node views require provideEditor(editor) to be called, either manually after useEditor() or automatically via <Domternal> root."
         );
@@ -2036,11 +2916,7 @@ var NodeViewContent = defineComponent({
     };
   }
 });
-Domternal.Toolbar = DomternalToolbar;
-Domternal.BubbleMenu = DomternalBubbleMenu;
-Domternal.FloatingMenu = DomternalFloatingMenu;
-Domternal.EmojiPicker = DomternalEmojiPicker;
 
-export { DEFAULT_EXTENSIONS, Domternal, DomternalBubbleMenu, DomternalEditor, DomternalEmojiPicker, DomternalFloatingMenu, DomternalToolbar, EDITOR_KEY, EditorContent, NodeViewContent, NodeViewWrapper, VueNodeViewRenderer, provideEditor, useCurrentEditor, useEditor, useEditorState, useVueNodeView };
+export { DEFAULT_EXTENSIONS, Domternal, DomternalBubbleMenu, DomternalEditor, DomternalEmojiPicker, DomternalFloatingMenu, DomternalNotionColorPicker, DomternalToolbar, EDITOR_KEY, EditorContent, NodeViewContent, NodeViewWrapper, VueNodeViewRenderer, provideEditor, useCurrentEditor, useEditor, useEditorState, useNotionColorPicker, useVueNodeView };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map