@tiptap/react 3.17.1 → 3.19.0

package/dist/index.d.cts

@@ -244,6 +244,13 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
      */
     selectionRafId: number | null;
     constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>);
+    private cachedExtensionWithSyncedStorage;
+    /**
+     * 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'];
     /**
      * Setup the React component.
      * Called on initialization.
@@ -294,6 +301,176 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
  */
 declare function ReactNodeViewRenderer<T = HTMLElement>(component: ComponentType$1<ReactNodeViewProps<T>>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
 
+/**
+ * The shape of the React context used by the `<Tiptap />` components.
+ *
+ * The editor instance is always available when using the default `useEditor`
+ * configuration. For SSR scenarios where `immediatelyRender: false` is used,
+ * consider using the legacy `EditorProvider` pattern instead.
+ */
+type TiptapContextType = {
+    /** The Tiptap editor instance. */
+    editor: Editor;
+};
+/**
+ * React context that stores the current editor instance.
+ *
+ * Use `useTiptap()` to read from this context in child components.
+ */
+declare const TiptapContext: React.Context<TiptapContextType>;
+/**
+ * Hook to read the Tiptap context and access the editor instance.
+ *
+ * This is a small convenience wrapper around `useContext(TiptapContext)`.
+ * The editor is always available when used within a `<Tiptap>` provider.
+ *
+ * @returns The current `TiptapContextType` value from the provider.
+ *
+ * @example
+ * ```tsx
+ * import { useTiptap } from '@tiptap/react'
+ *
+ * function Toolbar() {
+ *   const { editor } = useTiptap()
+ *
+ *   return (
+ *     <button onClick={() => editor.chain().focus().toggleBold().run()}>
+ *       Bold
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+declare const useTiptap: () => TiptapContextType;
+/**
+ * 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.
+ *
+ * @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 wordCount = useTiptapState(state => {
+ *     const text = state.editor.state.doc.textContent
+ *     return text.split(/\s+/).filter(Boolean).length
+ *   })
+ *
+ *   return <span>{wordCount} words</span>
+ * }
+ * ```
+ */
+declare function useTiptapState<TSelectorResult>(selector: (context: EditorStateSnapshot<Editor>) => TSelectorResult, equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean): TSelectorResult;
+/**
+ * Props for the `Tiptap` root/provider component.
+ */
+type TiptapWrapperProps = {
+    /**
+     * The editor instance to provide to child components.
+     * Use `useEditor()` to create this instance.
+     */
+    editor?: Editor;
+    /**
+     * @deprecated Use `editor` instead. Will be removed in the next major version.
+     */
+    instance?: Editor;
+    children: ReactNode;
+};
+/**
+ * Top-level provider component that makes the editor instance available via
+ * React context to all child components.
+ *
+ * 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 editor={editor}>
+ *       <Toolbar />
+ *       <Tiptap.Content />
+ *     </Tiptap>
+ *   )
+ * }
+ * ```
+ */
+declare function TiptapWrapper({ editor, instance, children }: TiptapWrapperProps): react_jsx_runtime.JSX.Element;
+declare namespace TiptapWrapper {
+    var displayName: string;
+}
+/**
+ * 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" />
+ * ```
+ */
+declare function TiptapContent({ ...rest }: Omit<EditorContentProps, 'editor' | 'ref'>): react_jsx_runtime.JSX.Element;
+declare namespace TiptapContent {
+    var displayName: string;
+}
+/**
+ * Root `Tiptap` component. Use it as the provider for all child components.
+ *
+ * The exported object includes the `Content` subcomponent for rendering the
+ * editor content area.
+ *
+ * This component provides both the new `TiptapContext` (accessed via `useTiptap()`)
+ * and the legacy `EditorContext` (accessed via `useCurrentEditor()`) for
+ * backwards compatibility.
+ *
+ * For bubble menus and floating menus, import them separately from
+ * `@tiptap/react/menus` to keep floating-ui as an optional dependency.
+ *
+ * @example
+ * ```tsx
+ * import { Tiptap, useEditor } from '@tiptap/react'
+ * import { BubbleMenu } from '@tiptap/react/menus'
+ *
+ * function App() {
+ *   const editor = useEditor({ extensions: [...] })
+ *
+ *   return (
+ *     <Tiptap editor={editor}>
+ *       <Tiptap.Content />
+ *       <BubbleMenu>
+ *         <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
+ *       </BubbleMenu>
+ *     </Tiptap>
+ *   )
+ * }
+ * ```
+ */
+declare const Tiptap: typeof TiptapWrapper & {
+    /**
+     * The Tiptap Content component that renders the EditorContent with the editor instance from the context.
+     * @see TiptapContent
+     */
+    Content: typeof TiptapContent;
+};
+
 type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
     editor: TEditor;
     transactionNumber: number;
@@ -354,4 +531,4 @@ declare const ReactNodeViewContentProvider: ({ children, content }: {
 }) => React.FunctionComponentElement<React.ProviderProps<ReactNodeViewContextProps>>;
 declare const useReactNodeView: () => ReactNodeViewContextProps;
 
-export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, Tiptap, TiptapContent, TiptapContext, type TiptapContextType, TiptapWrapper, type TiptapWrapperProps, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView, useTiptap, useTiptapState };

