@tiptap/react 3.17.0 → 3.18.0

package/dist/index.js

@@ -815,6 +815,7 @@ var ReactNodeView = class extends 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);
@@ -831,6 +832,27 @@ var ReactNodeView = class extends 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.
@@ -843,7 +865,7 @@ var ReactNodeView = class extends 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),
@@ -964,7 +986,7 @@ var ReactNodeView = class extends 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) {
@@ -973,7 +995,7 @@ var ReactNodeView = class extends NodeView {
     this.node = node;
     this.decorations = decorations;
     this.innerDecorations = innerDecorations;
-    rerenderComponent({ node, decorations, innerDecorations });
+    rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage });
     return true;
   }
   /**
@@ -1035,6 +1057,289 @@ function ReactNodeViewRenderer(component, options) {
   };
 }
 
+// src/Tiptap.tsx
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect5, useMemo as useMemo2, useState as useState5 } from "react";
+
+// src/menus/BubbleMenu.tsx
+import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
+import { useCurrentEditor as useCurrentEditor2 } from "@tiptap/react";
+import React5, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var BubbleMenu = React5.forwardRef(
+  ({
+    pluginKey = "bubbleMenu",
+    editor,
+    updateDelay,
+    resizeDelay,
+    appendTo,
+    shouldShow = null,
+    getReferencedVirtualElement,
+    options,
+    children,
+    ...restProps
+  }, ref) => {
+    const menuEl = useRef2(document.createElement("div"));
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = useCurrentEditor2();
+    const pluginEditor = editor || currentEditor;
+    const bubbleMenuPluginProps = {
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      pluginKey,
+      shouldShow,
+      getReferencedVirtualElement,
+      options
+    };
+    const bubbleMenuPluginPropsRef = useRef2(bubbleMenuPluginProps);
+    bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps;
+    const [pluginInitialized, setPluginInitialized] = useState3(false);
+    const skipFirstUpdateRef = useRef2(true);
+    useEffect3(() => {
+      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 = 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]);
+    useEffect3(() => {
+      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 createPortal(/* @__PURE__ */ jsx8("div", { ...restProps, children }), menuEl.current);
+  }
+);
+
+// src/menus/FloatingMenu.tsx
+import { FloatingMenuPlugin } from "@tiptap/extension-floating-menu";
+import { useCurrentEditor as useCurrentEditor3 } from "@tiptap/react";
+import React6, { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var FloatingMenu = React6.forwardRef(
+  ({
+    pluginKey = "floatingMenu",
+    editor,
+    updateDelay,
+    resizeDelay,
+    appendTo,
+    shouldShow = null,
+    options,
+    children,
+    ...restProps
+  }, ref) => {
+    const menuEl = useRef3(document.createElement("div"));
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = useCurrentEditor3();
+    const pluginEditor = editor || currentEditor;
+    const floatingMenuPluginProps = {
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      pluginKey,
+      shouldShow,
+      options
+    };
+    const floatingMenuPluginPropsRef = useRef3(floatingMenuPluginProps);
+    floatingMenuPluginPropsRef.current = floatingMenuPluginProps;
+    const [pluginInitialized, setPluginInitialized] = useState4(false);
+    const skipFirstUpdateRef = useRef3(true);
+    useEffect4(() => {
+      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 = 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]);
+    useEffect4(() => {
+      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 createPortal2(/* @__PURE__ */ jsx9("div", { ...restProps, children }), menuEl.current);
+  }
+);
+
+// src/Tiptap.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TiptapContext = createContext3({
+  editor: null,
+  isReady: false
+});
+TiptapContext.displayName = "TiptapContext";
+var useTiptap = () => useContext3(TiptapContext);
+function useTiptapState(selector, equalityFn) {
+  const { editor } = useTiptap();
+  return useEditorState({
+    editor,
+    selector,
+    equalityFn
+  });
+}
+function TiptapWrapper({ instance, children }) {
+  var _a;
+  const [isReady, setIsReady] = useState5((_a = instance == null ? void 0 : instance.isInitialized) != null ? _a : false);
+  useEffect5(() => {
+    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 = useMemo2(() => ({ editor: instance, isReady }), [instance, isReady]);
+  const legacyContextValue = useMemo2(() => ({ editor: instance }), [instance]);
+  return /* @__PURE__ */ jsx10(EditorContext.Provider, { value: legacyContextValue, children: /* @__PURE__ */ jsx10(TiptapContext.Provider, { value: tiptapContextValue, children }) });
+}
+TiptapWrapper.displayName = "Tiptap";
+function TiptapContent({ ...rest }) {
+  const { editor } = useTiptap();
+  return /* @__PURE__ */ jsx10(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__ */ jsx10(BubbleMenu, { editor, ...rest, children });
+}
+TiptapBubbleMenu.displayName = "Tiptap.BubbleMenu";
+function TiptapFloatingMenu({ children, ...rest }) {
+  const { editor } = useTiptap();
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx10(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
 export * from "@tiptap/core";
 export {
@@ -1054,9 +1359,18 @@ export {
   ReactNodeViewContext,
   ReactNodeViewRenderer,
   ReactRenderer,
+  Tiptap,
+  TiptapBubbleMenu,
+  TiptapContent,
+  TiptapContext,
+  TiptapFloatingMenu,
+  TiptapLoading,
+  TiptapWrapper,
   useCurrentEditor,
   useEditor,
   useEditorState,
-  useReactNodeView
+  useReactNodeView,
+  useTiptap,
+  useTiptapState
 };
 //# sourceMappingURL=index.js.map