@tiptap/react 3.17.0 → 3.18.0

package/dist/menus/index.js

@@ -1,7 +1,7 @@
 // src/menus/BubbleMenu.tsx
 import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
 import { useCurrentEditor } from "@tiptap/react";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { jsx } from "react/jsx-runtime";
 var BubbleMenu = React.forwardRef(
@@ -36,6 +36,8 @@ var BubbleMenu = React.forwardRef(
     };
     const bubbleMenuPluginPropsRef = useRef(bubbleMenuPluginProps);
     bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps;
+    const [pluginInitialized, setPluginInitialized] = useState(false);
+    const skipFirstUpdateRef = useRef(true);
     useEffect(() => {
       if (pluginEditor == null ? void 0 : pluginEditor.isDestroyed) {
         return;
@@ -54,7 +56,10 @@ var BubbleMenu = React.forwardRef(
       });
       pluginEditor.registerPlugin(plugin);
       const createdPluginKey = bubbleMenuPluginPropsRef.current.pluginKey;
+      skipFirstUpdateRef.current = true;
+      setPluginInitialized(true);
       return () => {
+        setPluginInitialized(false);
         pluginEditor.unregisterPlugin(createdPluginKey);
         window.requestAnimationFrame(() => {
           if (bubbleMenuElement.parentNode) {
@@ -63,6 +68,30 @@ var BubbleMenu = React.forwardRef(
         });
       };
     }, [pluginEditor]);
+    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 createPortal(/* @__PURE__ */ jsx("div", { ...restProps, children }), menuEl.current);
   }
 );
@@ -70,7 +99,7 @@ var BubbleMenu = React.forwardRef(
 // src/menus/FloatingMenu.tsx
 import { FloatingMenuPlugin } from "@tiptap/extension-floating-menu";
 import { useCurrentEditor as useCurrentEditor2 } from "@tiptap/react";
-import React2, { useEffect as useEffect2, useRef as useRef2 } from "react";
+import React2, { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var FloatingMenu = React2.forwardRef(
@@ -92,40 +121,66 @@ var FloatingMenu = React2.forwardRef(
       ref.current = menuEl.current;
     }
     const { editor: currentEditor } = useCurrentEditor2();
+    const pluginEditor = editor || currentEditor;
+    const floatingMenuPluginProps = {
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      pluginKey,
+      shouldShow,
+      options
+    };
+    const floatingMenuPluginPropsRef = useRef2(floatingMenuPluginProps);
+    floatingMenuPluginPropsRef.current = floatingMenuPluginProps;
+    const [pluginInitialized, setPluginInitialized] = useState2(false);
+    const skipFirstUpdateRef = useRef2(true);
     useEffect2(() => {
-      const floatingMenuElement = menuEl.current;
-      floatingMenuElement.style.visibility = "hidden";
-      floatingMenuElement.style.position = "absolute";
-      if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
+      if (pluginEditor == null ? void 0 : pluginEditor.isDestroyed) {
         return;
       }
-      const attachToEditor = editor || currentEditor;
-      if (!attachToEditor) {
+      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({
-        editor: attachToEditor,
-        element: floatingMenuElement,
-        pluginKey,
-        updateDelay,
-        resizeDelay,
-        appendTo,
-        shouldShow,
-        options
+        ...floatingMenuPluginPropsRef.current,
+        editor: pluginEditor,
+        element: floatingMenuElement
       });
-      attachToEditor.registerPlugin(plugin);
+      pluginEditor.registerPlugin(plugin);
+      const createdPluginKey = floatingMenuPluginPropsRef.current.pluginKey;
+      skipFirstUpdateRef.current = true;
+      setPluginInitialized(true);
       return () => {
-        attachToEditor.unregisterPlugin(pluginKey);
+        setPluginInitialized(false);
+        pluginEditor.unregisterPlugin(createdPluginKey);
         window.requestAnimationFrame(() => {
           if (floatingMenuElement.parentNode) {
             floatingMenuElement.parentNode.removeChild(floatingMenuElement);
           }
         });
       };
-    }, [editor, currentEditor, appendTo, pluginKey, shouldShow, options, updateDelay, resizeDelay]);
+    }, [pluginEditor]);
+    useEffect2(() => {
+      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__ */ jsx2("div", { ...restProps, children }), menuEl.current);
   }
 );

package/dist/menus/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/menus/BubbleMenu.tsx","../../src/menus/FloatingMenu.tsx"],"sourcesContent":["import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'\nimport { useCurrentEditor } from '@tiptap/react'\nimport React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &\n  React.HTMLAttributes<HTMLDivElement>\n\nexport const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(\n  (\n    {\n      pluginKey = 'bubbleMenu',\n      editor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow = null,\n      getReferencedVirtualElement,\n      options,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    /**\n     * The editor instance where the bubble menu plugin will be registered.\n     */\n    const pluginEditor = editor || currentEditor\n\n    // Creating a useMemo would be more computationally expensive than just\n    // re-creating this object on every render.\n    const bubbleMenuPluginProps: Omit<BubbleMenuPluginProps, 'editor' | 'element'> = {\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      pluginKey,\n      shouldShow,\n      getReferencedVirtualElement,\n      options,\n    }\n    /**\n     * The props for the bubble menu plugin. They are accessed inside a ref to\n     * avoid running the useEffect hook and re-registering the plugin when the\n     * props change.\n     */\n    const bubbleMenuPluginPropsRef = useRef(bubbleMenuPluginProps)\n    bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps\n\n    useEffect(() => {\n      if (pluginEditor?.isDestroyed) {\n        return\n      }\n\n      if (!pluginEditor) {\n        console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')\n        return\n      }\n\n      const bubbleMenuElement = menuEl.current\n      bubbleMenuElement.style.visibility = 'hidden'\n      bubbleMenuElement.style.position = 'absolute'\n\n      const plugin = BubbleMenuPlugin({\n        ...bubbleMenuPluginPropsRef.current,\n        editor: pluginEditor,\n        element: bubbleMenuElement,\n      })\n\n      pluginEditor.registerPlugin(plugin)\n\n      const createdPluginKey = bubbleMenuPluginPropsRef.current.pluginKey\n\n      return () => {\n        pluginEditor.unregisterPlugin(createdPluginKey)\n        window.requestAnimationFrame(() => {\n          if (bubbleMenuElement.parentNode) {\n            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement)\n          }\n        })\n      }\n    }, [pluginEditor])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n","import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\nimport { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'\nimport { useCurrentEditor } from '@tiptap/react'\nimport React, { useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {\n  editor: FloatingMenuPluginProps['editor'] | null\n  options?: FloatingMenuPluginProps['options']\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(\n  (\n    {\n      pluginKey = 'floatingMenu',\n      editor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow = null,\n      options,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    useEffect(() => {\n      const floatingMenuElement = menuEl.current\n\n      floatingMenuElement.style.visibility = 'hidden'\n      floatingMenuElement.style.position = 'absolute'\n\n      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {\n        return\n      }\n\n      const attachToEditor = editor || currentEditor\n\n      if (!attachToEditor) {\n        console.warn(\n          'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',\n        )\n        return\n      }\n\n      const plugin = FloatingMenuPlugin({\n        editor: attachToEditor,\n        element: floatingMenuElement,\n        pluginKey,\n        updateDelay,\n        resizeDelay,\n        appendTo,\n        shouldShow,\n        options,\n      })\n\n      attachToEditor.registerPlugin(plugin)\n\n      return () => {\n        attachToEditor.unregisterPlugin(pluginKey)\n        window.requestAnimationFrame(() => {\n          if (floatingMenuElement.parentNode) {\n            floatingMenuElement.parentNode.removeChild(floatingMenuElement)\n          }\n        })\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [editor, currentEditor, appendTo, pluginKey, shouldShow, options, updateDelay, resizeDelay])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n"],"mappings":"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","names":["useCurrentEditor","React","useEffect","useRef","createPortal","jsx"]}
+{"version":3,"sources":["../../src/menus/BubbleMenu.tsx","../../src/menus/FloatingMenu.tsx"],"sourcesContent":["import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'\nimport { useCurrentEditor } from '@tiptap/react'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &\n  React.HTMLAttributes<HTMLDivElement>\n\nexport const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(\n  (\n    {\n      pluginKey = 'bubbleMenu',\n      editor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow = null,\n      getReferencedVirtualElement,\n      options,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    /**\n     * The editor instance where the bubble menu plugin will be registered.\n     */\n    const pluginEditor = editor || currentEditor\n\n    // Creating a useMemo would be more computationally expensive than just\n    // re-creating this object on every render.\n    const bubbleMenuPluginProps: Omit<BubbleMenuPluginProps, 'editor' | 'element'> = {\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      pluginKey,\n      shouldShow,\n      getReferencedVirtualElement,\n      options,\n    }\n    /**\n     * The props for the bubble menu plugin. They are accessed inside a ref to\n     * avoid running the useEffect hook and re-registering the plugin when the\n     * props change.\n     */\n    const bubbleMenuPluginPropsRef = useRef(bubbleMenuPluginProps)\n    bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps\n\n    /**\n     * Track whether the plugin has been initialized, so we only send updates\n     * after the initial registration.\n     */\n    const [pluginInitialized, setPluginInitialized] = useState(false)\n\n    /**\n     * Track whether we need to skip the first options update dispatch.\n     * This prevents unnecessary updates right after plugin initialization.\n     */\n    const skipFirstUpdateRef = useRef(true)\n\n    useEffect(() => {\n      if (pluginEditor?.isDestroyed) {\n        return\n      }\n\n      if (!pluginEditor) {\n        console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')\n        return\n      }\n\n      const bubbleMenuElement = menuEl.current\n      bubbleMenuElement.style.visibility = 'hidden'\n      bubbleMenuElement.style.position = 'absolute'\n\n      const plugin = BubbleMenuPlugin({\n        ...bubbleMenuPluginPropsRef.current,\n        editor: pluginEditor,\n        element: bubbleMenuElement,\n      })\n\n      pluginEditor.registerPlugin(plugin)\n\n      const createdPluginKey = bubbleMenuPluginPropsRef.current.pluginKey\n\n      skipFirstUpdateRef.current = true\n      setPluginInitialized(true)\n\n      return () => {\n        setPluginInitialized(false)\n        pluginEditor.unregisterPlugin(createdPluginKey)\n        window.requestAnimationFrame(() => {\n          if (bubbleMenuElement.parentNode) {\n            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement)\n          }\n        })\n      }\n    }, [pluginEditor])\n\n    /**\n     * Update the plugin options when props change after the plugin has been initialized.\n     * This allows dynamic updates to options like scrollTarget without re-registering the entire plugin.\n     */\n    useEffect(() => {\n      if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {\n        return\n      }\n\n      // Skip the first update right after initialization since the plugin was just created with these options\n      if (skipFirstUpdateRef.current) {\n        skipFirstUpdateRef.current = false\n        return\n      }\n\n      pluginEditor.view.dispatch(\n        pluginEditor.state.tr.setMeta('bubbleMenu', {\n          type: 'updateOptions',\n          options: bubbleMenuPluginPropsRef.current,\n        }),\n      )\n    }, [\n      pluginInitialized,\n      pluginEditor,\n      updateDelay,\n      resizeDelay,\n      shouldShow,\n      options,\n      appendTo,\n      getReferencedVirtualElement,\n    ])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n","import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'\nimport { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'\nimport { useCurrentEditor } from '@tiptap/react'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {\n  editor: FloatingMenuPluginProps['editor'] | null\n  options?: FloatingMenuPluginProps['options']\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(\n  (\n    {\n      pluginKey = 'floatingMenu',\n      editor,\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      shouldShow = null,\n      options,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const menuEl = useRef(document.createElement('div'))\n\n    if (typeof ref === 'function') {\n      ref(menuEl.current)\n    } else if (ref) {\n      ref.current = menuEl.current\n    }\n\n    const { editor: currentEditor } = useCurrentEditor()\n\n    /**\n     * The editor instance where the floating menu plugin will be registered.\n     */\n    const pluginEditor = editor || currentEditor\n\n    // Creating a useMemo would be more computationally expensive than just\n    // re-creating this object on every render.\n    const floatingMenuPluginProps: Omit<FloatingMenuPluginProps, 'editor' | 'element'> = {\n      updateDelay,\n      resizeDelay,\n      appendTo,\n      pluginKey,\n      shouldShow,\n      options,\n    }\n\n    /**\n     * The props for the floating menu plugin. They are accessed inside a ref to\n     * avoid running the useEffect hook and re-registering the plugin when the\n     * props change.\n     */\n    const floatingMenuPluginPropsRef = useRef(floatingMenuPluginProps)\n    floatingMenuPluginPropsRef.current = floatingMenuPluginProps\n\n    /**\n     * Track whether the plugin has been initialized, so we only send updates\n     * after the initial registration.\n     */\n    const [pluginInitialized, setPluginInitialized] = useState(false)\n\n    /**\n     * Track whether we need to skip the first options update dispatch.\n     * This prevents unnecessary updates right after plugin initialization.\n     */\n    const skipFirstUpdateRef = useRef(true)\n\n    useEffect(() => {\n      if (pluginEditor?.isDestroyed) {\n        return\n      }\n\n      if (!pluginEditor) {\n        console.warn(\n          'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',\n        )\n        return\n      }\n\n      const floatingMenuElement = menuEl.current\n      floatingMenuElement.style.visibility = 'hidden'\n      floatingMenuElement.style.position = 'absolute'\n\n      const plugin = FloatingMenuPlugin({\n        ...floatingMenuPluginPropsRef.current,\n        editor: pluginEditor,\n        element: floatingMenuElement,\n      })\n\n      pluginEditor.registerPlugin(plugin)\n\n      const createdPluginKey = floatingMenuPluginPropsRef.current.pluginKey\n\n      skipFirstUpdateRef.current = true\n      setPluginInitialized(true)\n\n      return () => {\n        setPluginInitialized(false)\n        pluginEditor.unregisterPlugin(createdPluginKey)\n        window.requestAnimationFrame(() => {\n          if (floatingMenuElement.parentNode) {\n            floatingMenuElement.parentNode.removeChild(floatingMenuElement)\n          }\n        })\n      }\n    }, [pluginEditor])\n\n    /**\n     * Update the plugin options when props change after the plugin has been initialized.\n     * This allows dynamic updates to options like scrollTarget without re-registering the entire plugin.\n     */\n    useEffect(() => {\n      if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {\n        return\n      }\n\n      // Skip the first update right after initialization since the plugin was just created with these options\n      if (skipFirstUpdateRef.current) {\n        skipFirstUpdateRef.current = false\n        return\n      }\n\n      pluginEditor.view.dispatch(\n        pluginEditor.state.tr.setMeta('floatingMenu', {\n          type: 'updateOptions',\n          options: floatingMenuPluginPropsRef.current,\n        }),\n      )\n    }, [pluginInitialized, pluginEditor, updateDelay, resizeDelay, shouldShow, options, appendTo])\n\n    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)\n  },\n)\n"],"mappings":"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","names":["useCurrentEditor","React","useEffect","useRef","useState","createPortal","jsx"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -48,20 +48,20 @@
     "@types/react-dom": "^19.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@tiptap/core": "^3.17.0",
-    "@tiptap/pm": "^3.17.0"
+    "@tiptap/core": "^3.18.0",
+    "@tiptap/pm": "^3.18.0"
   },
   "optionalDependencies": {
-    "@tiptap/extension-bubble-menu": "^3.17.0",
-    "@tiptap/extension-floating-menu": "^3.17.0"
+    "@tiptap/extension-bubble-menu": "^3.18.0",
+    "@tiptap/extension-floating-menu": "^3.18.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@tiptap/core": "^3.17.0",
-    "@tiptap/pm": "^3.17.0"
+    "@tiptap/core": "^3.18.0",
+    "@tiptap/pm": "^3.18.0"
   },
   "repository": {
     "type": "git",

package/src/ReactNodeViewRenderer.tsx

@@ -100,6 +100,31 @@ export class ReactNodeView<
     }
   }
 
+  private cachedExtensionWithSyncedStorage: NodeViewRendererProps['extension'] | null = null
+
+  /**
+   * 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(): NodeViewRendererProps['extension'] {
+    if (!this.cachedExtensionWithSyncedStorage) {
+      const editor = this.editor
+      const extension = this.extension
+
+      this.cachedExtensionWithSyncedStorage = new Proxy(extension, {
+        get(target, prop, receiver) {
+          if (prop === 'storage') {
+            return editor.storage[extension.name as keyof typeof editor.storage] ?? {}
+          }
+          return Reflect.get(target, prop, receiver)
+        },
+      })
+    }
+
+    return this.cachedExtensionWithSyncedStorage
+  }
+
   /**
    * Setup the React component.
    * Called on initialization.
@@ -112,7 +137,7 @@ export class ReactNodeView<
       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),
@@ -266,7 +291,8 @@ export class ReactNodeView<
         newDecorations: decorations,
         oldInnerDecorations,
         innerDecorations,
-        updateProps: () => rerenderComponent({ node, decorations, innerDecorations }),
+        updateProps: () =>
+          rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage }),
       })
     }
 
@@ -278,7 +304,7 @@ export class ReactNodeView<
     this.decorations = decorations
     this.innerDecorations = innerDecorations
 
-    rerenderComponent({ node, decorations, innerDecorations })
+    rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage })
 
     return true
   }

package/src/Tiptap.tsx

@@ -0,0 +1,355 @@
+import type { ReactNode } from 'react'
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+
+import { EditorContext } from './Context.js'
+import type { Editor, EditorContentProps, EditorStateSnapshot } from './index.js'
+import { EditorContent, useEditorState } from './index.js'
+import { type BubbleMenuProps, BubbleMenu } from './menus/BubbleMenu.js'
+import { type FloatingMenuProps, FloatingMenu } from './menus/FloatingMenu.js'
+
+/**
+ * The shape of the React context used by the `<Tiptap />` components.
+ *
+ * This object exposes the editor instance and a simple readiness flag.
+ */
+export type TiptapContextType = {
+  /** The Tiptap editor instance. May be null during SSR or before initialization. */
+  editor: Editor | null
+
+  /** True when the editor has finished initializing and is ready for user interaction. */
+  isReady: boolean
+}
+
+/**
+ * React context that stores the current editor instance and readiness flag.
+ *
+ * Use `useTiptap()` to read from this context in child components.
+ */
+export const TiptapContext = createContext<TiptapContextType>({
+  editor: null,
+  isReady: false,
+})
+
+TiptapContext.displayName = 'TiptapContext'
+
+/**
+ * Hook to read the Tiptap context (`editor` + `isReady`).
+ *
+ * This is a small convenience wrapper around `useContext(TiptapContext)`.
+ *
+ * @returns The current `TiptapContextType` value from the provider.
+ *
+ * @example
+ * ```tsx
+ * import { useTiptap } from '@tiptap/react'
+ *
+ * function Status() {
+ *   const { isReady } = useTiptap()
+ *   return <div>{isReady ? 'Editor ready' : 'Loading editor...'}</div>
+ * }
+ * ```
+ */
+export const useTiptap = () => useContext(TiptapContext)
+
+/**
+ * Select a slice of the editor state using the context-provided editor.
+ *
+ * This is a thin wrapper around `useEditorState` that reads the `editor`
+ * instance from `useTiptap()` so callers don't have to pass it manually.
+ *
+ * Important: This hook should only be used when the editor is available.
+ * Use the `isReady` flag from `useTiptap()` to guard against null editor,
+ * or ensure your component only renders after the editor is initialized.
+ *
+ * @typeParam TSelectorResult - The type returned by the selector.
+ * @param selector - Function that receives the editor state snapshot and
+ *                   returns the piece of state you want to subscribe to.
+ * @param equalityFn - Optional function to compare previous/next selected
+ *                     values and avoid unnecessary updates.
+ * @returns The selected slice of the editor state.
+ *
+ * @example
+ * ```tsx
+ * function WordCount() {
+ *   const { isReady } = useTiptap()
+ *
+ *   // Only use useTiptapState when the editor is ready
+ *   const wordCount = useTiptapState(state => {
+ *     const text = state.editor.state.doc.textContent
+ *     return text.split(/\s+/).filter(Boolean).length
+ *   })
+ *
+ *   if (!isReady) return null
+ *
+ *   return <span>{wordCount} words</span>
+ * }
+ * ```
+ */
+export function useTiptapState<TSelectorResult>(
+  selector: (context: EditorStateSnapshot<Editor>) => TSelectorResult,
+  equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean,
+) {
+  const { editor } = useTiptap()
+  return useEditorState({
+    editor: editor as Editor,
+    selector,
+    equalityFn,
+  })
+}
+
+/**
+ * Props for the `Tiptap` root/provider component.
+ */
+export type TiptapWrapperProps = {
+  /**
+   * The editor instance to provide to child components.
+   * Can be null during SSR or before initialization.
+   */
+  instance: Editor | null
+  children: ReactNode
+}
+
+/**
+ * Top-level provider component that makes the editor instance available via
+ * React context and tracks when the editor becomes ready.
+ *
+ * The component listens to the editor's `create` event and flips the
+ * `isReady` flag once initialization completes.
+ *
+ * This component also provides backwards compatibility with the legacy
+ * `EditorContext`, so components using `useCurrentEditor()` will work
+ * inside a `<Tiptap>` provider.
+ *
+ * @param props - Component props.
+ * @returns A context provider element wrapping `children`.
+ *
+ * @example
+ * ```tsx
+ * import { Tiptap, useEditor } from '@tiptap/react'
+ *
+ * function App() {
+ *   const editor = useEditor({ extensions: [...] })
+ *
+ *   return (
+ *     <Tiptap instance={editor}>
+ *       <Toolbar />
+ *       <Tiptap.Content />
+ *     </Tiptap>
+ *   )
+ * }
+ * ```
+ */
+export function TiptapWrapper({ instance, children }: TiptapWrapperProps) {
+  const [isReady, setIsReady] = useState(instance?.isInitialized ?? false)
+
+  useEffect(() => {
+    if (!instance) {
+      setIsReady(false)
+      return
+    }
+
+    // If the editor is already initialized, set isReady to true
+    if (instance.isInitialized) {
+      setIsReady(true)
+      return
+    }
+
+    const handleCreate = () => {
+      setIsReady(true)
+    }
+
+    instance.on('create', handleCreate)
+
+    return () => {
+      instance.off('create', handleCreate)
+    }
+  }, [instance])
+
+  // Memoize context values to prevent unnecessary re-renders
+  const tiptapContextValue = useMemo<TiptapContextType>(() => ({ editor: instance, isReady }), [instance, isReady])
+
+  // Provide backwards compatibility with the legacy EditorContext
+  // so components using useCurrentEditor() work inside <Tiptap>
+  const legacyContextValue = useMemo(() => ({ editor: instance }), [instance])
+
+  return (
+    <EditorContext.Provider value={legacyContextValue}>
+      <TiptapContext.Provider value={tiptapContextValue}>{children}</TiptapContext.Provider>
+    </EditorContext.Provider>
+  )
+}
+
+TiptapWrapper.displayName = 'Tiptap'
+
+/**
+ * Convenience component that renders `EditorContent` using the context-provided
+ * editor instance. Use this instead of manually passing the `editor` prop.
+ *
+ * @param props - All `EditorContent` props except `editor` and `ref`.
+ * @returns An `EditorContent` element bound to the context editor.
+ *
+ * @example
+ * ```tsx
+ * // inside a Tiptap provider
+ * <Tiptap.Content className="editor" />
+ * ```
+ */
+export function TiptapContent({ ...rest }: Omit<EditorContentProps, 'editor' | 'ref'>) {
+  const { editor } = useTiptap()
+
+  return <EditorContent editor={editor} {...rest} />
+}
+
+TiptapContent.displayName = 'Tiptap.Content'
+
+export type TiptapLoadingProps = {
+  children: ReactNode
+}
+
+/**
+ * Component that renders its children only when the editor is not ready.
+ *
+ * This is useful for displaying loading states or placeholders during
+ * editor initialization, especially with SSR.
+ *
+ * @param props - The props for the TiptapLoading component.
+ * @returns The children when editor is not ready, or null when ready.
+ *
+ * @example
+ * ```tsx
+ * <Tiptap instance={editor}>
+ *   <Tiptap.Loading>
+ *     <div className="skeleton">Loading editor...</div>
+ *   </Tiptap.Loading>
+ *   <Tiptap.Content />
+ * </Tiptap>
+ * ```
+ */
+export function TiptapLoading({ children }: TiptapLoadingProps) {
+  const { isReady } = useTiptap()
+
+  if (isReady) {
+    return null
+  }
+
+  return children
+}
+
+TiptapLoading.displayName = 'Tiptap.Loading'
+
+/**
+ * A wrapper around the library `BubbleMenu` that injects the editor from
+ * context so callers don't need to pass the `editor` prop.
+ *
+ * Returns `null` when the editor is not available (for example during SSR).
+ *
+ * @param props - Props for the underlying `BubbleMenu` (except `editor`).
+ * @returns A `BubbleMenu` bound to the context editor, or `null`.
+ *
+ * @example
+ * ```tsx
+ * <Tiptap.BubbleMenu tippyOptions={{ duration: 100 }}>
+ *   <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
+ * </Tiptap.BubbleMenu>
+ * ```
+ */
+export function TiptapBubbleMenu({ children, ...rest }: { children: ReactNode } & Omit<BubbleMenuProps, 'editor'>) {
+  const { editor } = useTiptap()
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <BubbleMenu editor={editor} {...rest}>
+      {children}
+    </BubbleMenu>
+  )
+}
+
+TiptapBubbleMenu.displayName = 'Tiptap.BubbleMenu'
+
+/**
+ * A wrapper around the library `FloatingMenu` that injects the editor from
+ * context so callers don't need to pass the `editor` prop.
+ *
+ * Returns `null` when the editor is not available.
+ *
+ * @param props - Props for the underlying `FloatingMenu` (except `editor`).
+ * @returns A `FloatingMenu` bound to the context editor, or `null`.
+ *
+ * @example
+ * ```tsx
+ * <Tiptap.FloatingMenu placement="top">
+ *   <button onClick={() => editor.chain().focus().toggleItalic().run()}>Italic</button>
+ * </Tiptap.FloatingMenu>
+ * ```
+ */
+export function TiptapFloatingMenu({ children, ...rest }: { children: ReactNode } & Omit<FloatingMenuProps, 'editor'>) {
+  const { editor } = useTiptap()
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <FloatingMenu {...rest} editor={editor}>
+      {children}
+    </FloatingMenu>
+  )
+}
+
+TiptapFloatingMenu.displayName = 'Tiptap.FloatingMenu'
+
+/**
+ * Root `Tiptap` component. Use it as the provider for all child components.
+ *
+ * The exported object includes several helper subcomponents for common use
+ * cases: `Content`, `Loading`, `BubbleMenu`, and `FloatingMenu`.
+ *
+ * This component provides both the new `TiptapContext` (accessed via `useTiptap()`)
+ * and the legacy `EditorContext` (accessed via `useCurrentEditor()`) for
+ * backwards compatibility.
+ *
+ * @example
+ * ```tsx
+ * const editor = useEditor({ extensions: [...] })
+ *
+ * return (
+ *   <Tiptap instance={editor}>
+ *     <Tiptap.Loading>Initializing editor...</Tiptap.Loading>
+ *     <Tiptap.Content />
+ *     <Tiptap.BubbleMenu>
+ *       <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
+ *     </Tiptap.BubbleMenu>
+ *   </Tiptap>
+ * )
+ * ```
+ */
+export const 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,
+})
+
+export default Tiptap

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './NodeViewWrapper.js'
 export * from './ReactMarkViewRenderer.js'
 export * from './ReactNodeViewRenderer.js'
 export * from './ReactRenderer.js'
+export * from './Tiptap.js'
 export * from './types.js'
 export * from './useEditor.js'
 export * from './useEditorState.js'