package/dist/index.d.ts

@@ -244,6 +244,13 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
      */
     selectionRafId: number | null;
     constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>);
+    private cachedExtensionWithSyncedStorage;
+    /**
+     * 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'];
     /**
      * Setup the React component.
      * Called on initialization.
@@ -294,6 +301,176 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
  */
 declare function ReactNodeViewRenderer<T = HTMLElement>(component: ComponentType$1<ReactNodeViewProps<T>>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
 
+/**
+ * The shape of the React context used by the `<Tiptap />` components.
+ *
+ * The editor instance is always available when using the default `useEditor`
+ * configuration. For SSR scenarios where `immediatelyRender: false` is used,
+ * consider using the legacy `EditorProvider` pattern instead.
+ */
+type TiptapContextType = {
+    /** The Tiptap editor instance. */
+    editor: Editor;
+};
+/**
+ * React context that stores the current editor instance.
+ *
+ * Use `useTiptap()` to read from this context in child components.
+ */
+declare const TiptapContext: React.Context<TiptapContextType>;
+/**
+ * Hook to read the Tiptap context and access the editor instance.
+ *
+ * This is a small convenience wrapper around `useContext(TiptapContext)`.
+ * The editor is always available when used within a `<Tiptap>` provider.
+ *
+ * @returns The current `TiptapContextType` value from the provider.
+ *
+ * @example
+ * ```tsx
+ * import { useTiptap } from '@tiptap/react'
+ *
+ * function Toolbar() {
+ *   const { editor } = useTiptap()
+ *
+ *   return (
+ *     <button onClick={() => editor.chain().focus().toggleBold().run()}>
+ *       Bold
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+declare const useTiptap: () => TiptapContextType;
+/**
+ * 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.
+ *
+ * @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 wordCount = useTiptapState(state => {
+ *     const text = state.editor.state.doc.textContent
+ *     return text.split(/\s+/).filter(Boolean).length
+ *   })
+ *
+ *   return <span>{wordCount} words</span>
+ * }
+ * ```
+ */
+declare function useTiptapState<TSelectorResult>(selector: (context: EditorStateSnapshot<Editor>) => TSelectorResult, equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean): TSelectorResult;
+/**
+ * Props for the `Tiptap` root/provider component.
+ */
+type TiptapWrapperProps = {
+    /**
+     * The editor instance to provide to child components.
+     * Use `useEditor()` to create this instance.
+     */
+    editor?: Editor;
+    /**
+     * @deprecated Use `editor` instead. Will be removed in the next major version.
+     */
+    instance?: Editor;
+    children: ReactNode;
+};
+/**
+ * Top-level provider component that makes the editor instance available via
+ * React context to all child components.
+ *
+ * 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 editor={editor}>
+ *       <Toolbar />
+ *       <Tiptap.Content />
+ *     </Tiptap>
+ *   )
+ * }
+ * ```
+ */
+declare function TiptapWrapper({ editor, instance, children }: TiptapWrapperProps): react_jsx_runtime.JSX.Element;
+declare namespace TiptapWrapper {
+    var displayName: string;
+}
+/**
+ * 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" />
+ * ```
+ */
+declare function TiptapContent({ ...rest }: Omit<EditorContentProps, 'editor' | 'ref'>): react_jsx_runtime.JSX.Element;
+declare namespace TiptapContent {
+    var displayName: string;
+}
+/**
+ * Root `Tiptap` component. Use it as the provider for all child components.
+ *
+ * The exported object includes the `Content` subcomponent for rendering the
+ * editor content area.
+ *
+ * This component provides both the new `TiptapContext` (accessed via `useTiptap()`)
+ * and the legacy `EditorContext` (accessed via `useCurrentEditor()`) for
+ * backwards compatibility.
+ *
+ * For bubble menus and floating menus, import them separately from
+ * `@tiptap/react/menus` to keep floating-ui as an optional dependency.
+ *
+ * @example
+ * ```tsx
+ * import { Tiptap, useEditor } from '@tiptap/react'
+ * import { BubbleMenu } from '@tiptap/react/menus'
+ *
+ * function App() {
+ *   const editor = useEditor({ extensions: [...] })
+ *
+ *   return (
+ *     <Tiptap editor={editor}>
+ *       <Tiptap.Content />
+ *       <BubbleMenu>
+ *         <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
+ *       </BubbleMenu>
+ *     </Tiptap>
+ *   )
+ * }
+ * ```
+ */
+declare const Tiptap: typeof TiptapWrapper & {
+    /**
+     * The Tiptap Content component that renders the EditorContent with the editor instance from the context.
+     * @see TiptapContent
+     */
+    Content: typeof TiptapContent;
+};
+
 type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
     editor: TEditor;
     transactionNumber: number;
@@ -354,4 +531,4 @@ declare const ReactNodeViewContentProvider: ({ children, content }: {
 }) => React.FunctionComponentElement<React.ProviderProps<ReactNodeViewContextProps>>;
 declare const useReactNodeView: () => ReactNodeViewContextProps;
 
-export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, Tiptap, TiptapContent, TiptapContext, type TiptapContextType, TiptapWrapper, type TiptapWrapperProps, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView, useTiptap, useTiptapState };

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,47 @@ function ReactNodeViewRenderer(component, options) {
   };
 }
 
