@domternal/vue 0.6.0

package/dist/index.js

@@ -0,0 +1,2046 @@
+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';
+export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
+
+// src/useEditor.ts
+var DEFAULT_EXTENSIONS = [Document, Paragraph, Text, BaseKeymap, History];
+function useEditor(options = {}) {
+  const editor = shallowRef(null);
+  const editorRef = ref();
+  let pendingContent = null;
+  function wireEvents(ed) {
+    ed.on("transaction", ({ transaction }) => {
+      if (transaction.docChanged) {
+        options.onUpdate?.({ editor: ed });
+      }
+      if (!transaction.docChanged && transaction.selectionSet) {
+        options.onSelectionChange?.({ editor: ed });
+      }
+    });
+    ed.on("focus", ({ event }) => {
+      options.onFocus?.({ editor: ed, event });
+    });
+    ed.on("blur", ({ event }) => {
+      options.onBlur?.({ editor: ed, event });
+    });
+  }
+  function createEditorInstance(element, initialContent, focus) {
+    const extensions = options.extensions ?? [];
+    const editable = options.editable ?? true;
+    const ed = new Editor({
+      element,
+      extensions: [...DEFAULT_EXTENSIONS, ...extensions],
+      content: initialContent,
+      editable,
+      autofocus: focus
+    });
+    markRaw(ed);
+    wireEvents(ed);
+    editor.value = ed;
+    options.onCreate?.(ed);
+    return ed;
+  }
+  function destroyCurrentEditor() {
+    const current = editor.value;
+    if (current && !current.isDestroyed) {
+      pendingContent = current.getJSON();
+      options.onDestroy?.();
+      const dom = current.view.dom;
+      const parent = dom?.parentNode;
+      if (parent) {
+        const clone = dom.cloneNode(true);
+        clone.style.pointerEvents = "none";
+        parent.insertBefore(clone, dom);
+      }
+      current.destroy();
+    }
+    editor.value = null;
+  }
+  if (options.immediatelyRender) {
+    const element = document.createElement("div");
+    createEditorInstance(element, options.content ?? "", options.autofocus ?? false);
+  }
+  onMounted(() => {
+    if (editor.value) return;
+    const element = editorRef.value ?? document.createElement("div");
+    const initialContent = pendingContent ?? options.content ?? "";
+    pendingContent = null;
+    createEditorInstance(element, initialContent, options.autofocus ?? false);
+  });
+  onScopeDispose(() => {
+    destroyCurrentEditor();
+  });
+  watch(
+    () => options.editable ?? true,
+    (newEditable) => {
+      const ed = editor.value;
+      if (ed && !ed.isDestroyed) {
+        ed.setEditable(newEditable);
+      }
+    }
+  );
+  watch(
+    () => options.extensions,
+    (newExtensions, oldExtensions) => {
+      if (!editor.value || editor.value.isDestroyed) return;
+      if (newExtensions === oldExtensions) return;
+      const element = editor.value.view.dom.parentElement ?? document.createElement("div");
+      destroyCurrentEditor();
+      const initialContent = pendingContent ?? "";
+      pendingContent = null;
+      createEditorInstance(element, initialContent, false);
+    }
+  );
+  watch(
+    () => options.content,
+    (newContent) => {
+      const ed = editor.value;
+      if (!ed || ed.isDestroyed || newContent === void 0) return;
+      const outputFormat = options.outputFormat ?? "html";
+      if (outputFormat === "html") {
+        if (newContent !== ed.getHTML()) {
+          ed.setContent(newContent, false);
+        }
+      } else {
+        if (JSON.stringify(newContent) !== JSON.stringify(ed.getJSON())) {
+          ed.setContent(newContent, false);
+        }
+      }
+    },
+    { flush: "post" }
+  );
+  return { editor, editorRef };
+}
+function useDebouncedRef(initialValue) {
+  let value = initialValue;
+  let rafId1;
+  let rafId2;
+  return customRef((track, trigger) => ({
+    get() {
+      track();
+      return value;
+    },
+    set(newValue) {
+      value = newValue;
+      if (rafId1 !== void 0) cancelAnimationFrame(rafId1);
+      if (rafId2 !== void 0) cancelAnimationFrame(rafId2);
+      rafId1 = requestAnimationFrame(() => {
+        rafId2 = requestAnimationFrame(() => {
+          rafId1 = rafId2 = void 0;
+          trigger();
+        });
+      });
+    }
+  }));
+}
+var appContextStore = /* @__PURE__ */ new WeakMap();
+var pendingAppContextStore = { value: null };
+
+// src/useEditorState.ts
+function useEditorState(editor, selector) {
+  if (selector) {
+    return useEditorStateSelector(editor, selector);
+  }
+  return useEditorStateFull(editor);
+}
+function getFullState(ed) {
+  if (!ed || ed.isDestroyed) {
+    return { html: "", json: null, empty: true, focused: false, editable: true };
+  }
+  return {
+    html: ed.getHTML(),
+    json: ed.getJSON(),
+    empty: ed.isEmpty,
+    focused: ed.isFocused,
+    editable: ed.isEditable
+  };
+}
+function useEditorStateFull(editor) {
+  const initial = getFullState(editor.value);
+  const htmlContent = ref(initial.html);
+  const jsonContent = ref(initial.json);
+  const isEmpty = ref(initial.empty);
+  const isFocused = ref(initial.focused);
+  const isEditable = ref(initial.editable);
+  watch(
+    editor,
+    (ed, _oldEd, onCleanup) => {
+      if (!ed || ed.isDestroyed) {
+        htmlContent.value = "";
+        jsonContent.value = null;
+        isEmpty.value = true;
+        isFocused.value = false;
+        isEditable.value = true;
+        return;
+      }
+      const state = getFullState(ed);
+      htmlContent.value = state.html;
+      jsonContent.value = state.json;
+      isEmpty.value = state.empty;
+      isFocused.value = state.focused;
+      isEditable.value = state.editable;
+      const onTransaction = () => {
+        const html = ed.getHTML();
+        const json = ed.getJSON();
+        const empty = ed.isEmpty;
+        const editable = ed.isEditable;
+        if (htmlContent.value !== html) htmlContent.value = html;
+        if (isEmpty.value !== empty) isEmpty.value = empty;
+        if (isEditable.value !== editable) isEditable.value = editable;
+        jsonContent.value = json;
+      };
+      const onFocus = () => {
+        if (!isFocused.value) isFocused.value = true;
+      };
+      const onBlur = () => {
+        if (isFocused.value) isFocused.value = false;
+      };
+      ed.on("transaction", onTransaction);
+      ed.on("focus", onFocus);
+      ed.on("blur", onBlur);
+      onCleanup(() => {
+        ed.off("transaction", onTransaction);
+        ed.off("focus", onFocus);
+        ed.off("blur", onBlur);
+      });
+    },
+    { immediate: true }
+  );
+  return { htmlContent, jsonContent, isEmpty, isFocused, isEditable };
+}
+function useEditorStateSelector(editor, selector) {
+  const version = useDebouncedRef(0);
+  watch(
+    editor,
+    (ed, _oldEd, onCleanup) => {
+      if (!ed || ed.isDestroyed) return;
+      const bump = () => {
+        version.value++;
+      };
+      ed.on("transaction", bump);
+      ed.on("focus", bump);
+      ed.on("blur", bump);
+      onCleanup(() => {
+        ed.off("transaction", bump);
+        ed.off("focus", bump);
+        ed.off("blur", bump);
+      });
+    },
+    { immediate: true }
+  );
+  return computed(() => {
+    void version.value;
+    const ed = editor.value;
+    if (!ed || ed.isDestroyed) return void 0;
+    return selector(ed);
+  });
+}
+var EDITOR_KEY = /* @__PURE__ */ Symbol("domternal-editor");
+function provideEditor(editor) {
+  provide(EDITOR_KEY, editor);
+  const instance = getCurrentInstance();
+  if (instance) {
+    const buildCtx = () => {
+      const ctx = Object.create(instance.appContext);
+      ctx.provides = instance.provides;
+      return ctx;
+    };
+    pendingAppContextStore.value = buildCtx();
+    watchEffect(() => {
+      const ed = editor.value;
+      if (ed) {
+        appContextStore.set(ed, buildCtx());
+        pendingAppContextStore.value = null;
+      }
+    });
+  }
+}
+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);
+  const openDropdown = ref(null);
+  const activeVersion = useDebouncedRef(0);
+  let controller = null;
+  const toolbarRef = ref();
+  let cleanupFloating = null;
+  let clickOutsideHandler = null;
+  let dismissOverlayHandler = null;
+  let editorEl = null;
+  let syncStateRaf = 0;
+  function syncState() {
+    cancelAnimationFrame(syncStateRaf);
+    syncStateRaf = requestAnimationFrame(() => {
+      if (!controller) return;
+      const controllerGroups = controller.groups;
+      if (groups.value.length !== controllerGroups.length) {
+        groups.value = controllerGroups;
+      }
+      focusedIndex.value = controller.focusedIndex;
+      openDropdown.value = controller.openDropdown;
+      activeVersion.value++;
+    });
+  }
+  watch(
+    editor,
+    (ed) => {
+      if (controller || !ed || ed.isDestroyed) return;
+      controller = new ToolbarController(
+        ed,
+        syncState,
+        layout
+      );
+      controller.subscribe();
+      syncState();
+      clickOutsideHandler = (e) => {
+        if (controller?.openDropdown && toolbarRef.value && !toolbarRef.value.contains(e.target)) {
+          cleanupFloating?.();
+          cleanupFloating = null;
+          controller.closeDropdown();
+          syncState();
+        }
+      };
+      document.addEventListener("mousedown", clickOutsideHandler);
+      editorEl = ed.view.dom.closest(".dm-editor");
+      if (editorEl) {
+        dismissOverlayHandler = () => {
+          if (controller?.openDropdown) {
+            cleanupFloating?.();
+            cleanupFloating = null;
+            controller.closeDropdown();
+            syncState();
+          }
+        };
+        editorEl.addEventListener("dm:dismiss-overlays", dismissOverlayHandler);
+      }
+    },
+    { immediate: true }
+  );
+  onScopeDispose(() => {
+    cancelAnimationFrame(syncStateRaf);
+    cleanupFloating?.();
+    cleanupFloating = null;
+    if (clickOutsideHandler) {
+      document.removeEventListener("mousedown", clickOutsideHandler);
+      clickOutsideHandler = null;
+    }
+    if (dismissOverlayHandler && editorEl) {
+      editorEl.removeEventListener("dm:dismiss-overlays", dismissOverlayHandler);
+      dismissOverlayHandler = null;
+      editorEl = null;
+    }
+    controller?.destroy();
+    controller = null;
+  });
+  function isActive(name) {
+    return controller?.activeMap.get(name) ?? false;
+  }
+  function isDisabled(name) {
+    return controller?.disabledMap.get(name) ?? false;
+  }
+  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);
+  }
+  function getAriaExpanded(item) {
+    if (!item.emitEvent) return null;
+    return controller?.expandedMap.get(item.name) ? "true" : null;
+  }
+  function getFlatIndex(name) {
+    return controller?.getFlatIndex(name) ?? -1;
+  }
+  function handleDropdownToggle(dropdown) {
+    if (!controller) return;
+    cleanupFloating?.();
+    cleanupFloating = null;
+    controller.toggleDropdown(dropdown.name);
+    syncState();
+    if (controller.openDropdown) {
+      requestAnimationFrame(() => {
+        const trigger = toolbarRef.value?.querySelector('[aria-expanded="true"]');
+        const panel = trigger?.parentElement?.querySelector(".dm-toolbar-dropdown-panel");
+        if (trigger && panel) {
+          const placement = dropdown.layout === "grid" ? "bottom" : "bottom-start";
+          cleanupFloating = positionFloatingOnce(trigger, panel, {
+            placement,
+            offsetValue: 4
+          });
+        }
+      });
+    }
+  }
+  function closeDropdown() {
+    cleanupFloating?.();
+    cleanupFloating = null;
+    controller?.closeDropdown();
+    syncState();
+  }
+  function executeCommand(item) {
+    controller?.executeCommand(item);
+  }
+  return {
+    controller: { get current() {
+      return controller;
+    } },
+    groups,
+    focusedIndex,
+    openDropdown,
+    activeVersion,
+    toolbarRef,
+    isActive,
+    isDisabled,
+    isDropdownActive,
+    getAriaExpanded,
+    getFlatIndex,
+    handleDropdownToggle,
+    closeDropdown,
+    executeCommand,
+    syncState
+  };
+}
+var DROPDOWN_CARET = '<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 useToolbarIcons(icons) {
+  const cache = /* @__PURE__ */ new Map();
+  let prevIcons = icons;
+  function checkCacheInvalidation(currentIcons) {
+    if (currentIcons !== prevIcons) {
+      cache.clear();
+      prevIcons = currentIcons;
+    }
+  }
+  function resolveIconSvg(name) {
+    if (icons) {
+      return icons[name] ?? "";
+    }
+    return defaultIcons[name] ?? "";
+  }
+  function getCachedIcon(name) {
+    checkCacheInvalidation(icons);
+    const key = `i:${name}`;
+    let cached = cache.get(key);
+    if (!cached) {
+      cached = resolveIconSvg(name);
+      cache.set(key, cached);
+    }
+    return cached;
+  }
+  function getCachedTriggerLabel(label, isIcon) {
+    checkCacheInvalidation(icons);
+    const key = `tl:${label}:${isIcon ? "1" : "0"}`;
+    let cached = cache.get(key);
+    if (!cached) {
+      const content = isIcon ? resolveIconSvg(label) : label;
+      cached = `<span class="dm-toolbar-trigger-label">${content}</span>${DROPDOWN_CARET}`;
+      cache.set(key, cached);
+    }
+    return cached;
+  }
+  function getCachedTriggerIcon(iconName) {
+    checkCacheInvalidation(icons);
+    const key = `t:${iconName}`;
+    let cached = cache.get(key);
+    if (!cached) {
+      cached = resolveIconSvg(iconName) + DROPDOWN_CARET;
+      cache.set(key, cached);
+    }
+    return cached;
+  }
+  function getCachedItemContent(iconName, label, displayMode) {
+    const mode = displayMode ?? "icon-text";
+    checkCacheInvalidation(icons);
+    const key = `dc:${iconName}:${label}:${mode}`;
+    let cached = cache.get(key);
+    if (!cached) {
+      if (mode === "text") {
+        cached = label;
+      } else if (mode === "icon") {
+        cached = resolveIconSvg(iconName);
+      } else {
+        cached = resolveIconSvg(iconName) + " " + label;
+      }
+      cache.set(key, cached);
+    }
+    return cached;
+  }
+  function getDropdownTriggerHtml(dropdown, activeItem) {
+    checkCacheInvalidation(icons);
+    if (dropdown.layout === "grid") {
+      const color = activeItem?.color ?? dropdown.defaultIndicatorColor ?? null;
+      const key = `tr:${dropdown.icon}:${color ?? ""}`;
+      let cached = cache.get(key);
+      if (!cached) {
+        cached = resolveIconSvg(dropdown.icon) + DROPDOWN_CARET;
+        if (color) {
+          cached += `<span class="dm-toolbar-color-indicator" style="background-color: ${color}"></span>`;
+        }
+        cache.set(key, cached);
+      }
+      return cached;
+    }
+    if (dropdown.dynamicLabel) {
+      if (activeItem) return getCachedTriggerLabel(activeItem.label);
+      if (dropdown.dynamicLabelFallback) return getCachedTriggerLabel(dropdown.dynamicLabelFallback);
+      return getCachedTriggerLabel(dropdown.icon, true);
+    }
+    const icon = dropdown.dynamicIcon && activeItem ? activeItem.icon : dropdown.icon;
+    return getCachedTriggerIcon(icon);
+  }
+  return {
+    resolveIconSvg,
+    getCachedIcon,
+    getCachedTriggerLabel,
+    getCachedTriggerIcon,
+    getCachedItemContent,
+    getDropdownTriggerHtml
+  };
+}
+
+// src/toolbar/useTooltip.ts
+var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+var MODIFIER_MAP = isMac ? { Mod: "\u2318", Shift: "\u21E7", Alt: "\u2325" } : { Mod: "Ctrl", Shift: "Shift", Alt: "Alt" };
+function useTooltip() {
+  function getTooltip(item) {
+    if (!item.shortcut) return item.label;
+    const parts = item.shortcut.split("-").map((part) => MODIFIER_MAP[part] ?? part);
+    const shortcut = isMac ? parts.join("") : parts.join("+");
+    return `${item.label} (${shortcut})`;
+  }
+  return { getTooltip };
+}
+
+// src/toolbar/useKeyboardNav.ts
+function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
+  function focusCurrentButton() {
+    const buttons = toolbarRef.value?.querySelectorAll(".dm-toolbar-button");
+    const controller = controllerRef.current;
+    if (buttons && controller) {
+      const btn = buttons[controller.focusedIndex];
+      btn?.focus();
+    }
+  }
+  function focusDropdownItem(direction, first) {
+    const panel = toolbarRef.value?.querySelector(".dm-toolbar-dropdown-panel");
+    if (!panel) return;
+    const items = Array.from(panel.querySelectorAll('[role="menuitem"]'));
+    if (!items.length) return;
+    if (first) {
+      items[0]?.focus();
+      return;
+    }
+    const current = document.activeElement;
+    const idx = items.indexOf(current);
+    const next = idx === -1 ? direction > 0 ? 0 : items.length - 1 : (idx + direction + items.length) % items.length;
+    items[next]?.focus();
+  }
+  function onKeyDown(event) {
+    const controller = controllerRef.current;
+    if (!controller) return;
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault();
+        controller.navigateNext();
+        focusCurrentButton();
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        controller.navigatePrev();
+        focusCurrentButton();
+        break;
+      case "ArrowDown": {
+        event.preventDefault();
+        if (controller.openDropdown) {
+          focusDropdownItem(1);
+        } else {
+          const btn = document.activeElement;
+          if (btn?.getAttribute("aria-haspopup") && btn.closest(".dm-toolbar")) {
+            btn.click();
+            requestAnimationFrame(() => focusDropdownItem(0, true));
+          }
+        }
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (controller.openDropdown) {
+          focusDropdownItem(-1);
+        }
+        break;
+      }
+      case "Home":
+        event.preventDefault();
+        controller.navigateFirst();
+        focusCurrentButton();
+        break;
+      case "End":
+        event.preventDefault();
+        controller.navigateLast();
+        focusCurrentButton();
+        break;
+      case "Escape":
+        if (controller.openDropdown) {
+          event.preventDefault();
+          closeDropdown();
+          focusCurrentButton();
+        }
+        break;
+    }
+  }
+  return { onKeyDown, focusCurrentButton };
+}
+
+// src/toolbar/useComputedStyle.ts
+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;
+    }
+    if (!node) return null;
+    const el = node;
+    const inline = el.style.getPropertyValue(prop);
+    if (inline) return inline;
+    return window.getComputedStyle(el).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;
+    }
+    if (!node) return null;
+    return node.style.getPropertyValue(prop) || null;
+  } catch {
+    return null;
+  }
+}
+var ToolbarButton = defineComponent({
+  name: "ToolbarButton",
+  props: {
+    item: { type: Object, required: true },
+    isActive: { type: Boolean, required: true },
+    isDisabled: { type: Boolean, required: true },
+    tabIndex: { type: Number, required: true },
+    tooltip: { type: String, required: true },
+    iconHtml: { type: String, required: true },
+    ariaExpanded: { type: String, default: null }
+  },
+  emits: {
+    click: (_item, _event) => true,
+    focus: (_name) => true
+  },
+  setup(props, { emit }) {
+    return () => h("button", {
+      type: "button",
+      class: ["dm-toolbar-button", props.isActive && "dm-toolbar-button--active"],
+      disabled: props.isDisabled,
+      tabindex: props.tabIndex,
+      innerHTML: props.iconHtml,
+      "aria-pressed": props.isActive,
+      "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)
+    });
+  }
+});
+var ToolbarDropdownPanel = defineComponent({
+  name: "ToolbarDropdownPanel",
+  props: {
+    dropdown: { type: Object, required: true },
+    isActive: { type: Function, required: true },
+    getCachedItemContent: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ["itemClick"],
+  setup(props, { emit }) {
+    return () => {
+      const { dropdown, isActive, getCachedItemContent } = props;
+      if (dropdown.layout === "grid") {
+        return h(
+          "div",
+          {
+            class: "dm-toolbar-dropdown-panel dm-color-palette",
+            role: "menu",
+            style: { "--dm-palette-columns": String(dropdown.gridColumns ?? 10) }
+          },
+          dropdown.items.map(
+            (sub) => sub.color ? h("button", {
+              key: sub.name,
+              type: "button",
+              class: ["dm-color-swatch", isActive(sub.name) && "dm-color-swatch--active"],
+              role: "menuitem",
+              tabindex: -1,
+              "aria-label": sub.label,
+              title: sub.label,
+              style: { backgroundColor: sub.color },
+              onMousedown: (e) => e.preventDefault(),
+              onClick: (e) => emit("itemClick", sub, e)
+            }) : h("button", {
+              key: sub.name,
+              type: "button",
+              class: "dm-color-palette-reset",
+              role: "menuitem",
+              tabindex: -1,
+              "aria-label": sub.label,
+              innerHTML: getCachedItemContent(sub.icon, sub.label),
+              onMousedown: (e) => e.preventDefault(),
+              onClick: (e) => emit("itemClick", sub, e)
+            })
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          class: "dm-toolbar-dropdown-panel",
+          role: "menu",
+          "data-display-mode": dropdown.displayMode ?? null
+        },
+        dropdown.items.map(
+          (sub) => h("button", {
+            key: sub.name,
+            type: "button",
+            class: ["dm-toolbar-dropdown-item", isActive(sub.name) && "dm-toolbar-dropdown-item--active"],
+            role: "menuitem",
+            tabindex: -1,
+            "aria-label": sub.label,
+            title: sub.label,
+            innerHTML: getCachedItemContent(sub.icon, sub.label, dropdown.displayMode),
+            onVnodeMounted: (vnode) => {
+              if (sub.style && vnode.el) vnode.el.setAttribute("style", sub.style);
+            },
+            onMousedown: (e) => e.preventDefault(),
+            onClick: (e) => emit("itemClick", sub, e)
+          })
+        )
+      );
+    };
+  }
+});
+
+// src/toolbar/ToolbarDropdown.ts
+var ToolbarDropdown = defineComponent({
+  name: "ToolbarDropdown",
+  props: {
+    dropdown: { type: Object, required: true },
+    isOpen: { type: Boolean, required: true },
+    isActive: { type: Function, required: true },
+    isDropdownActive: { type: Boolean, required: true },
+    isDisabled: { type: Boolean, required: true },
+    tabIndex: { type: Number, required: true },
+    triggerHtml: { type: String, required: true },
+    getCachedItemContent: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ["toggle", "itemClick", "focus"],
+  setup(props, { emit }) {
+    return () => {
+      const children = [
+        h("button", {
+          type: "button",
+          class: ["dm-toolbar-button", "dm-toolbar-dropdown-trigger", props.isDropdownActive && "dm-toolbar-button--active"],
+          "aria-expanded": props.isOpen,
+          "aria-haspopup": "true",
+          "aria-label": props.dropdown.label,
+          title: props.dropdown.label,
+          tabindex: props.tabIndex,
+          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)
+        })
+      ];
+      if (props.isOpen) {
+        children.push(
+          h(ToolbarDropdownPanel, {
+            dropdown: props.dropdown,
+            isActive: props.isActive,
+            getCachedItemContent: props.getCachedItemContent,
+            onItemClick: (item, event) => emit("itemClick", item, event)
+          })
+        );
+      }
+      return h("div", { class: "dm-toolbar-dropdown-wrapper" }, children);
+    };
+  }
+});
+
+// src/toolbar/DomternalToolbar.ts
+var DomternalToolbar = defineComponent({
+  name: "DomternalToolbar",
+  props: {
+    editor: { type: Object, default: void 0 },
+    icons: { type: Object, default: void 0 },
+    layout: { type: Array, default: void 0 }
+  },
+  setup(props) {
+    const { editor: contextEditor } = useCurrentEditor();
+    const {
+      controller: controllerRef,
+      groups,
+      focusedIndex,
+      openDropdown,
+      activeVersion,
+      toolbarRef,
+      isActive,
+      isDisabled,
+      isDropdownActive,
+      getAriaExpanded,
+      getFlatIndex,
+      handleDropdownToggle,
+      closeDropdown,
+      executeCommand
+    } = useToolbarController(
+      computed(() => props.editor ?? contextEditor.value),
+      props.layout
+    );
+    const {
+      getCachedIcon,
+      getCachedItemContent,
+      getDropdownTriggerHtml
+    } = useToolbarIcons(props.icons);
+    const { getTooltip } = useTooltip();
+    const { onKeyDown } = useKeyboardNav(controllerRef, toolbarRef, closeDropdown);
+    function onButtonClick(item, event) {
+      const editor = props.editor ?? contextEditor.value;
+      if (!editor) return;
+      if (controllerRef.current?.openDropdown) {
+        closeDropdown();
+      }
+      if (item.emitEvent) {
+        const anchor = event?.target?.closest?.(".dm-toolbar-button") ?? event?.target;
+        editor.emit(item.emitEvent, { anchorElement: anchor });
+        return;
+      }
+      executeCommand(item);
+      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");
+      }
+      closeDropdown();
+      if (item.emitEvent) {
+        editor.emit(item.emitEvent, { anchorElement: anchor });
+      } else {
+        executeCommand(item);
+      }
+      requestAnimationFrame(() => editor.view.focus());
+    }
+    function onButtonFocus(name) {
+      const index = controllerRef.current?.getFlatIndex(name) ?? -1;
+      if (index >= 0) {
+        controllerRef.current?.setFocusedIndex(index);
+      }
+    }
+    return () => {
+      const editor = props.editor ?? contextEditor.value;
+      if (!editor) return null;
+      void activeVersion.value;
+      return h(
+        "div",
+        {
+          ref: toolbarRef,
+          class: "dm-toolbar",
+          role: "toolbar",
+          "aria-label": "Editor formatting",
+          "data-dm-editor-ui": "",
+          onKeydown: onKeyDown
+        },
+        groups.value.map(
+          (group, gi) => h(Fragment, { key: group.name }, [
+            gi > 0 ? h("div", { class: "dm-toolbar-separator", role: "separator" }) : null,
+            h(
+              "div",
+              { class: "dm-toolbar-group", role: "group", "aria-label": group.name || "Tools" },
+              group.items.map((item) => {
+                if (item.type === "button") {
+                  const btn = item;
+                  return h(ToolbarButton, {
+                    key: btn.name,
+                    item: btn,
+                    isActive: isActive(btn.name),
+                    isDisabled: isDisabled(btn.name),
+                    tabIndex: getFlatIndex(btn.name) === focusedIndex.value ? 0 : -1,
+                    tooltip: getTooltip(btn),
+                    iconHtml: getCachedIcon(btn.icon),
+                    ariaExpanded: getAriaExpanded(btn),
+                    onClick: (clickedItem, event) => onButtonClick(clickedItem, event),
+                    onFocus: onButtonFocus
+                  });
+                }
+                if (item.type === "dropdown") {
+                  const dd = item;
+                  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;
+                    if (dd.computedStyleProperty === "font-family") {
+                      computed6 = getInlineStyleAtCursor(editor, dd.computedStyleProperty);
+                      if (computed6) {
+                        const first = computed6.split(",")[0]?.replace(/['"]+/g, "").trim();
+                        computed6 = first || null;
+                      }
+                    } else {
+                      computed6 = getComputedStyleAtCursor(editor, dd.computedStyleProperty);
+                    }
+                    if (computed6) {
+                      triggerHtml = `<span class="dm-toolbar-trigger-label">${computed6}</span>${DROPDOWN_CARET}`;
+                    }
+                  }
+                  return h(ToolbarDropdown, {
+                    key: dd.name,
+                    dropdown: dd,
+                    isOpen: openDropdown.value === dd.name,
+                    isActive,
+                    isDropdownActive: isDropdownActive(dd),
+                    isDisabled: isDisabled(dd.name),
+                    tabIndex: getFlatIndex(dd.name) === focusedIndex.value ? 0 : -1,
+                    triggerHtml,
+                    getCachedItemContent,
+                    onToggle: handleDropdownToggle,
+                    onItemClick: onDropdownItemClick,
+                    onFocus: onButtonFocus
+                  });
+                }
+                return null;
+              })
+            )
+          ])
+        )
+      );
+    };
+  }
+});
+function isInsideTableCell($pos) {
+  for (let d = $pos.depth; d > 0; d--) {
+    const name = $pos.node(d).type.name;
+    if (name === "tableCell" || name === "tableHeader") return true;
+  }
+  return false;
+}
+function findCellNode(pos) {
+  for (let d = pos.depth; d > 0; d--) {
+    const node = pos.node(d);
+    if (node.type.name === "tableCell" || node.type.name === "tableHeader") return node;
+  }
+  return null;
+}
+function useBubbleMenu(options) {
+  const { editor, shouldShow, placement = "top", offset = 8, updateDelay = 0, items, contexts } = options;
+  const menuRef = ref();
+  const pluginKey = new PluginKey("vueBubbleMenu-" + Math.random().toString(36).slice(2, 8));
+  const resolvedItems = shallowRef([]);
+  const activeVersion = useDebouncedRef(0);
+  const activeMapRef = /* @__PURE__ */ new Map();
+  const disabledMapRef = /* @__PURE__ */ new Map();
+  let itemMap;
+  let bubbleDefaults;
+  let currentResolvedItems = [];
+  let initialized = false;
+  let stopEditorWatch = null;
+  const doInit = (ed) => {
+    if (initialized || !ed || ed.isDestroyed || !menuRef.value) return;
+    initialized = true;
+    itemMap = /* @__PURE__ */ new Map();
+    for (const item of ed.toolbarItems) {
+      if (item.type === "button") {
+        itemMap.set(item.name, item);
+      } else if (item.type === "dropdown") {
+        for (const sub of item.items) {
+          itemMap.set(sub.name, sub);
+        }
+      }
+    }
+    bubbleDefaults = /* @__PURE__ */ new Map();
+    const byCtx = /* @__PURE__ */ new Map();
+    const addItem = (btn) => {
+      const ctx = btn["bubbleMenu"];
+      if (!ctx) return;
+      let arr = byCtx.get(ctx);
+      if (!arr) {
+        arr = [];
+        byCtx.set(ctx, arr);
+      }
+      arr.push(btn);
+    };
+    for (const item of ed.toolbarItems) {
+      if (item.type === "button") addItem(item);
+      else if (item.type === "dropdown") {
+        for (const sub of item.items) addItem(sub);
+      }
+    }
+    for (const [ctx, ctxItems] of byCtx) {
+      ctxItems.sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
+      const result = [];
+      let lastGroup;
+      let sepIdx = 0;
+      for (const item of ctxItems) {
+        if (lastGroup !== void 0 && item.group !== lastGroup) {
+          result.push({ type: "separator", name: `bsep-${sepIdx++}` });
+        }
+        result.push(item);
+        lastGroup = item.group;
+      }
+      bubbleDefaults.set(ctx, result);
+    }
+    const resolveNames = (names) => {
+      const result = [];
+      let sepIdx = 0;
+      for (const name of names) {
+        if (name === "|") {
+          result.push({ type: "separator", name: `sep-${sepIdx++}` });
+        } else {
+          const item = itemMap.get(name);
+          if (item) result.push(item);
+        }
+      }
+      return result;
+    };
+    const getFormatItems = () => {
+      return Array.from(itemMap.values()).filter((item) => item.group === "format").sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
+    };
+    const detectContext = (selection, ctxs) => {
+      if ("$anchorCell" in selection) return null;
+      if (selection.node) return selection.node.type.name;
+      if (selection.empty) return null;
+      const fromCell = findCellNode(selection.$from);
+      if (fromCell) {
+        const toCell = findCellNode(selection.$to);
+        if (toCell && fromCell !== toCell) return null;
+        return "table";
+      }
+      const fromName = selection.$from.parent.type.name;
+      if (fromName in ctxs) return fromName;
+      if ("text" in ctxs && selection.$from.parent.type.spec.marks !== "") return "text";
+      const toName = selection.$to.parent.type.name;
+      if (toName in ctxs) return toName;
+      if ("text" in ctxs && selection.$to.parent.type.spec.marks !== "") return "text";
+      return null;
+    };
+    const filterBySchema = (contextName, schemaItems) => {
+      if (contextName === "text" || contextName === "table") return schemaItems;
+      const schema = ed.state.schema;
+      if (!schema) return schemaItems;
+      const nodeType = schema.nodes[contextName];
+      if (!nodeType) return schemaItems;
+      return schemaItems.filter((item) => {
+        const markName = typeof item.isActive === "string" ? item.isActive : null;
+        if (!markName) return true;
+        const markType = schema.marks?.[markName];
+        if (!markType) return true;
+        return nodeType.allowsMarkType(markType);
+      });
+    };
+    let shouldShowFn = shouldShow;
+    if (!shouldShowFn) {
+      if (contexts) {
+        shouldShowFn = ({ state }) => {
+          const context = detectContext(state.selection, contexts);
+          if (!context) return false;
+          if (context in contexts) {
+            const val = contexts[context];
+            if (val === null) return false;
+            return val === true || Array.isArray(val) && val.length > 0;
+          }
+          return bubbleDefaults.has(context);
+        };
+      } else {
+        shouldShowFn = ({ state }) => {
+          if (state.selection.empty || state.selection.node) return false;
+          if (isInsideTableCell(state.selection.$from)) return false;
+          return state.selection.$from.parent.type.spec.marks !== "" || state.selection.$to.parent.type.spec.marks !== "";
+        };
+      }
+    }
+    const plugin = createBubbleMenuPlugin({
+      pluginKey,
+      editor: ed,
+      element: menuRef.value,
+      shouldShow: shouldShowFn,
+      placement,
+      offset,
+      updateDelay
+    });
+    ed.registerPlugin(plugin);
+    const setItems = (newItems) => {
+      currentResolvedItems = newItems;
+      resolvedItems.value = newItems;
+    };
+    if (contexts) {
+      updateContextItems(ed, contexts, detectContext, resolveNames, getFormatItems, filterBySchema, bubbleDefaults, setItems);
+    } else if (items) {
+      setItems(resolveNames(items));
+    } else {
+      setItems(resolveNames(["bold", "italic", "underline"]));
+    }
+    const updateStates = (currentEd) => {
+      let canProxy = null;
+      try {
+        canProxy = currentEd.can();
+      } catch {
+      }
+      for (const item of currentResolvedItems) {
+        if (item.type === "separator") continue;
+        activeMapRef.set(item.name, ToolbarController.resolveActive(currentEd, item));
+        try {
+          const canCmd = canProxy?.[item.command];
+          disabledMapRef.set(item.name, canCmd ? !(item.commandArgs?.length ? canCmd(...item.commandArgs) : canCmd()) : false);
+        } catch {
+          disabledMapRef.set(item.name, false);
+        }
+      }
+    };
+    const transactionHandler = () => {
+      if (contexts) {
+        updateContextItems(ed, contexts, detectContext, resolveNames, getFormatItems, filterBySchema, bubbleDefaults, setItems);
+      }
+      updateStates(ed);
+      activeVersion.value++;
+    };
+    ed.on("transaction", transactionHandler);
+    updateStates(ed);
+    initializedEditor = ed;
+    initializedHandler = transactionHandler;
+  };
+  let initializedEditor = null;
+  let initializedHandler = null;
+  onMounted(() => {
+    if (editor.value) {
+      doInit(editor.value);
+    } else {
+      stopEditorWatch = watch(editor, (ed) => {
+        if (ed) {
+          doInit(ed);
+          stopEditorWatch?.();
+          stopEditorWatch = null;
+        }
+      });
+    }
+  });
+  onScopeDispose(() => {
+    stopEditorWatch?.();
+    if (initializedEditor && initializedHandler) {
+      initializedEditor.off("transaction", initializedHandler);
+      if (!initializedEditor.isDestroyed) {
+        initializedEditor.unregisterPlugin(pluginKey);
+      }
+    }
+  });
+  function updateContextItems(ed, ctxs, detectContext, resolveNames, getFormatItems, filterBySchema, defaults, setItems) {
+    const ctx = detectContext(ed.state.selection, ctxs);
+    if (!ctx) {
+      setItems([]);
+      return;
+    }
+    if (ctx in ctxs) {
+      const val = ctxs[ctx];
+      if (val === null || Array.isArray(val) && val.length === 0) {
+        setItems([]);
+        return;
+      }
+      if (val === true) {
+        setItems(filterBySchema(ctx, getFormatItems()));
+      } else if (Array.isArray(val)) {
+        const resolved = resolveNames(val);
+        const buttons = resolved.filter((i) => i.type !== "separator");
+        const filtered = new Set(filterBySchema(ctx, buttons).map((b) => b.name));
+        setItems(resolved.filter((i) => i.type === "separator" || filtered.has(i.name)));
+      }
+    } else {
+      setItems(defaults.get(ctx) ?? []);
+    }
+  }
+  const isItemActive = (item) => {
+    return activeMapRef.get(item.name) ?? false;
+  };
+  const isItemDisabled = (item) => {
+    return disabledMapRef.get(item.name) ?? false;
+  };
+  const executeCommand = (item) => {
+    const ed = editor.value;
+    if (!ed) return;
+    if (item.emitEvent) {
+      ed.emit(item.emitEvent, {});
+      return;
+    }
+    ToolbarController.executeItem(ed, item);
+  };
+  const getCachedIcon = (name) => {
+    return defaultIcons[name] ?? "";
+  };
+  return {
+    menuRef,
+    resolvedItems,
+    isItemActive,
+    isItemDisabled,
+    executeCommand,
+    activeVersion,
+    getCachedIcon
+  };
+}
+
+// src/bubble-menu/DomternalBubbleMenu.ts
+var DomternalBubbleMenu = defineComponent({
+  name: "DomternalBubbleMenu",
+  props: {
+    editor: { type: Object, default: void 0 },
+    shouldShow: { type: Function, default: void 0 },
+    placement: { type: String, default: "top" },
+    offset: { type: Number, default: 8 },
+    updateDelay: { type: Number, default: 0 },
+    items: { type: Array, default: void 0 },
+    contexts: { type: Object, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const { editor: contextEditor } = useCurrentEditor();
+    const {
+      menuRef,
+      resolvedItems,
+      isItemActive,
+      isItemDisabled,
+      executeCommand,
+      activeVersion,
+      getCachedIcon
+    } = useBubbleMenu({
+      editor: computed(() => props.editor ?? contextEditor.value),
+      shouldShow: props.shouldShow,
+      placement: props.placement,
+      offset: props.offset,
+      updateDelay: props.updateDelay,
+      items: props.items,
+      contexts: props.contexts
+    });
+    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 btn = item;
+          const active = isItemActive(btn);
+          return 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: () => 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 }
+  },
+  setup(props, { slots }) {
+    const { editor: contextEditor } = useCurrentEditor();
+    const menuRef = ref();
+    const pluginKey = new PluginKey("vueFloatingMenu-" + Math.random().toString(36).slice(2, 8));
+    let registered = false;
+    let stopWatch = null;
+    const doRegister = (editor) => {
+      if (registered || editor.isDestroyed || !menuRef.value) return;
+      registered = true;
+      const plugin = createFloatingMenuPlugin({
+        pluginKey,
+        editor,
+        element: menuRef.value,
+        ...props.shouldShow && { shouldShow: props.shouldShow },
+        offset: props.offset
+      });
+      editor.registerPlugin(plugin);
+    };
+    onMounted(() => {
+      const ed = props.editor ?? contextEditor.value;
+      if (ed) {
+        doRegister(ed);
+      } else {
+        stopWatch = watch(
+          () => props.editor ?? contextEditor.value,
+          (editor) => {
+            if (editor) {
+              doRegister(editor);
+              stopWatch?.();
+              stopWatch = null;
+            }
+          }
+        );
+      }
+    });
+    onScopeDispose(() => {
+      stopWatch?.();
+      const editor = props.editor ?? contextEditor.value;
+      if (editor && !editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKey);
+      }
+    });
+    return () => h("div", { ref: menuRef, class: "dm-floating-menu" }, slots["default"]?.());
+  }
+});
+var SCROLL_SETTLE_MS = 50;
+function useEmojiPicker(editor, emojis) {
+  const isOpen = ref(false);
+  const searchQuery = ref("");
+  const activeCategory = ref("");
+  const pickerRef = ref();
+  let anchorEl = null;
+  let cleanupFloating = null;
+  let clickOutsideHandler = null;
+  let keydownHandler = null;
+  const categories = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of emojis) {
+      let list = map.get(item.group);
+      if (!list) {
+        list = [];
+        map.set(item.group, list);
+      }
+      list.push(item);
+    }
+    return map;
+  });
+  const categoryNames = computed(() => [...categories.value.keys()]);
+  const filteredEmojis = computed(() => {
+    const query = searchQuery.value.toLowerCase();
+    if (!query) return [];
+    const storage = getEmojiStorage(editor.value);
+    const searchFn = storage?.["searchEmoji"];
+    if (searchFn) return searchFn(query);
+    return emojis.filter(
+      (item) => item.name.includes(query) || item.group.toLowerCase().includes(query)
+    );
+  });
+  const frequentlyUsed = computed(() => {
+    if (!isOpen.value) return [];
+    const storage = getEmojiStorage(editor.value);
+    const getFreq = storage?.["getFrequentlyUsed"];
+    if (!getFreq) return [];
+    const names = getFreq();
+    if (!names.length) return [];
+    const nameMap = storage["_nameMap"];
+    if (!nameMap) return [];
+    return names.slice(0, 16).map((n) => nameMap.get(n)).filter(Boolean);
+  });
+  function removeGlobalListeners() {
+    if (clickOutsideHandler) {
+      document.removeEventListener("mousedown", clickOutsideHandler);
+      clickOutsideHandler = null;
+    }
+    if (keydownHandler) {
+      document.removeEventListener("keydown", keydownHandler);
+      keydownHandler = null;
+    }
+  }
+  function close() {
+    cleanupFloating?.();
+    cleanupFloating = null;
+    isOpen.value = false;
+    setStorageOpen(editor.value, false);
+    searchQuery.value = "";
+    anchorEl = null;
+    removeGlobalListeners();
+    editor.value?.view.focus();
+  }
+  function addGlobalListeners() {
+    clickOutsideHandler = (e) => {
+      const target = e.target;
+      if (pickerRef.value && !pickerRef.value.contains(target) && target !== anchorEl && !anchorEl?.contains(target)) {
+        requestAnimationFrame(() => close());
+      }
+    };
+    document.addEventListener("mousedown", clickOutsideHandler);
+    keydownHandler = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+      }
+    };
+    document.addEventListener("keydown", keydownHandler);
+  }
+  watch(
+    editor,
+    (ed, _oldEd, onCleanup) => {
+      if (!ed || ed.isDestroyed) return;
+      const handler = (...args) => {
+        const data = args[0];
+        if (isOpen.value) {
+          close();
+          return;
+        }
+        anchorEl = data?.anchorElement ?? null;
+        isOpen.value = true;
+        setStorageOpen(ed, true);
+        searchQuery.value = "";
+        if (categoryNames.value.length > 0 && categoryNames.value[0]) {
+          activeCategory.value = categoryNames.value[0];
+        }
+        addGlobalListeners();
+        requestAnimationFrame(() => {
+          const panel = pickerRef.value?.querySelector(".dm-emoji-picker");
+          if (panel && anchorEl) {
+            cleanupFloating?.();
+            cleanupFloating = positionFloatingOnce(anchorEl, panel, {
+              placement: "bottom",
+              offsetValue: 4
+            });
+          }
+          const input = pickerRef.value?.querySelector(".dm-emoji-picker-search input");
+          input?.focus({ preventScroll: true });
+        });
+      };
+      ed.on("insertEmoji", handler);
+      onCleanup(() => {
+        removeGlobalListeners();
+        ed.off("insertEmoji", handler);
+      });
+    },
+    { immediate: true }
+  );
+  onScopeDispose(() => {
+    removeGlobalListeners();
+    cleanupFloating?.();
+    cleanupFloating = null;
+  });
+  function selectEmoji(item) {
+    const ed = editor.value;
+    if (!ed) return;
+    const cmd = ed.commands;
+    if (cmd["insertEmoji"]) {
+      cmd["insertEmoji"](item.name);
+    }
+    close();
+  }
+  function onSearch(event) {
+    searchQuery.value = event.target.value;
+  }
+  function scrollToCategory(cat) {
+    searchQuery.value = "";
+    activeCategory.value = cat;
+    requestAnimationFrame(() => {
+      const grid = pickerRef.value?.querySelector(".dm-emoji-picker-grid");
+      if (!grid) return;
+      const label = grid.querySelector(`[data-category="${cat}"]`);
+      if (label) {
+        grid.scrollTo({ top: label.offsetTop - grid.offsetTop });
+        setTimeout(() => {
+          const firstSwatch = label.nextElementSibling;
+          if (firstSwatch instanceof HTMLElement && firstSwatch.classList.contains("dm-emoji-swatch")) {
+            firstSwatch.focus();
+          }
+        }, SCROLL_SETTLE_MS);
+      }
+    });
+  }
+  function onGridScroll() {
+    if (searchQuery.value) return;
+    const grid = pickerRef.value?.querySelector(".dm-emoji-picker-grid");
+    if (!grid) return;
+    const labels = Array.from(grid.querySelectorAll(".dm-emoji-picker-category-label[data-category]"));
+    let currentCat = "";
+    for (const label of labels) {
+      if (label.offsetTop - grid.offsetTop <= grid.scrollTop + 20) {
+        currentCat = label.getAttribute("data-category") ?? "";
+      }
+    }
+    if (currentCat && currentCat !== activeCategory.value) {
+      activeCategory.value = currentCat;
+    }
+  }
+  return {
+    isOpen,
+    searchQuery,
+    activeCategory,
+    categories,
+    categoryNames,
+    filteredEmojis,
+    frequentlyUsed,
+    pickerRef,
+    selectEmoji,
+    onSearch,
+    scrollToCategory,
+    onGridScroll,
+    close
+  };
+}
+function getEmojiStorage(editor) {
+  if (!editor) return null;
+  const storage = editor.storage;
+  return storage["emoji"] ?? null;
+}
+function setStorageOpen(editor, open) {
+  if (!editor) return;
+  const storage = getEmojiStorage(editor);
+  if (storage) storage["isOpen"] = open;
+  editor.view.dispatch(editor.view.state.tr);
+}
+
+// src/emoji-picker/DomternalEmojiPicker.ts
+var CATEGORY_ICONS = {
+  "Smileys & Emotion": "\u{1F600}",
+  "People & Body": "\u{1F44B}",
+  "Animals & Nature": "\u{1F431}",
+  "Food & Drink": "\u{1F355}",
+  "Travel & Places": "\u{1F697}",
+  "Activities": "\u26BD",
+  "Objects": "\u{1F4A1}",
+  "Symbols": "\u{1F523}",
+  "Flags": "\u{1F3C1}"
+};
+function categoryIcon(cat) {
+  return CATEGORY_ICONS[cat] ?? cat.charAt(0);
+}
+function formatName(name) {
+  return name.replace(/_/g, " ");
+}
+var DomternalEmojiPicker = defineComponent({
+  name: "DomternalEmojiPicker",
+  props: {
+    editor: { type: Object, default: void 0 },
+    emojis: { type: Array, required: true }
+  },
+  setup(props) {
+    const { editor: contextEditor } = useCurrentEditor();
+    const {
+      isOpen,
+      searchQuery,
+      activeCategory,
+      categoryNames,
+      filteredEmojis,
+      frequentlyUsed,
+      pickerRef,
+      selectEmoji,
+      onSearch,
+      scrollToCategory,
+      onGridScroll,
+      close,
+      categories
+    } = useEmojiPicker(
+      computed(() => props.editor ?? contextEditor.value),
+      props.emojis
+    );
+    function onGridKeyDown(event) {
+      const grid = event.currentTarget;
+      const swatches = Array.from(grid.querySelectorAll(".dm-emoji-swatch"));
+      if (!swatches.length) return;
+      const current = document.activeElement;
+      let idx = swatches.indexOf(current);
+      if (idx === -1) {
+        if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) {
+          event.preventDefault();
+          swatches[0]?.focus();
+        }
+        return;
+      }
+      const cols = 8;
+      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 "Enter":
+        case " ":
+          event.preventDefault();
+          swatches[idx]?.click();
+          return;
+        default:
+          return;
+      }
+      swatches[next]?.focus();
+    }
+    function renderEmojiButton(item) {
+      return h("button", {
+        key: item.name,
+        type: "button",
+        class: "dm-emoji-swatch",
+        tabindex: -1,
+        title: formatName(item.name),
+        "aria-label": formatName(item.name),
+        onMousedown: (e) => e.preventDefault(),
+        onClick: () => selectEmoji(item)
+      }, item.emoji);
+    }
+    return () => {
+      if (!isOpen.value) {
+        return h("div", { ref: pickerRef, class: "dm-emoji-picker-host" });
+      }
+      return h("div", { ref: pickerRef, class: "dm-emoji-picker-host" }, [
+        h("div", { class: "dm-emoji-picker" }, [
+          // Search
+          h("div", { class: "dm-emoji-picker-search" }, [
+            h("input", {
+              type: "text",
+              placeholder: "Search emoji...",
+              "aria-label": "Search emoji",
+              value: searchQuery.value,
+              onInput: onSearch,
+              onKeydown: (e) => {
+                if (e.key === "Escape") close();
+              }
+            })
+          ]),
+          // Category tabs
+          h(
+            "div",
+            { class: "dm-emoji-picker-tabs", role: "tablist" },
+            categoryNames.value.map(
+              (cat) => h("button", {
+                key: cat,
+                type: "button",
+                class: ["dm-emoji-picker-tab", activeCategory.value === cat && "dm-emoji-picker-tab--active"],
+                role: "tab",
+                "aria-selected": activeCategory.value === cat,
+                title: cat,
+                "aria-label": cat,
+                onMousedown: (e) => e.preventDefault(),
+                onClick: () => scrollToCategory(cat)
+              }, categoryIcon(cat))
+            )
+          ),
+          // Grid
+          h(
+            "div",
+            { class: "dm-emoji-picker-grid", onScroll: onGridScroll, onKeydown: onGridKeyDown },
+            searchQuery.value ? filteredEmojis.value.length > 0 ? filteredEmojis.value.map(renderEmojiButton) : [h("div", { class: "dm-emoji-picker-empty" }, "No emoji found")] : [
+              // Frequently used
+              ...frequentlyUsed.value.length > 0 ? [
+                h("div", { class: "dm-emoji-picker-category-label" }, "Frequently Used"),
+                ...frequentlyUsed.value.map(renderEmojiButton)
+              ] : [],
+              // All categories
+              ...categoryNames.value.flatMap((cat) => [
+                h("div", {
+                  key: `label-${cat}`,
+                  class: "dm-emoji-picker-category-label",
+                  "data-category": cat
+                }, cat),
+                ...(categories.value.get(cat) ?? []).map(renderEmojiButton)
+              ])
+            ]
+          )
+        ])
+      ]);
+    };
+  }
+});
+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() {
+  const onDragStart = inject(NODE_VIEW_ON_DRAG_START, void 0);
+  const nodeViewContentRef = inject(NODE_VIEW_CONTENT_REF, void 0);
+  return { onDragStart, nodeViewContentRef };
+}
+
+// src/node-views/VueNodeViewRenderer.ts
+function VueNodeViewRenderer(component, options = {}) {
+  const normalizedComponent = typeof component === "function" && "__vccOpts" in component ? component["__vccOpts"] ?? component : component;
+  markRaw(normalizedComponent);
+  const constructor = (node, _view, getPos, decorations) => {
+    const ctx = constructor.__domternalContext;
+    const editor = ctx?.editor;
+    const extension = ctx?.extension ?? { name: node.type.name, options: {} };
+    let appContext = editor ? appContextStore.get(editor) : void 0;
+    if (!appContext) {
+      appContext = pendingAppContextStore.value ?? void 0;
+      if (appContext && editor) {
+        appContextStore.set(editor, appContext);
+      }
+    }
+    if (!appContext) {
+      if (typeof globalThis !== "undefined" && 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."
+        );
+      }
+      const dom = document.createElement("div");
+      return { dom, update: () => false, destroy: () => {
+      } };
+    }
+    return new VueNodeView(normalizedComponent, {
+      editor,
+      node,
+      getPos,
+      decorations,
+      extension
+    }, options, appContext);
+  };
+  return constructor;
+}
+var VueNodeView = class {
+  dom;
+  contentDOM = null;
+  props;
+  editor;
+  appContext;
+  constructor(component, init, options, appContext) {
+    this.editor = init.editor;
+    this.appContext = appContext;
+    const isInline = init.node.type.spec.group === "inline";
+    const tag = options.as ?? (isInline ? "span" : "div");
+    this.dom = document.createElement(tag);
+    this.dom.setAttribute("data-node-view-wrapper", "");
+    if (options.className) {
+      this.dom.className = options.className;
+    }
+    if (options.contentDOMElement !== null) {
+      const contentTag = options.contentDOMElement ?? (isInline ? "span" : "div");
+      this.contentDOM = document.createElement(contentTag);
+      this.contentDOM.setAttribute("data-node-view-content", "");
+      this.contentDOM.style.whiteSpace = "pre-wrap";
+    }
+    const contentDOM = this.contentDOM;
+    this.props = shallowReactive({
+      editor: markRaw(init.editor),
+      node: markRaw(init.node),
+      selected: false,
+      getPos: init.getPos,
+      extension: init.extension,
+      decorations: init.decorations,
+      updateAttributes: (attrs) => {
+        const pos = init.getPos();
+        if (pos === void 0) return;
+        const { tr } = this.editor.view.state;
+        tr.setNodeMarkup(pos, void 0, { ...this.props.node.attrs, ...attrs });
+        this.editor.view.dispatch(tr);
+      },
+      deleteNode: () => {
+        const pos = init.getPos();
+        if (pos === void 0) return;
+        const { tr } = this.editor.view.state;
+        tr.delete(pos, pos + this.props.node.nodeSize);
+        this.editor.view.dispatch(tr);
+      }
+    });
+    const onDragStart = (event) => {
+      if (this.editor.view.dragging) {
+        event.dataTransfer?.setData("text/plain", this.props.node.textContent);
+      }
+    };
+    const contentRefCallback = (el) => {
+      if (el && contentDOM && !el.contains(contentDOM)) {
+        el.appendChild(contentDOM);
+      }
+    };
+    const reactiveProps = this.props;
+    const extended = defineComponent({
+      setup() {
+        provide(NODE_VIEW_ON_DRAG_START, onDragStart);
+        provide(NODE_VIEW_CONTENT_REF, contentRefCallback);
+        return () => h(component, {
+          editor: reactiveProps.editor,
+          node: reactiveProps.node,
+          selected: reactiveProps.selected,
+          getPos: reactiveProps.getPos,
+          updateAttributes: reactiveProps.updateAttributes,
+          deleteNode: reactiveProps.deleteNode,
+          extension: reactiveProps.extension,
+          decorations: reactiveProps.decorations
+        });
+      }
+    });
+    const vNode = h(extended);
+    vNode.appContext = this.appContext;
+    render(vNode, this.dom);
+  }
+  update(node, decorations) {
+    if (node.type.name !== this.props.node.type.name) return false;
+    this.props.node = markRaw(node);
+    this.props.decorations = decorations;
+    return true;
+  }
+  selectNode() {
+    this.props.selected = true;
+  }
+  deselectNode() {
+    this.props.selected = false;
+  }
+  destroy() {
+    render(null, this.dom);
+  }
+  ignoreMutation(mutation) {
+    if (!this.contentDOM) return true;
+    return !this.contentDOM.contains(mutation.target);
+  }
+  stopEvent() {
+    return false;
+  }
+};
+var NodeViewWrapper = defineComponent({
+  name: "NodeViewWrapper",
+  props: {
+    as: { type: String, default: "div" }
+  },
+  setup(props, { slots, attrs }) {
+    const onDragStart = inject(NODE_VIEW_ON_DRAG_START, void 0);
+    return () => h(
+      props.as,
+      {
+        ...attrs,
+        "data-node-view-wrapper": "",
+        style: { whiteSpace: "normal", ...attrs.style },
+        onDragstart: onDragStart
+      },
+      slots["default"]?.()
+    );
+  }
+});
+var NodeViewContent = defineComponent({
+  name: "NodeViewContent",
+  props: {
+    as: { type: String, default: "div" }
+  },
+  setup(props, { attrs }) {
+    const nodeViewContentRef = inject(NODE_VIEW_CONTENT_REF, void 0);
+    return () => {
+      const baseProps = {
+        ...attrs,
+        "data-node-view-content": "",
+        style: { whiteSpace: "pre-wrap", ...attrs.style }
+      };
+      if (nodeViewContentRef) {
+        baseProps["ref"] = nodeViewContentRef;
+      }
+      return h(props.as, baseProps);
+    };
+  }
+});
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map