@domternal/react 0.4.0

package/dist/index.js

@@ -0,0 +1,1720 @@
+import { createContext, forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo, useCallback, useSyncExternalStore, useContext, Fragment, createElement } from 'react';
+import { Editor, Document, Paragraph, Text, BaseKeymap, History, PluginKey, createFloatingMenuPlugin, ToolbarController, positionFloatingOnce, defaultIcons, createBubbleMenuPlugin } from '@domternal/core';
+export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { createRoot } from 'react-dom/client';
+
+// src/useEditor.ts
+var DEFAULT_EXTENSIONS = [Document, Paragraph, Text, BaseKeymap, History];
+function useEditor(options = {}, deps) {
+  const {
+    extensions = [],
+    content = "",
+    editable = true,
+    autofocus = false,
+    outputFormat = "html"
+  } = options;
+  const [editor, setEditor] = useState(null);
+  const editorRef = useRef(null);
+  const instanceRef = useRef(null);
+  const pendingContentRef = useRef(null);
+  const callbacksRef = useRef(options);
+  callbacksRef.current = options;
+  const contentRef = useRef(content);
+  contentRef.current = content;
+  const formatRef = useRef(outputFormat);
+  formatRef.current = outputFormat;
+  const extensionsRef = useRef(extensions);
+  const depsRef = useRef(deps);
+  function wireEvents(ed) {
+    ed.on("transaction", ({ transaction }) => {
+      const cbs = callbacksRef.current;
+      if (transaction.docChanged) {
+        cbs.onUpdate?.({ editor: ed });
+      }
+      if (!transaction.docChanged && transaction.selectionSet) {
+        cbs.onSelectionChange?.({ editor: ed });
+      }
+    });
+    ed.on("focus", ({ event }) => {
+      callbacksRef.current.onFocus?.({ editor: ed, event });
+    });
+    ed.on("blur", ({ event }) => {
+      callbacksRef.current.onBlur?.({ editor: ed, event });
+    });
+  }
+  function createEditorInstance(element, initialContent, focus) {
+    const ed = new Editor({
+      element,
+      extensions: [...DEFAULT_EXTENSIONS, ...extensions],
+      content: initialContent,
+      editable,
+      autofocus: focus
+    });
+    wireEvents(ed);
+    instanceRef.current = ed;
+    extensionsRef.current = extensions;
+    depsRef.current = deps;
+    setEditor(ed);
+    callbacksRef.current.onCreate?.(ed);
+    return ed;
+  }
+  function destroyCurrentEditor() {
+    const current = instanceRef.current;
+    if (current && !current.isDestroyed) {
+      pendingContentRef.current = current.getJSON();
+      callbacksRef.current.onDestroy?.();
+      current.destroy();
+    }
+    instanceRef.current = null;
+    setEditor(null);
+  }
+  useEffect(() => {
+    const element = editorRef.current ?? document.createElement("div");
+    const initialContent = pendingContentRef.current ?? content;
+    pendingContentRef.current = null;
+    createEditorInstance(element, initialContent, autofocus);
+    return () => {
+      destroyCurrentEditor();
+    };
+  }, []);
+  useEffect(() => {
+    if (instanceRef.current && !instanceRef.current.isDestroyed) {
+      instanceRef.current.setEditable(editable);
+    }
+  }, [editable]);
+  useEffect(() => {
+    if (!instanceRef.current || instanceRef.current.isDestroyed) return;
+    if (extensions === extensionsRef.current) return;
+    const element = instanceRef.current.view.dom.parentElement ?? document.createElement("div");
+    destroyCurrentEditor();
+    const initialContent = pendingContentRef.current ?? "";
+    pendingContentRef.current = null;
+    createEditorInstance(element, initialContent, false);
+  }, [extensions]);
+  useEffect(() => {
+    if (!deps || !instanceRef.current || instanceRef.current.isDestroyed) return;
+    if (depsRef.current === deps) return;
+    if (depsRef.current && deps.length === depsRef.current.length && deps.every((d, i) => d === depsRef.current[i])) return;
+    const element = instanceRef.current.view.dom.parentElement ?? document.createElement("div");
+    destroyCurrentEditor();
+    const initialContent = pendingContentRef.current ?? "";
+    pendingContentRef.current = null;
+    createEditorInstance(element, initialContent, false);
+  }, deps ?? []);
+  useEffect(() => {
+    const ed = instanceRef.current;
+    if (!ed || ed.isDestroyed) return;
+    const format = formatRef.current;
+    if (format === "html") {
+      if (content !== ed.getHTML()) {
+        ed.setContent(content, false);
+      }
+    } else {
+      if (JSON.stringify(content) !== JSON.stringify(ed.getJSON())) {
+        ed.setContent(content, false);
+      }
+    }
+  }, [content]);
+  return { editor, editorRef };
+}
+function useEditorState(editor, selector) {
+  if (selector) {
+    return useEditorStateSelector(editor, selector);
+  }
+  return useEditorStateFull(editor);
+}
+function useEditorStateFull(editor) {
+  const [state, setState] = useState(() => getFullState(editor));
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) {
+      setState(getFullState(null));
+      return;
+    }
+    setState(getFullState(editor));
+    const onTransaction = ({ transaction }) => {
+      setState((prev) => {
+        if (!transaction.docChanged) {
+          const editable2 = editor.isEditable;
+          if (prev.isEditable === editable2) return prev;
+          return { ...prev, isEditable: editable2 };
+        }
+        const html = editor.getHTML();
+        const json = editor.getJSON();
+        const empty = editor.isEmpty;
+        const editable = editor.isEditable;
+        if (prev.htmlContent === html && prev.isEmpty === empty && prev.isEditable === editable) return prev;
+        return { ...prev, htmlContent: html, jsonContent: json, isEmpty: empty, isEditable: editable };
+      });
+    };
+    const onFocus = () => {
+      setState((prev) => prev.isFocused ? prev : { ...prev, isFocused: true });
+    };
+    const onBlur = () => {
+      setState((prev) => !prev.isFocused ? prev : { ...prev, isFocused: false });
+    };
+    editor.on("transaction", onTransaction);
+    editor.on("focus", onFocus);
+    editor.on("blur", onBlur);
+    return () => {
+      editor.off("transaction", onTransaction);
+      editor.off("focus", onFocus);
+      editor.off("blur", onBlur);
+    };
+  }, [editor]);
+  return state;
+}
+function getFullState(editor) {
+  if (!editor || editor.isDestroyed) {
+    return { htmlContent: "", jsonContent: null, isEmpty: true, isFocused: false, isEditable: true };
+  }
+  return {
+    htmlContent: editor.getHTML(),
+    jsonContent: editor.getJSON(),
+    isEmpty: editor.isEmpty,
+    isFocused: editor.isFocused,
+    isEditable: editor.isEditable
+  };
+}
+function useEditorStateSelector(editor, selector) {
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  const subscribe = useCallback(
+    (callback) => {
+      if (!editor || editor.isDestroyed) return () => {
+      };
+      editor.on("transaction", callback);
+      editor.on("focus", callback);
+      editor.on("blur", callback);
+      return () => {
+        editor.off("transaction", callback);
+        editor.off("focus", callback);
+        editor.off("blur", callback);
+      };
+    },
+    [editor]
+  );
+  const getSnapshot = useCallback(() => {
+    if (!editor || editor.isDestroyed) return void 0;
+    return selectorRef.current(editor);
+  }, [editor]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+var EditorContext = createContext({ editor: null });
+function EditorProvider({ editor, children }) {
+  const value = useMemo(() => ({ editor }), [editor]);
+  return /* @__PURE__ */ jsx(EditorContext.Provider, { value, children });
+}
+function useCurrentEditor() {
+  return useContext(EditorContext);
+}
+function useToolbarController(editor, layout) {
+  const [groups, setGroups] = useState([]);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const [openDropdown, setOpenDropdown] = useState(null);
+  const [activeVersion, setActiveVersion] = useState(0);
+  const controllerRef = useRef(null);
+  const toolbarRef = useRef(null);
+  const cleanupFloatingRef = useRef(null);
+  const clickOutsideRef = useRef(null);
+  const dismissOverlayRef = useRef(null);
+  const editorElRef = useRef(null);
+  const syncStateRafRef = useRef(0);
+  const syncState = useCallback(() => {
+    cancelAnimationFrame(syncStateRafRef.current);
+    syncStateRafRef.current = requestAnimationFrame(() => {
+      const controller = controllerRef.current;
+      if (!controller) return;
+      const controllerGroups = controller.groups;
+      setGroups((prev) => prev.length !== controllerGroups.length ? controllerGroups : prev);
+      setFocusedIndex(controller.focusedIndex);
+      setOpenDropdown(controller.openDropdown);
+      setActiveVersion((v) => v + 1);
+    });
+  }, []);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    const controller = new ToolbarController(
+      editor,
+      syncState,
+      layout
+    );
+    controller.subscribe();
+    controllerRef.current = controller;
+    syncState();
+    const clickOutside = (e) => {
+      if (controller.openDropdown && toolbarRef.current && !toolbarRef.current.contains(e.target)) {
+        cleanupFloatingRef.current?.();
+        cleanupFloatingRef.current = null;
+        controller.closeDropdown();
+        syncState();
+      }
+    };
+    clickOutsideRef.current = clickOutside;
+    document.addEventListener("mousedown", clickOutside);
+    const editorEl = editor.view.dom.closest(".dm-editor");
+    editorElRef.current = editorEl;
+    if (editorEl) {
+      const dismiss = () => {
+        if (controller.openDropdown) {
+          cleanupFloatingRef.current?.();
+          cleanupFloatingRef.current = null;
+          controller.closeDropdown();
+          syncState();
+        }
+      };
+      dismissOverlayRef.current = dismiss;
+      editorEl.addEventListener("dm:dismiss-overlays", dismiss);
+    }
+    return () => {
+      cancelAnimationFrame(syncStateRafRef.current);
+      cleanupFloatingRef.current?.();
+      cleanupFloatingRef.current = null;
+      if (clickOutsideRef.current) {
+        document.removeEventListener("mousedown", clickOutsideRef.current);
+        clickOutsideRef.current = null;
+      }
+      if (dismissOverlayRef.current && editorElRef.current) {
+        editorElRef.current.removeEventListener("dm:dismiss-overlays", dismissOverlayRef.current);
+        dismissOverlayRef.current = null;
+        editorElRef.current = null;
+      }
+      controller.destroy();
+      controllerRef.current = null;
+    };
+  }, [editor, layout, syncState]);
+  const isActive = useCallback((name) => {
+    return controllerRef.current?.activeMap.get(name) ?? false;
+  }, []);
+  const isDisabled = useCallback((name) => {
+    return controllerRef.current?.disabledMap.get(name) ?? false;
+  }, []);
+  const isDropdownActive = useCallback((dropdown) => {
+    if (dropdown.layout === "grid") return false;
+    if (dropdown.dynamicLabel) return false;
+    const controller = controllerRef.current;
+    if (!controller) return false;
+    return dropdown.items.some((item) => controller.activeMap.get(item.name) ?? false);
+  }, []);
+  const getAriaExpanded = useCallback((item) => {
+    if (!item.emitEvent) return null;
+    return controllerRef.current?.expandedMap.get(item.name) ? "true" : null;
+  }, []);
+  const getFlatIndex = useCallback((name) => {
+    return controllerRef.current?.getFlatIndex(name) ?? -1;
+  }, []);
+  const handleDropdownToggle = useCallback((dropdown) => {
+    const controller = controllerRef.current;
+    if (!controller) return;
+    cleanupFloatingRef.current?.();
+    cleanupFloatingRef.current = null;
+    controller.toggleDropdown(dropdown.name);
+    syncState();
+    if (controller.openDropdown) {
+      requestAnimationFrame(() => {
+        const trigger = toolbarRef.current?.querySelector('[aria-expanded="true"]');
+        const panel = trigger?.parentElement?.querySelector(".dm-toolbar-dropdown-panel");
+        if (trigger && panel) {
+          const placement = dropdown.layout === "grid" ? "bottom" : "bottom-start";
+          cleanupFloatingRef.current = positionFloatingOnce(trigger, panel, {
+            placement,
+            offsetValue: 4
+          });
+        }
+      });
+    }
+  }, [syncState]);
+  const closeDropdown = useCallback(() => {
+    cleanupFloatingRef.current?.();
+    cleanupFloatingRef.current = null;
+    controllerRef.current?.closeDropdown();
+    syncState();
+  }, [syncState]);
+  return {
+    controller: controllerRef,
+    groups,
+    focusedIndex,
+    openDropdown,
+    activeVersion,
+    toolbarRef,
+    isActive,
+    isDisabled,
+    isDropdownActive,
+    getAriaExpanded,
+    getFlatIndex,
+    handleDropdownToggle,
+    closeDropdown,
+    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 cacheRef = useRef(/* @__PURE__ */ new Map());
+  const prevIconsRef = useRef(icons);
+  if (icons !== prevIconsRef.current) {
+    cacheRef.current.clear();
+    prevIconsRef.current = icons;
+  }
+  const resolveIconSvg = useCallback((name) => {
+    if (icons) {
+      return icons[name] ?? "";
+    }
+    return defaultIcons[name] ?? "";
+  }, [icons]);
+  const getCachedIcon = useCallback((name) => {
+    const cache = cacheRef.current;
+    const key = `i:${name}`;
+    let cached = cache.get(key);
+    if (!cached) {
+      cached = resolveIconSvg(name);
+      cache.set(key, cached);
+    }
+    return cached;
+  }, [resolveIconSvg]);
+  const getCachedTriggerLabel = useCallback((label, isIcon) => {
+    const cache = cacheRef.current;
+    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;
+  }, [resolveIconSvg]);
+  const getCachedTriggerIcon = useCallback((iconName) => {
+    const cache = cacheRef.current;
+    const key = `t:${iconName}`;
+    let cached = cache.get(key);
+    if (!cached) {
+      cached = resolveIconSvg(iconName) + DROPDOWN_CARET;
+      cache.set(key, cached);
+    }
+    return cached;
+  }, [resolveIconSvg]);
+  const getCachedItemContent = useCallback((iconName, label, displayMode) => {
+    const mode = displayMode ?? "icon-text";
+    const cache = cacheRef.current;
+    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;
+  }, [resolveIconSvg]);
+  const getDropdownTriggerHtml = useCallback((dropdown, activeItem) => {
+    if (dropdown.layout === "grid") {
+      const color = activeItem?.color ?? dropdown.defaultIndicatorColor ?? null;
+      const cache = cacheRef.current;
+      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);
+  }, [resolveIconSvg, getCachedTriggerLabel, getCachedTriggerIcon]);
+  return {
+    resolveIconSvg,
+    getCachedIcon,
+    getCachedTriggerLabel,
+    getCachedTriggerIcon,
+    getCachedItemContent,
+    getDropdownTriggerHtml
+  };
+}
+var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+function useTooltip() {
+  const getTooltip = useCallback((item) => {
+    if (item.shortcut) {
+      const parts = item.shortcut.split("-");
+      const mapped = parts.map((p) => {
+        if (p === "Mod") return isMac ? "\u2318" : "Ctrl";
+        if (p === "Shift") return isMac ? "\u21E7" : "Shift";
+        if (p === "Alt") return isMac ? "\u2325" : "Alt";
+        return p.toUpperCase();
+      });
+      const shortcut = isMac ? mapped.join("") : mapped.join("+");
+      return `${item.label} (${shortcut})`;
+    }
+    return item.label;
+  }, []);
+  return { getTooltip };
+}
+function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
+  const focusCurrentButton = useCallback(() => {
+    const idx = controllerRef.current?.focusedIndex ?? 0;
+    const buttons = toolbarRef.current?.querySelectorAll(".dm-toolbar-button");
+    buttons?.[idx]?.focus();
+  }, []);
+  const onKeyDown = useCallback((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 "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;
+    }
+  }, [closeDropdown, focusCurrentButton]);
+  return { onKeyDown, focusCurrentButton };
+}
+
+// src/toolbar/useComputedStyle.ts
+function getComputedStyleAtCursor(editor, prop) {
+  try {
+    const { from } = editor.state.selection;
+    const resolved = editor.view.domAtPos(from);
+    const el = resolved.node instanceof HTMLElement ? resolved.node : resolved.node.parentElement;
+    if (!el) return null;
+    return el.style.getPropertyValue(prop) || window.getComputedStyle(el).getPropertyValue(prop) || null;
+  } catch {
+    return null;
+  }
+}
+function getInlineStyleAtCursor(editor, prop) {
+  try {
+    const { from } = editor.state.selection;
+    const resolved = editor.view.domAtPos(from);
+    const el = resolved.node instanceof HTMLElement ? resolved.node : resolved.node.parentElement;
+    if (!el) return null;
+    return el.style.getPropertyValue(prop) || null;
+  } catch {
+    return null;
+  }
+}
+function ToolbarButton({
+  item,
+  isActive,
+  isDisabled,
+  tabIndex,
+  tooltip,
+  iconHtml,
+  ariaExpanded,
+  onClick,
+  onFocus
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `dm-toolbar-button${isActive ? " dm-toolbar-button--active" : ""}`,
+      "aria-pressed": isActive,
+      "aria-expanded": ariaExpanded === "true" ? true : void 0,
+      "aria-label": item.label,
+      title: tooltip,
+      tabIndex,
+      disabled: isDisabled,
+      dangerouslySetInnerHTML: { __html: iconHtml },
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: (e) => onClick(item, e),
+      onFocus: () => onFocus(item.name)
+    }
+  );
+}
+function ToolbarDropdownPanel({
+  dropdown,
+  isActive,
+  getCachedItemContent,
+  onItemClick
+}) {
+  if (dropdown.layout === "grid") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "dm-toolbar-dropdown-panel dm-color-palette",
+        role: "menu",
+        style: { "--dm-palette-columns": String(dropdown.gridColumns ?? 10) },
+        children: dropdown.items.map(
+          (sub) => sub.color ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `dm-color-swatch${isActive(sub.name) ? " dm-color-swatch--active" : ""}`,
+              role: "menuitem",
+              "aria-label": sub.label,
+              title: sub.label,
+              style: { backgroundColor: sub.color },
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: (e) => onItemClick(sub, e)
+            },
+            sub.name
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "dm-color-palette-reset",
+              role: "menuitem",
+              "aria-label": sub.label,
+              dangerouslySetInnerHTML: { __html: getCachedItemContent(sub.icon, sub.label) },
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: (e) => onItemClick(sub, e)
+            },
+            sub.name
+          )
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "dm-toolbar-dropdown-panel",
+      role: "menu",
+      "data-display-mode": dropdown.displayMode ?? null,
+      children: dropdown.items.map((sub) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `dm-toolbar-dropdown-item${isActive(sub.name) ? " dm-toolbar-dropdown-item--active" : ""}`,
+          role: "menuitem",
+          "aria-label": sub.label,
+          ref: (el) => {
+            if (el && sub.style) el.setAttribute("style", sub.style);
+          },
+          dangerouslySetInnerHTML: { __html: getCachedItemContent(sub.icon, sub.label, dropdown.displayMode) },
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: (e) => onItemClick(sub, e)
+        },
+        sub.name
+      ))
+    }
+  );
+}
+function ToolbarDropdown({
+  dropdown,
+  isOpen,
+  isActive,
+  isDropdownActive,
+  isDisabled,
+  tabIndex,
+  triggerHtml,
+  getCachedItemContent,
+  onToggle,
+  onItemClick,
+  onFocus
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "dm-toolbar-dropdown-wrapper", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `dm-toolbar-button dm-toolbar-dropdown-trigger${isDropdownActive ? " dm-toolbar-button--active" : ""}`,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        "aria-label": dropdown.label,
+        title: dropdown.label,
+        tabIndex,
+        disabled: isDisabled,
+        "data-dropdown": dropdown.name,
+        dangerouslySetInnerHTML: { __html: triggerHtml },
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => onToggle(dropdown),
+        onFocus: () => onFocus(dropdown.name)
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx(
+      ToolbarDropdownPanel,
+      {
+        dropdown,
+        isActive,
+        getCachedItemContent,
+        onItemClick
+      }
+    )
+  ] });
+}
+function DomternalToolbar({ editor: editorProp, icons, layout }) {
+  const { editor: contextEditor } = useCurrentEditor();
+  const editor = editorProp ?? contextEditor;
+  const {
+    controller: controllerRef,
+    groups,
+    focusedIndex,
+    openDropdown,
+    toolbarRef,
+    isActive,
+    isDisabled,
+    isDropdownActive,
+    getAriaExpanded,
+    getFlatIndex,
+    handleDropdownToggle,
+    closeDropdown
+  } = useToolbarController(editor, layout);
+  const {
+    getCachedIcon,
+    getCachedItemContent,
+    getDropdownTriggerHtml
+  } = useToolbarIcons(icons);
+  const { getTooltip } = useTooltip();
+  const { onKeyDown } = useKeyboardNav(controllerRef, toolbarRef, closeDropdown);
+  const onButtonClick = useCallback((item, event) => {
+    if (!editor) return;
+    if (controllerRef.current?.openDropdown) {
+      closeDropdown();
+    }
+    if (item.emitEvent) {
+      const anchor = event.currentTarget;
+      editor.emit(item.emitEvent, { anchorElement: anchor });
+      return;
+    }
+    controllerRef.current?.executeCommand(item);
+  }, [editor, closeDropdown]);
+  const onDropdownItemClick = useCallback((item, event) => {
+    if (!editor) return;
+    let anchor;
+    if (item.emitEvent) {
+      const wrapper = event.currentTarget.closest(".dm-toolbar-dropdown-wrapper");
+      anchor = wrapper?.querySelector(".dm-toolbar-dropdown-trigger");
+    }
+    closeDropdown();
+    if (item.emitEvent) {
+      editor.emit(item.emitEvent, { anchorElement: anchor });
+    } else {
+      controllerRef.current?.executeCommand(item);
+    }
+  }, [editor, closeDropdown]);
+  const onButtonFocus = useCallback((name) => {
+    const index = controllerRef.current?.getFlatIndex(name) ?? -1;
+    if (index >= 0) {
+      controllerRef.current?.setFocusedIndex(index);
+    }
+  }, []);
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: toolbarRef,
+      className: "dm-toolbar",
+      role: "toolbar",
+      "aria-label": "Editor formatting",
+      onKeyDown,
+      children: groups.map((group, gi) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        gi > 0 && /* @__PURE__ */ jsx("div", { className: "dm-toolbar-separator", role: "separator" }),
+        /* @__PURE__ */ jsx("div", { className: "dm-toolbar-group", role: "group", "aria-label": group.name || "Tools", children: group.items.map((item) => {
+          if (item.type === "button") {
+            const btn = item;
+            return /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                item: btn,
+                isActive: isActive(btn.name),
+                isDisabled: isDisabled(btn.name),
+                tabIndex: getFlatIndex(btn.name) === focusedIndex ? 0 : -1,
+                tooltip: getTooltip(btn),
+                iconHtml: getCachedIcon(btn.icon),
+                ariaExpanded: getAriaExpanded(btn),
+                onClick: onButtonClick,
+                onFocus: onButtonFocus
+              },
+              btn.name
+            );
+          }
+          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 computed;
+              if (dd.computedStyleProperty === "font-family") {
+                computed = getInlineStyleAtCursor(editor, dd.computedStyleProperty);
+                if (computed) {
+                  const first = computed.split(",")[0]?.replace(/['"]+/g, "").trim();
+                  computed = first || null;
+                }
+              } else {
+                computed = getComputedStyleAtCursor(editor, dd.computedStyleProperty);
+              }
+              if (computed) {
+                triggerHtml = `<span class="dm-toolbar-trigger-label">${computed}</span>${DROPDOWN_CARET}`;
+              }
+            }
+            return /* @__PURE__ */ jsx(
+              ToolbarDropdown,
+              {
+                dropdown: dd,
+                isOpen: openDropdown === dd.name,
+                isActive,
+                isDropdownActive: isDropdownActive(dd),
+                isDisabled: isDisabled(dd.name),
+                tabIndex: getFlatIndex(dd.name) === focusedIndex ? 0 : -1,
+                triggerHtml,
+                getCachedItemContent,
+                onToggle: handleDropdownToggle,
+                onItemClick: onDropdownItemClick,
+                onFocus: onButtonFocus
+              },
+              dd.name
+            );
+          }
+          return null;
+        }) })
+      ] }, group.name))
+    }
+  );
+}
+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 = useRef(null);
+  const pluginKeyRef = useRef(new PluginKey("reactBubbleMenu-" + Math.random().toString(36).slice(2, 8)));
+  const [resolvedItems, setResolvedItems] = useState([]);
+  const [activeVersion, setActiveVersion] = useState(0);
+  const activeMapRef = useRef(/* @__PURE__ */ new Map());
+  const disabledMapRef = useRef(/* @__PURE__ */ new Map());
+  const itemMapRef = useRef(/* @__PURE__ */ new Map());
+  const bubbleDefaultsRef = useRef(/* @__PURE__ */ new Map());
+  const resolvedItemsRef = useRef([]);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed || !menuRef.current) return;
+    const itemMap = /* @__PURE__ */ new Map();
+    for (const item of editor.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);
+        }
+      }
+    }
+    itemMapRef.current = itemMap;
+    const bubbleDefaults = /* @__PURE__ */ new Map();
+    const byCtx = /* @__PURE__ */ new Map();
+    const addItem = (btn) => {
+      const ctx = btn["bubbleMenu"];
+      if (!ctx) return;
+      let arr = byCtx.get(ctx);
+      if (!arr) {
+        arr = [];
+        byCtx.set(ctx, arr);
+      }
+      arr.push(btn);
+    };
+    for (const item of editor.toolbarItems) {
+      if (item.type === "button") addItem(item);
+      else if (item.type === "dropdown") {
+        for (const sub of item.items) addItem(sub);
+      }
+    }
+    for (const [ctx, ctxItems] of byCtx) {
+      ctxItems.sort((a, b) => (b.priority ?? 100) - (a.priority ?? 100));
+      const result = [];
+      let lastGroup;
+      let sepIdx = 0;
+      for (const item of ctxItems) {
+        if (lastGroup !== void 0 && item.group !== lastGroup) {
+          result.push({ type: "separator", name: `bsep-${sepIdx++}` });
+        }
+        result.push(item);
+        lastGroup = item.group;
+      }
+      bubbleDefaults.set(ctx, result);
+    }
+    bubbleDefaultsRef.current = bubbleDefaults;
+    const resolveNames = (names) => {
+      const result = [];
+      let sepIdx = 0;
+      for (const name of names) {
+        if (name === "|") {
+          result.push({ type: "separator", name: `sep-${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 = editor.state.schema;
+      if (!schema) return schemaItems;
+      const nodeType = schema.nodes[contextName];
+      if (!nodeType) return schemaItems;
+      return schemaItems.filter((item) => {
+        const markName = typeof item.isActive === "string" ? item.isActive : null;
+        if (!markName) return true;
+        const markType = schema.marks?.[markName];
+        if (!markType) return true;
+        return nodeType.allowsMarkType(markType);
+      });
+    };
+    let shouldShowFn = shouldShow;
+    if (!shouldShowFn) {
+      if (contexts) {
+        shouldShowFn = ({ state }) => {
+          const context = detectContext(state.selection, contexts);
+          if (!context) return false;
+          if (context in contexts) {
+            const val = contexts[context];
+            if (val === null) return false;
+            return val === true || Array.isArray(val) && val.length > 0;
+          }
+          return bubbleDefaults.has(context);
+        };
+      } else {
+        shouldShowFn = ({ state }) => {
+          if (state.selection.empty || 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: pluginKeyRef.current,
+      editor,
+      element: menuRef.current,
+      shouldShow: shouldShowFn,
+      placement,
+      offset,
+      updateDelay
+    });
+    editor.registerPlugin(plugin);
+    const setItems = (newItems) => {
+      resolvedItemsRef.current = newItems;
+      setResolvedItems(newItems);
+    };
+    if (contexts) {
+      updateContextItems(editor, contexts, detectContext, resolveNames, getFormatItems, filterBySchema, bubbleDefaults, setItems);
+    } else if (items) {
+      setItems(resolveNames(items));
+    } else {
+      setItems(resolveNames(["bold", "italic", "underline"]));
+    }
+    const updateStates = (ed) => {
+      let canProxy = null;
+      try {
+        canProxy = ed.can();
+      } catch {
+      }
+      for (const item of resolvedItemsRef.current) {
+        if (item.type === "separator") continue;
+        activeMapRef.current.set(item.name, ToolbarController.resolveActive(ed, item));
+        try {
+          const canCmd = canProxy?.[item.command];
+          disabledMapRef.current.set(item.name, canCmd ? !(item.commandArgs?.length ? canCmd(...item.commandArgs) : canCmd()) : false);
+        } catch {
+          disabledMapRef.current.set(item.name, false);
+        }
+      }
+    };
+    const transactionHandler = () => {
+      if (contexts) {
+        updateContextItems(editor, contexts, detectContext, resolveNames, getFormatItems, filterBySchema, bubbleDefaults, setItems);
+      }
+      updateStates(editor);
+      setActiveVersion((v) => v + 1);
+    };
+    editor.on("transaction", transactionHandler);
+    updateStates(editor);
+    return () => {
+      editor.off("transaction", transactionHandler);
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKeyRef.current);
+      }
+    };
+  }, [editor]);
+  function updateContextItems(ed, ctxs, detectContext, resolveNames, getFormatItems, filterBySchema, defaults, setItems) {
+    const ctx = detectContext(ed.state.selection, ctxs);
+    if (!ctx) {
+      setItems([]);
+      return;
+    }
+    if (ctx in ctxs) {
+      const val = ctxs[ctx];
+      if (val === null || Array.isArray(val) && val.length === 0) {
+        setItems([]);
+        return;
+      }
+      if (val === true) {
+        setItems(filterBySchema(ctx, getFormatItems()));
+      } else if (Array.isArray(val)) {
+        const resolved = resolveNames(val);
+        const buttons = resolved.filter((i) => i.type !== "separator");
+        const filtered = new Set(filterBySchema(ctx, buttons).map((b) => b.name));
+        setItems(resolved.filter((i) => i.type === "separator" || filtered.has(i.name)));
+      }
+    } else {
+      setItems(defaults.get(ctx) ?? []);
+    }
+  }
+  const isItemActive = (item) => {
+    return activeMapRef.current.get(item.name) ?? false;
+  };
+  const isItemDisabled = (item) => {
+    return disabledMapRef.current.get(item.name) ?? false;
+  };
+  const executeCommand = (item) => {
+    if (!editor) return;
+    if (item.emitEvent) {
+      editor.emit(item.emitEvent, {});
+      return;
+    }
+    ToolbarController.executeItem(editor, item);
+  };
+  return {
+    menuRef,
+    resolvedItems,
+    isItemActive,
+    isItemDisabled,
+    executeCommand,
+    activeVersion,
+    getCachedIcon: (name) => defaultIcons[name] ?? ""
+  };
+}
+function DomternalBubbleMenu({
+  editor: editorProp,
+  shouldShow,
+  placement,
+  offset,
+  updateDelay,
+  items,
+  contexts,
+  children
+}) {
+  const { editor: contextEditor } = useCurrentEditor();
+  const editor = editorProp ?? contextEditor;
+  const htmlCacheRef = useRef(/* @__PURE__ */ new Map());
+  const {
+    menuRef,
+    resolvedItems,
+    isItemActive,
+    isItemDisabled,
+    executeCommand,
+    getCachedIcon
+  } = useBubbleMenu({
+    editor,
+    shouldShow,
+    placement,
+    offset,
+    updateDelay,
+    items,
+    contexts
+  });
+  const getCachedHtml = (name) => {
+    const cache = htmlCacheRef.current;
+    const cached = cache.get(name);
+    if (cached) return cached;
+    const html = getCachedIcon(name);
+    cache.set(name, html);
+    return html;
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "dm-bubble-menu", role: "toolbar", "aria-label": "Text formatting", children: [
+    resolvedItems.map((item) => {
+      if (item.type === "separator") {
+        return /* @__PURE__ */ jsx("span", { className: "dm-toolbar-separator", role: "separator" }, item.name);
+      }
+      const btn = item;
+      const active = isItemActive(btn);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `dm-toolbar-button${active ? " dm-toolbar-button--active" : ""}`,
+          disabled: isItemDisabled(btn),
+          title: btn.label,
+          "aria-label": btn.label,
+          "aria-pressed": active,
+          dangerouslySetInnerHTML: { __html: getCachedHtml(btn.icon) },
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => executeCommand(btn)
+        },
+        btn.name
+      );
+    }),
+    children
+  ] });
+}
+function DomternalFloatingMenu({
+  editor: editorProp,
+  shouldShow,
+  offset = 0,
+  children
+}) {
+  const { editor: contextEditor } = useCurrentEditor();
+  const editor = editorProp ?? contextEditor;
+  const menuRef = useRef(null);
+  const pluginKeyRef = useRef(
+    new PluginKey("reactFloatingMenu-" + Math.random().toString(36).slice(2, 8))
+  );
+  const shouldShowRef = useRef(shouldShow);
+  shouldShowRef.current = shouldShow;
+  const offsetRef = useRef(offset);
+  offsetRef.current = offset;
+  useEffect(() => {
+    if (!editor || editor.isDestroyed || !menuRef.current) return;
+    const plugin = createFloatingMenuPlugin({
+      pluginKey: pluginKeyRef.current,
+      editor,
+      element: menuRef.current,
+      ...shouldShowRef.current && { shouldShow: shouldShowRef.current },
+      offset: offsetRef.current
+    });
+    editor.registerPlugin(plugin);
+    return () => {
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKeyRef.current);
+      }
+    };
+  }, [editor]);
+  return /* @__PURE__ */ jsx("div", { ref: menuRef, className: "dm-floating-menu", children });
+}
+function useEmojiPicker(editor, emojis) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState("");
+  const pickerRef = useRef(null);
+  const anchorRef = useRef(null);
+  const cleanupFloatingRef = useRef(null);
+  const clickOutsideRef = useRef(null);
+  const keydownRef = useRef(null);
+  const isOpenRef = useRef(false);
+  const categories = useMemo(() => {
+    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;
+  }, [emojis]);
+  const categoryNames = useMemo(() => [...categories.keys()], [categories]);
+  const filteredEmojis = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    if (!query) return [];
+    const storage = getEmojiStorage(editor);
+    const searchFn = storage?.["searchEmoji"];
+    if (searchFn) return searchFn(query);
+    return emojis.filter(
+      (item) => item.name.includes(query) || item.group.toLowerCase().includes(query)
+    );
+  }, [searchQuery, emojis, editor]);
+  const frequentlyUsed = useMemo(() => {
+    if (!isOpen) return [];
+    const storage = getEmojiStorage(editor);
+    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);
+  }, [isOpen, editor]);
+  const removeGlobalListeners = useCallback(() => {
+    if (clickOutsideRef.current) {
+      document.removeEventListener("mousedown", clickOutsideRef.current);
+      clickOutsideRef.current = null;
+    }
+    if (keydownRef.current) {
+      document.removeEventListener("keydown", keydownRef.current);
+      keydownRef.current = null;
+    }
+  }, []);
+  const close = useCallback(() => {
+    cleanupFloatingRef.current?.();
+    cleanupFloatingRef.current = null;
+    isOpenRef.current = false;
+    setIsOpen(false);
+    setStorageOpen(editor, false);
+    setSearchQuery("");
+    anchorRef.current = null;
+    removeGlobalListeners();
+    editor?.view.focus();
+  }, [editor, removeGlobalListeners]);
+  const addGlobalListeners = useCallback(() => {
+    clickOutsideRef.current = (e) => {
+      const target = e.target;
+      if (pickerRef.current && !pickerRef.current.contains(target) && target !== anchorRef.current && !anchorRef.current?.contains(target)) {
+        requestAnimationFrame(() => close());
+      }
+    };
+    document.addEventListener("mousedown", clickOutsideRef.current);
+    keydownRef.current = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+      }
+    };
+    document.addEventListener("keydown", keydownRef.current);
+  }, [close]);
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+    const handler = (...args) => {
+      const data = args[0];
+      if (isOpenRef.current) {
+        close();
+        return;
+      }
+      anchorRef.current = data?.anchorElement ?? null;
+      isOpenRef.current = true;
+      setIsOpen(true);
+      setStorageOpen(editor, true);
+      setSearchQuery("");
+      if (categoryNames.length > 0 && categoryNames[0]) {
+        setActiveCategory(categoryNames[0]);
+      }
+      addGlobalListeners();
+      requestAnimationFrame(() => {
+        const panel = pickerRef.current?.querySelector(".dm-emoji-picker");
+        if (panel && anchorRef.current) {
+          cleanupFloatingRef.current?.();
+          cleanupFloatingRef.current = positionFloatingOnce(anchorRef.current, panel, {
+            placement: "bottom",
+            offsetValue: 4
+          });
+        }
+        const input = pickerRef.current?.querySelector(".dm-emoji-picker-search input");
+        input?.focus();
+      });
+    };
+    editor.on("insertEmoji", handler);
+    return () => {
+      removeGlobalListeners();
+      editor.off("insertEmoji", handler);
+    };
+  }, [editor]);
+  const selectEmoji = useCallback((item) => {
+    if (!editor) return;
+    const cmd = editor.commands;
+    if (cmd["insertEmoji"]) {
+      cmd["insertEmoji"](item.name);
+    }
+    close();
+  }, [editor, close]);
+  const onSearch = useCallback((event) => {
+    setSearchQuery(event.target.value);
+  }, []);
+  const scrollToCategory = useCallback((cat) => {
+    setSearchQuery("");
+    setActiveCategory(cat);
+    requestAnimationFrame(() => {
+      const grid = pickerRef.current?.querySelector(".dm-emoji-picker-grid");
+      if (!grid) return;
+      const label = grid.querySelector(`[data-category="${cat}"]`);
+      if (label) {
+        grid.scrollTo({ top: label.offsetTop - grid.offsetTop, behavior: "smooth" });
+      }
+    });
+  }, []);
+  const activeCategoryRef = useRef(activeCategory);
+  activeCategoryRef.current = activeCategory;
+  const searchQueryRef = useRef(searchQuery);
+  searchQueryRef.current = searchQuery;
+  const onGridScroll = useCallback(() => {
+    if (searchQueryRef.current) return;
+    const grid = pickerRef.current?.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 !== activeCategoryRef.current) {
+      setActiveCategory(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);
+}
+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, " ");
+}
+function DomternalEmojiPicker({ editor: editorProp, emojis }) {
+  const { editor: contextEditor } = useCurrentEditor();
+  const editor = editorProp ?? contextEditor;
+  const {
+    isOpen,
+    searchQuery,
+    activeCategory,
+    categoryNames,
+    filteredEmojis,
+    frequentlyUsed,
+    pickerRef,
+    selectEmoji,
+    onSearch,
+    scrollToCategory,
+    onGridScroll,
+    close,
+    categories
+  } = useEmojiPicker(editor, emojis);
+  if (!isOpen) return /* @__PURE__ */ jsx("div", { ref: pickerRef, className: "dm-emoji-picker-host" });
+  return /* @__PURE__ */ jsx("div", { ref: pickerRef, className: "dm-emoji-picker-host", children: /* @__PURE__ */ jsxs("div", { className: "dm-emoji-picker", children: [
+    /* @__PURE__ */ jsx("div", { className: "dm-emoji-picker-search", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search emoji...",
+        value: searchQuery,
+        onChange: onSearch,
+        onKeyDown: (e) => {
+          if (e.key === "Escape") close();
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "dm-emoji-picker-tabs", role: "tablist", children: categoryNames.map((cat) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `dm-emoji-picker-tab${activeCategory === cat ? " dm-emoji-picker-tab--active" : ""}`,
+        title: cat,
+        "aria-label": cat,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => scrollToCategory(cat),
+        children: categoryIcon(cat)
+      },
+      cat
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "dm-emoji-picker-grid", onScroll: onGridScroll, children: searchQuery ? /* @__PURE__ */ jsx(Fragment$1, { children: filteredEmojis.length > 0 ? filteredEmojis.map((item) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "dm-emoji-swatch",
+        title: formatName(item.name),
+        "aria-label": formatName(item.name),
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => selectEmoji(item),
+        children: item.emoji
+      },
+      item.name
+    )) : /* @__PURE__ */ jsx("div", { className: "dm-emoji-picker-empty", children: "No emoji found" }) }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      frequentlyUsed.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx("div", { className: "dm-emoji-picker-category-label", children: "Frequently Used" }),
+        frequentlyUsed.map((item) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "dm-emoji-swatch",
+            title: formatName(item.name),
+            "aria-label": formatName(item.name),
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => selectEmoji(item),
+            children: item.emoji
+          },
+          item.name
+        ))
+      ] }),
+      categoryNames.map((cat) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "dm-emoji-picker-category-label", "data-category": cat, children: cat }),
+        (categories.get(cat) ?? []).map((item) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "dm-emoji-swatch",
+            title: formatName(item.name),
+            "aria-label": formatName(item.name),
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => selectEmoji(item),
+            children: item.emoji
+          },
+          item.name
+        ))
+      ] }, cat))
+    ] }) })
+  ] }) });
+}
+function Domternal({ children, deps, ...options }) {
+  const { editor } = useEditor(options, deps);
+  return /* @__PURE__ */ jsx(EditorProvider, { editor, children });
+}
+function DomternalContent({ className }) {
+  const { editor } = useCurrentEditor();
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !editor || editor.isDestroyed) return;
+    const editorDom = editor.view.dom;
+    if (editorDom.parentElement !== container) {
+      container.appendChild(editorDom);
+    }
+  }, [editor]);
+  const classes = className ? `dm-editor ${className}` : "dm-editor";
+  return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx("div", { ref: containerRef }) });
+}
+function DomternalLoading({ children }) {
+  const { editor } = useCurrentEditor();
+  if (editor) return null;
+  return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+function DomternalToolbarSub(props) {
+  return /* @__PURE__ */ jsx(DomternalToolbar, { ...props });
+}
+function DomternalBubbleMenuSub(props) {
+  return /* @__PURE__ */ jsx(DomternalBubbleMenu, { ...props });
+}
+function DomternalFloatingMenuSub(props) {
+  return /* @__PURE__ */ jsx(DomternalFloatingMenu, { ...props });
+}
+function DomternalEmojiPickerSub(props) {
+  return /* @__PURE__ */ jsx(DomternalEmojiPicker, { ...props });
+}
+DomternalContent.displayName = "Domternal.Content";
+DomternalLoading.displayName = "Domternal.Loading";
+DomternalToolbarSub.displayName = "Domternal.Toolbar";
+DomternalBubbleMenuSub.displayName = "Domternal.BubbleMenu";
+DomternalFloatingMenuSub.displayName = "Domternal.FloatingMenu";
+DomternalEmojiPickerSub.displayName = "Domternal.EmojiPicker";
+Domternal.Content = DomternalContent;
+Domternal.Loading = DomternalLoading;
+Domternal.Toolbar = DomternalToolbarSub;
+Domternal.BubbleMenu = DomternalBubbleMenuSub;
+Domternal.FloatingMenu = DomternalFloatingMenuSub;
+Domternal.EmojiPicker = DomternalEmojiPickerSub;
+var DomternalEditor = forwardRef(
+  function DomternalEditor2(props, ref) {
+    const {
+      className,
+      outputFormat = "html",
+      value,
+      onChange,
+      content,
+      children,
+      ...editorOptions
+    } = props;
+    const { editor, editorRef } = useEditor({
+      ...editorOptions,
+      content: content ?? value ?? "",
+      outputFormat
+    });
+    const state = useEditorState(editor);
+    useImperativeHandle(ref, () => ({
+      editor,
+      htmlContent: state.htmlContent,
+      jsonContent: state.jsonContent,
+      isEmpty: state.isEmpty,
+      isFocused: state.isFocused,
+      isEditable: state.isEditable
+    }), [editor, state]);
+    const prevValueRef = useRef(value);
+    useEffect(() => {
+      if (value === void 0 || !editor || editor.isDestroyed) return;
+      if (value === prevValueRef.current) return;
+      prevValueRef.current = value;
+      if (outputFormat === "html") {
+        if (value !== editor.getHTML()) {
+          editor.setContent(value, false);
+        }
+      } else {
+        if (JSON.stringify(value) !== JSON.stringify(editor.getJSON())) {
+          editor.setContent(value, false);
+        }
+      }
+    }, [value, editor, outputFormat]);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(() => {
+      if (!editor || editor.isDestroyed || !onChangeRef.current) return;
+      const handler = () => {
+        const cb = onChangeRef.current;
+        if (!cb) return;
+        const val = outputFormat === "html" ? editor.getHTML() : editor.getJSON();
+        cb(val);
+      };
+      editor.on("update", handler);
+      return () => {
+        editor.off("update", handler);
+      };
+    }, [editor, outputFormat]);
+    const classes = className ? `dm-editor ${className}` : "dm-editor";
+    return /* @__PURE__ */ jsxs(EditorProvider, { editor, children: [
+      children,
+      /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx("div", { ref: editorRef }) })
+    ] });
+  }
+);
+function EditorContent({ editor, innerRef, ...htmlProps }) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !editor || editor.isDestroyed) return;
+    const editorDom = editor.view.dom;
+    if (editorDom.parentElement !== container) {
+      container.appendChild(editorDom);
+    }
+    return () => {
+    };
+  }, [editor]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof innerRef === "function") innerRef(node);
+        else if (innerRef) innerRef.current = node;
+      },
+      ...htmlProps
+    }
+  );
+}
+var ReactNodeViewContext = createContext(null);
+var ReactNodeViewProvider = ReactNodeViewContext.Provider;
+function useReactNodeView() {
+  const context = useContext(ReactNodeViewContext);
+  if (!context) {
+    throw new Error("useReactNodeView must be used within a ReactNodeViewRenderer component");
+  }
+  return context;
+}
+
+// src/node-views/ReactNodeViewRenderer.ts
+function ReactNodeViewRenderer(component, options = {}) {
+  const constructor = (node, _view, getPos, decorations) => {
+    const ctx = constructor.__domternalContext;
+    const editor = ctx?.editor;
+    const extension = ctx?.extension ?? { name: node.type.name, options: {} };
+    return new ReactNodeView(component, {
+      editor,
+      node,
+      getPos,
+      decorations,
+      extension
+    }, options);
+  };
+  return constructor;
+}
+var ReactNodeView = class {
+  dom;
+  contentDOM = null;
+  root;
+  component;
+  editor;
+  node;
+  getPos;
+  decorations;
+  extension;
+  selected = false;
+  constructor(component, init, options) {
+    this.component = component;
+    this.editor = init.editor;
+    this.node = init.node;
+    this.getPos = init.getPos;
+    this.decorations = init.decorations;
+    this.extension = init.extension;
+    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";
+    }
+    this.root = createRoot(this.dom);
+    this.render();
+  }
+  render() {
+    const contextValue = {
+      onDragStart: (event) => {
+        if (this.editor.view.dragging) {
+          event.dataTransfer?.setData("text/plain", this.node.textContent);
+        }
+      },
+      nodeViewContentRef: (el) => {
+        if (el && this.contentDOM && !el.contains(this.contentDOM)) {
+          el.appendChild(this.contentDOM);
+        }
+      }
+    };
+    const props = {
+      editor: this.editor,
+      node: this.node,
+      selected: this.selected,
+      getPos: this.getPos,
+      extension: this.extension,
+      decorations: this.decorations,
+      updateAttributes: (attrs) => {
+        const pos = this.getPos();
+        const { tr } = this.editor.view.state;
+        tr.setNodeMarkup(pos, void 0, { ...this.node.attrs, ...attrs });
+        this.editor.view.dispatch(tr);
+      },
+      deleteNode: () => {
+        const pos = this.getPos();
+        const { tr } = this.editor.view.state;
+        tr.delete(pos, pos + this.node.nodeSize);
+        this.editor.view.dispatch(tr);
+      }
+    };
+    this.root.render(
+      createElement(
+        ReactNodeViewProvider,
+        { value: contextValue },
+        createElement(this.component, props)
+      )
+    );
+  }
+  update(node, decorations) {
+    if (node.type.name !== this.node.type.name) return false;
+    this.node = node;
+    this.decorations = decorations;
+    this.render();
+    return true;
+  }
+  selectNode() {
+    this.selected = true;
+    this.render();
+  }
+  deselectNode() {
+    this.selected = false;
+    this.render();
+  }
+  destroy() {
+    const root = this.root;
+    setTimeout(() => root.unmount(), 0);
+  }
+  ignoreMutation(mutation) {
+    if (!this.contentDOM) return true;
+    return !this.contentDOM.contains(mutation.target);
+  }
+  stopEvent() {
+    return false;
+  }
+};
+function NodeViewWrapper({ as: Tag = "div", style, ...props }) {
+  const { onDragStart } = useReactNodeView();
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...props,
+      "data-node-view-wrapper": "",
+      style: { whiteSpace: "normal", ...style },
+      onDragStart
+    }
+  );
+}
+function NodeViewContent({ as: Tag = "div", style, ...props }) {
+  const { nodeViewContentRef } = useReactNodeView();
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...props,
+      ref: nodeViewContentRef,
+      "data-node-view-content": "",
+      style: { whiteSpace: "pre-wrap", ...style }
+    }
+  );
+}
+
+export { DEFAULT_EXTENSIONS, Domternal, DomternalBubbleMenu, DomternalEditor, DomternalEmojiPicker, DomternalFloatingMenu, DomternalToolbar, EditorContent, EditorProvider, NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map