+// src/Tiptap.tsx
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo2 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TiptapContext = createContext3({
+  get editor() {
+    throw new Error("useTiptap must be used within a <Tiptap> provider");
+  }
+});
+TiptapContext.displayName = "TiptapContext";
+var useTiptap = () => useContext3(TiptapContext);
+function useTiptapState(selector, equalityFn) {
+  const { editor } = useTiptap();
+  return useEditorState({
+    editor,
+    selector,
+    equalityFn
+  });
+}
+function TiptapWrapper({ editor, instance, children }) {
+  const resolvedEditor = editor != null ? editor : instance;
+  if (!resolvedEditor) {
+    throw new Error("Tiptap: An editor instance is required. Pass a non-null `editor` prop.");
+  }
+  const tiptapContextValue = useMemo2(() => ({ editor: resolvedEditor }), [resolvedEditor]);
+  const legacyContextValue = useMemo2(() => ({ editor: resolvedEditor }), [resolvedEditor]);
+  return /* @__PURE__ */ jsx8(EditorContext.Provider, { value: legacyContextValue, children: /* @__PURE__ */ jsx8(TiptapContext.Provider, { value: tiptapContextValue, children }) });
+}
+TiptapWrapper.displayName = "Tiptap";
+function TiptapContent({ ...rest }) {
+  const { editor } = useTiptap();
+  return /* @__PURE__ */ jsx8(EditorContent, { editor, ...rest });
+}
+TiptapContent.displayName = "Tiptap.Content";
+var Tiptap = Object.assign(TiptapWrapper, {
+  /**
+   * The Tiptap Content component that renders the EditorContent with the editor instance from the context.
+   * @see TiptapContent
+   */
+  Content: TiptapContent
+});
+
 // src/index.ts
 export * from "@tiptap/core";
 export {
@@ -1054,9 +1117,15 @@ export {
   ReactNodeViewContext,
   ReactNodeViewRenderer,
   ReactRenderer,
+  Tiptap,
+  TiptapContent,
+  TiptapContext,
+  TiptapWrapper,
   useCurrentEditor,
   useEditor,
   useEditorState,
-  useReactNodeView
+  useReactNodeView,
+  useTiptap,
+  useTiptapState
 };
 //# sourceMappingURL=index.js.map