@tiptap/react 3.17.0 → 3.18.0

package/dist/index.cjs

@@ -47,10 +47,19 @@ __export(index_exports, {
   ReactNodeViewContext: () => ReactNodeViewContext,
   ReactNodeViewRenderer: () => ReactNodeViewRenderer,
   ReactRenderer: () => ReactRenderer,
+  Tiptap: () => Tiptap,
+  TiptapBubbleMenu: () => TiptapBubbleMenu,
+  TiptapContent: () => TiptapContent,
+  TiptapContext: () => TiptapContext,
+  TiptapFloatingMenu: () => TiptapFloatingMenu,
+  TiptapLoading: () => TiptapLoading,
+  TiptapWrapper: () => TiptapWrapper,
   useCurrentEditor: () => useCurrentEditor,
   useEditor: () => useEditor,
   useEditorState: () => useEditorState,
-  useReactNodeView: () => useReactNodeView
+  useReactNodeView: () => useReactNodeView,
+  useTiptap: () => useTiptap,
+  useTiptapState: () => useTiptapState
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -871,6 +880,7 @@ var ReactNodeView = class extends import_core3.NodeView {
      * The requestAnimationFrame ID used for selection updates.
      */
     this.selectionRafId = null;
+    this.cachedExtensionWithSyncedStorage = null;
     if (!this.node.isLeaf) {
       if (this.options.contentDOMElementTag) {
         this.contentDOMElement = document.createElement(this.options.contentDOMElementTag);
@@ -887,6 +897,27 @@ var ReactNodeView = class extends import_core3.NodeView {
       contentTarget.appendChild(this.contentDOMElement);
     }
   }
+  /**
+   * Returns a proxy of the extension that redirects storage access to the editor's mutable storage.
+   * This preserves the original prototype chain (instanceof checks, methods like configure/extend work).
+   * Cached to avoid proxy creation on every update.
+   */
+  get extensionWithSyncedStorage() {
+    if (!this.cachedExtensionWithSyncedStorage) {
+      const editor = this.editor;
+      const extension = this.extension;
+      this.cachedExtensionWithSyncedStorage = new Proxy(extension, {
+        get(target, prop, receiver) {
+          var _a;
+          if (prop === "storage") {
+            return (_a = editor.storage[extension.name]) != null ? _a : {};
+          }
+          return Reflect.get(target, prop, receiver);
+        }
+      });
+    }
+    return this.cachedExtensionWithSyncedStorage;
+  }
   /**
    * Setup the React component.
    * Called on initialization.
@@ -899,7 +930,7 @@ var ReactNodeView = class extends import_core3.NodeView {
       innerDecorations: this.innerDecorations,
       view: this.view,
       selected: false,
-      extension: this.extension,
+      extension: this.extensionWithSyncedStorage,
       HTMLAttributes: this.HTMLAttributes,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
@@ -1020,7 +1051,7 @@ var ReactNodeView = class extends import_core3.NodeView {
         newDecorations: decorations,
         oldInnerDecorations,
         innerDecorations,
-        updateProps: () => rerenderComponent({ node, decorations, innerDecorations })
+        updateProps: () => rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage })
       });
     }
     if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
@@ -1029,7 +1060,7 @@ var ReactNodeView = class extends import_core3.NodeView {
     this.node = node;
     this.decorations = decorations;
     this.innerDecorations = innerDecorations;
-    rerenderComponent({ node, decorations, innerDecorations });
+    rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage });
     return true;
   }
   /**
@@ -1091,6 +1122,289 @@ function ReactNodeViewRenderer(component, options) {
   };
 }
 
+// src/Tiptap.tsx
+var import_react14 = require("react");
+
+// src/menus/BubbleMenu.tsx
+var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
+var import_react10 = require("@tiptap/react");
+var import_react11 = __toESM(require("react"), 1);
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var BubbleMenu = import_react11.default.forwardRef(
+  ({
+    pluginKey = "bubbleMenu",
+    editor,
+    updateDelay,
+    resizeDelay,
+    appendTo,
+    shouldShow = null,
+    getReferencedVirtualElement,
+    options,
+    children,
+    ...restProps
+  }, ref) => {
+    const menuEl = (0, import_react11.useRef)(document.createElement("div"));
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = (0, import_react10.useCurrentEditor)();
+    const pluginEditor = editor || currentEditor;
+    const bubbleMenuPluginProps = {
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      pluginKey,
+      shouldShow,
+      getReferencedVirtualElement,
+      options
+    };
+    const bubbleMenuPluginPropsRef = (0, import_react11.useRef)(bubbleMenuPluginProps);
+    bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps;
+    const [pluginInitialized, setPluginInitialized] = (0, import_react11.useState)(false);
+    const skipFirstUpdateRef = (0, import_react11.useRef)(true);
+    (0, import_react11.useEffect)(() => {
+      if (pluginEditor == null ? void 0 : pluginEditor.isDestroyed) {
+        return;
+      }
+      if (!pluginEditor) {
+        console.warn("BubbleMenu component is not rendered inside of an editor component or does not have editor prop.");
+        return;
+      }
+      const bubbleMenuElement = menuEl.current;
+      bubbleMenuElement.style.visibility = "hidden";
+      bubbleMenuElement.style.position = "absolute";
+      const plugin = (0, import_extension_bubble_menu.BubbleMenuPlugin)({
+        ...bubbleMenuPluginPropsRef.current,
+        editor: pluginEditor,
+        element: bubbleMenuElement
+      });
+      pluginEditor.registerPlugin(plugin);
+      const createdPluginKey = bubbleMenuPluginPropsRef.current.pluginKey;
+      skipFirstUpdateRef.current = true;
+      setPluginInitialized(true);
+      return () => {
+        setPluginInitialized(false);
+        pluginEditor.unregisterPlugin(createdPluginKey);
+        window.requestAnimationFrame(() => {
+          if (bubbleMenuElement.parentNode) {
+            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
+          }
+        });
+      };
+    }, [pluginEditor]);
+    (0, import_react11.useEffect)(() => {
+      if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {
+        return;
+      }
+      if (skipFirstUpdateRef.current) {
+        skipFirstUpdateRef.current = false;
+        return;
+      }
+      pluginEditor.view.dispatch(
+        pluginEditor.state.tr.setMeta("bubbleMenu", {
+          type: "updateOptions",
+          options: bubbleMenuPluginPropsRef.current
+        })
+      );
+    }, [
+      pluginInitialized,
+      pluginEditor,
+      updateDelay,
+      resizeDelay,
+      shouldShow,
+      options,
+      appendTo,
+      getReferencedVirtualElement
+    ]);
+    return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...restProps, children }), menuEl.current);
+  }
+);
+
+// src/menus/FloatingMenu.tsx
+var import_extension_floating_menu = require("@tiptap/extension-floating-menu");
+var import_react12 = require("@tiptap/react");
+var import_react13 = __toESM(require("react"), 1);
+var import_react_dom4 = require("react-dom");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FloatingMenu = import_react13.default.forwardRef(
+  ({
+    pluginKey = "floatingMenu",
+    editor,
+    updateDelay,
+    resizeDelay,
+    appendTo,
+    shouldShow = null,
+    options,
+    children,
+    ...restProps
+  }, ref) => {
+    const menuEl = (0, import_react13.useRef)(document.createElement("div"));
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = (0, import_react12.useCurrentEditor)();
+    const pluginEditor = editor || currentEditor;
+    const floatingMenuPluginProps = {
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      pluginKey,
+      shouldShow,
+      options
+    };
+    const floatingMenuPluginPropsRef = (0, import_react13.useRef)(floatingMenuPluginProps);
+    floatingMenuPluginPropsRef.current = floatingMenuPluginProps;
+    const [pluginInitialized, setPluginInitialized] = (0, import_react13.useState)(false);
+    const skipFirstUpdateRef = (0, import_react13.useRef)(true);
+    (0, import_react13.useEffect)(() => {
+      if (pluginEditor == null ? void 0 : pluginEditor.isDestroyed) {
+        return;
+      }
+      if (!pluginEditor) {
+        console.warn(
+          "FloatingMenu component is not rendered inside of an editor component or does not have editor prop."
+        );
+        return;
+      }
+      const floatingMenuElement = menuEl.current;
+      floatingMenuElement.style.visibility = "hidden";
+      floatingMenuElement.style.position = "absolute";
+      const plugin = (0, import_extension_floating_menu.FloatingMenuPlugin)({
+        ...floatingMenuPluginPropsRef.current,
+        editor: pluginEditor,
+        element: floatingMenuElement
+      });
+      pluginEditor.registerPlugin(plugin);
+      const createdPluginKey = floatingMenuPluginPropsRef.current.pluginKey;
+      skipFirstUpdateRef.current = true;
+      setPluginInitialized(true);
+      return () => {
+        setPluginInitialized(false);
+        pluginEditor.unregisterPlugin(createdPluginKey);
+        window.requestAnimationFrame(() => {
+          if (floatingMenuElement.parentNode) {
+            floatingMenuElement.parentNode.removeChild(floatingMenuElement);
+          }
+        });
+      };
+    }, [pluginEditor]);
+    (0, import_react13.useEffect)(() => {
+      if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {
+        return;
+      }
+      if (skipFirstUpdateRef.current) {
+        skipFirstUpdateRef.current = false;
+        return;
+      }
+      pluginEditor.view.dispatch(
+        pluginEditor.state.tr.setMeta("floatingMenu", {
+          type: "updateOptions",
+          options: floatingMenuPluginPropsRef.current
+        })
+      );
+    }, [pluginInitialized, pluginEditor, updateDelay, resizeDelay, shouldShow, options, appendTo]);
+    return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...restProps, children }), menuEl.current);
+  }
+);
+
+// src/Tiptap.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TiptapContext = (0, import_react14.createContext)({
+  editor: null,
+  isReady: false
+});
+TiptapContext.displayName = "TiptapContext";
+var useTiptap = () => (0, import_react14.useContext)(TiptapContext);
+function useTiptapState(selector, equalityFn) {
+  const { editor } = useTiptap();
+  return useEditorState({
+    editor,
+    selector,
+    equalityFn
+  });
+}
+function TiptapWrapper({ instance, children }) {
+  var _a;
+  const [isReady, setIsReady] = (0, import_react14.useState)((_a = instance == null ? void 0 : instance.isInitialized) != null ? _a : false);
+  (0, import_react14.useEffect)(() => {
+    if (!instance) {
+      setIsReady(false);
+      return;
+    }
+    if (instance.isInitialized) {
+      setIsReady(true);
+      return;
+    }
+    const handleCreate = () => {
+      setIsReady(true);
+    };
+    instance.on("create", handleCreate);
+    return () => {
+      instance.off("create", handleCreate);
+    };
+  }, [instance]);
+  const tiptapContextValue = (0, import_react14.useMemo)(() => ({ editor: instance, isReady }), [instance, isReady]);
+  const legacyContextValue = (0, import_react14.useMemo)(() => ({ editor: instance }), [instance]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(EditorContext.Provider, { value: legacyContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TiptapContext.Provider, { value: tiptapContextValue, children }) });
+}
+TiptapWrapper.displayName = "Tiptap";
+function TiptapContent({ ...rest }) {
+  const { editor } = useTiptap();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(EditorContent, { editor, ...rest });
+}
+TiptapContent.displayName = "Tiptap.Content";
+function TiptapLoading({ children }) {
+  const { isReady } = useTiptap();
+  if (isReady) {
+    return null;
+  }
+  return children;
+}
+TiptapLoading.displayName = "Tiptap.Loading";
+function TiptapBubbleMenu({ children, ...rest }) {
+  const { editor } = useTiptap();
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BubbleMenu, { editor, ...rest, children });
+}
+TiptapBubbleMenu.displayName = "Tiptap.BubbleMenu";
+function TiptapFloatingMenu({ children, ...rest }) {
+  const { editor } = useTiptap();
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingMenu, { ...rest, editor, children });
+}
+TiptapFloatingMenu.displayName = "Tiptap.FloatingMenu";
+var Tiptap = Object.assign(TiptapWrapper, {
+  /**
+   * The Tiptap Content component that renders the EditorContent with the editor instance from the context.
+   * @see TiptapContent
+   */
+  Content: TiptapContent,
+  /**
+   * The Tiptap Loading component that renders its children only when the editor is not ready.
+   * @see TiptapLoading
+   */
+  Loading: TiptapLoading,
+  /**
+   * The Tiptap BubbleMenu component that wraps the BubbleMenu from Tiptap and provides the editor instance from the context.
+   * @see TiptapBubbleMenu
+   */
+  BubbleMenu: TiptapBubbleMenu,
+  /**
+   * The Tiptap FloatingMenu component that wraps the FloatingMenu from Tiptap and provides the editor instance from the context.
+   * @see TiptapFloatingMenu
+   */
+  FloatingMenu: TiptapFloatingMenu
+});
+
 // src/index.ts
 __reExport(index_exports, require("@tiptap/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
@@ -1111,10 +1425,19 @@ __reExport(index_exports, require("@tiptap/core"), module.exports);
   ReactNodeViewContext,
   ReactNodeViewRenderer,
   ReactRenderer,
+  Tiptap,
+  TiptapBubbleMenu,
+  TiptapContent,
+  TiptapContext,
+  TiptapFloatingMenu,
+  TiptapLoading,
+  TiptapWrapper,
   useCurrentEditor,
   useEditor,
   useEditorState,
   useReactNodeView,
+  useTiptap,
+  useTiptapState,
   ...require("@tiptap/core")
 });
 //# sourceMappingURL=index.cjs.map