@domternal/react 1.0.3 → 1.1.0

package/README.md

@@ -19,7 +19,7 @@ and React 19.
 pnpm add @domternal/react @domternal/core @domternal/theme react react-dom
 ```
 
-`react` (>=18), `react-dom` (>=18), and `@domternal/core` (>=1.0.0 <2.0.0) are peer dependencies. Import the theme
+`react` (>=18), `react-dom` (>=18), and `@domternal/core` (>=1.1.0 <2.0.0) are peer dependencies. Import the theme
 ([`@domternal/theme`](https://www.npmjs.com/package/@domternal/theme)) in your entry CSS for default styling:
 
 ```css

package/dist/index.d.ts

@@ -321,7 +321,7 @@ interface DomternalEditorProps extends Omit<UseEditorOptions, 'outputFormat'> {
     value?: Content;
     /** Called when content changes (controlled mode). */
     onChange?: (value: string | JSONContent) => void;
-    /** Additional content rendered inside the dm-editor wrapper. */
+    /** Additional content inside the provider, before the dm-editor wrapper as siblings. */
     children?: React.ReactNode;
 }
 interface DomternalEditorRef {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo, useCallback, useSyncExternalStore, useContext, Fragment, useLayoutEffect, createElement } from 'react';
+import { createContext, forwardRef, useImperativeHandle, useRef, useEffect, useState, useMemo, useSyncExternalStore, useContext, useCallback, Fragment, useLayoutEffect, createElement } from 'react';
 import { Document, Paragraph, Text, BaseKeymap, History, Editor, refocusEditorAfterCommand, positionFloatingOnce, PluginKey, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, positionFloating, ToolbarController, defaultBubbleContexts, buildBubbleItemMaps, createBubbleShouldShow, createBubbleMenuPlugin, resolveBubbleNames, resolveBubbleMenuItems } from '@domternal/core';
 export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -95,10 +95,7 @@ function useEditor(options = {}, deps) {
     const existing = instanceRef.current;
     if (existing && !existing.isDestroyed) {
       const mount = editorRef.current;
-      if (mount && existing.view.dom.parentElement !== mount) {
-        mount.appendChild(existing.view.dom);
-        existing.adoptPresetClass();
-      }
+      if (mount) existing.adoptDom(mount);
       callbacksRef.current.onCreate?.(existing);
       return () => {
         destroyCurrentEditor();
@@ -222,28 +219,68 @@ function getFullState(editor) {
   };
 }
 function useEditorStateSelector(editor, selector) {
-  const selectorRef = useRef(selector);
-  selectorRef.current = selector;
-  const subscribe = useCallback(
-    (callback) => {
-      if (!editor || editor.isDestroyed) return () => {
+  const store = useMemo(() => createEditorStore(editor), [editor]);
+  const getSnapshot = useMemo(() => {
+    let previous;
+    let selected;
+    return () => {
+      const snapshot = store.getSnapshot();
+      if (snapshot !== previous) {
+        previous = snapshot;
+        selected = snapshot ? selector(snapshot.editor) : void 0;
+      }
+      return selected;
+    };
+  }, [store, selector]);
+  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function createEditorStore(editor) {
+  let snapshot;
+  let destroyed = false;
+  const listeners = /* @__PURE__ */ new Set();
+  const getSnapshot = () => {
+    if (!editor || destroyed || editor.isDestroyed) return null;
+    const state = editor.state;
+    const focused = editor.isFocused;
+    const editable = editor.isEditable;
+    if (snapshot?.state !== state || snapshot.focused !== focused || snapshot.editable !== editable) {
+      snapshot = { editor, state, focused, editable };
+    }
+    return snapshot;
+  };
+  const notify = () => {
+    snapshot = void 0;
+    listeners.forEach((listener) => {
+      listener();
+    });
+  };
+  const onDestroy = () => {
+    destroyed = true;
+    notify();
+  };
+  return {
+    getSnapshot,
+    subscribe(callback) {
+      if (!editor || destroyed || editor.isDestroyed) return () => {
       };
-      editor.on("transaction", callback);
-      editor.on("focus", callback);
-      editor.on("blur", callback);
+      listeners.add(callback);
+      if (listeners.size === 1) {
+        editor.on("transaction", notify);
+        editor.on("focus", notify);
+        editor.on("blur", notify);
+        editor.on("destroy", onDestroy);
+      }
       return () => {
-        editor.off("transaction", callback);
-        editor.off("focus", callback);
-        editor.off("blur", callback);
+        listeners.delete(callback);
+        if (listeners.size === 0) {
+          editor.off("transaction", notify);
+          editor.off("focus", notify);
+          editor.off("blur", notify);
+          editor.off("destroy", onDestroy);
+        }
       };
-    },
-    [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 }) {
@@ -678,6 +715,7 @@ function ToolbarDropdownPanel({
   onItemClick
 }) {
   const innerHtml = useInnerHtml();
+  const { getTooltip } = useTooltip();
   if (dropdown.layout === "grid") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -694,7 +732,7 @@ function ToolbarDropdownPanel({
               role: "menuitem",
               tabIndex: -1,
               "aria-label": sub.label,
-              title: sub.label,
+              title: getTooltip(sub),
               style: { backgroundColor: sub.color },
               onMouseDown: (e) => {
                 e.preventDefault();
@@ -712,6 +750,7 @@ function ToolbarDropdownPanel({
               role: "menuitem",
               tabIndex: -1,
               "aria-label": sub.label,
+              title: getTooltip(sub),
               dangerouslySetInnerHTML: innerHtml(getCachedItemContent(sub.icon, sub.label)),
               onMouseDown: (e) => {
                 e.preventDefault();
@@ -740,6 +779,7 @@ function ToolbarDropdownPanel({
           role: "menuitem",
           tabIndex: -1,
           "aria-label": sub.label,
+          title: getTooltip(sub),
           ref: (el) => {
             if (el && sub.style) el.setAttribute("style", sub.style);
           },
@@ -1585,7 +1625,10 @@ function FloatingMenuItemButton({
             dangerouslySetInnerHTML: innerHtml(iconHtml)
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "dm-floating-menu-item-label", children: item.label }),
+        item.description ? /* @__PURE__ */ jsxs("span", { className: "dm-floating-menu-item-text", children: [
+          /* @__PURE__ */ jsx("span", { className: "dm-floating-menu-item-label", children: item.label }),
+          /* @__PURE__ */ jsx("span", { className: "dm-floating-menu-item-description", children: item.description })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "dm-floating-menu-item-label", children: item.label }),
         item.shortcut && /* @__PURE__ */ jsx("span", { className: "dm-floating-menu-item-shortcut", "aria-hidden": "true", children: item.shortcut })
       ]
     }
@@ -1973,11 +2016,12 @@ function DomternalContent({ className }) {
   useEffect(() => {
     const container = containerRef.current;
     if (!container || !editor || editor.isDestroyed) return;
-    const editorDom = editor.view.dom;
-    if (editorDom.parentElement !== container) {
-      container.appendChild(editorDom);
-      editor.adoptPresetClass();
-    }
+    editor.adoptDom(container);
+    return () => {
+      if (!editor.isDestroyed && editor.view.dom.parentElement === container) {
+        editor.adoptDom(document.createElement("div"));
+      }
+    };
   }, [editor]);
   const classes = className ? `dm-editor ${className}` : "dm-editor";
   return /* @__PURE__ */ jsx("div", { className: classes, "data-dm-editor-ui": "", children: /* @__PURE__ */ jsx("div", { ref: containerRef }) });
@@ -2078,12 +2122,11 @@ function EditorContent({ editor, innerRef, ...htmlProps }) {
   useEffect(() => {
     const container = containerRef.current;
     if (!container || !editor || editor.isDestroyed) return;
-    const editorDom = editor.view.dom;
-    if (editorDom.parentElement !== container) {
-      container.appendChild(editorDom);
-      editor.adoptPresetClass();
-    }
+    editor.adoptDom(container);
     return () => {
+      if (!editor.isDestroyed && editor.view.dom.parentElement === container) {
+        editor.adoptDom(document.createElement("div"));
+      }
     };
   }, [editor]);
   return /* @__PURE__ */ jsx(