@tiptap/react 2.12.0 → 2.14.0

package/src/ReactNodeViewRenderer.tsx

@@ -1,19 +1,17 @@
-import {
-  DecorationWithType,
-  Editor,
-  getRenderedAttributes,
-  NodeView,
-  NodeViewProps,
-  NodeViewRenderer,
-  NodeViewRendererOptions,
+import type {
+  DecorationWithType, Editor, NodeViewRenderer, NodeViewRendererOptions,
 } from '@tiptap/core'
-import { Node, Node as ProseMirrorNode } from '@tiptap/pm/model'
-import { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
-import React, { ComponentType } from 'react'
+import { getRenderedAttributes, NodeView } from '@tiptap/core'
+import type { Node, Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import type { ComponentType, NamedExoticComponent } from 'react'
+import React, { createElement, createRef, memo } from 'react'
 
 import { EditorWithContentComponent } from './Editor.js'
 import { ReactRenderer } from './ReactRenderer.js'
-import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView.js'
+import type { ReactNodeViewProps } from './types.js'
+import type { ReactNodeViewContextProps } from './useReactNodeView.js'
+import { ReactNodeViewContext } from './useReactNodeView.js'
 
 export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
   /**
@@ -53,14 +51,15 @@ export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
 }
 
 export class ReactNodeView<
-  Component extends ComponentType<NodeViewProps> = ComponentType<NodeViewProps>,
+  T = HTMLElement,
+  Component extends ComponentType<ReactNodeViewProps<T>> = ComponentType<ReactNodeViewProps<T>>,
   NodeEditor extends Editor = Editor,
   Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions,
 > extends NodeView<Component, NodeEditor, Options> {
   /**
    * The renderer instance.
    */
-  renderer!: ReactRenderer<unknown, NodeViewProps>
+  renderer!: ReactRenderer<unknown, ReactNodeViewProps<T>>
 
   /**
    * The element that holds the rich-text content of the node.
@@ -84,7 +83,8 @@ export class ReactNodeView<
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
       deleteNode: () => this.deleteNode(),
-    } satisfies NodeViewProps
+      ref: createRef<T>(),
+    } satisfies ReactNodeViewProps<T>
 
     if (!(this.component as any).displayName) {
       const capitalizeFirstChar = (string: string): string => {
@@ -104,15 +104,13 @@ export class ReactNodeView<
     const Component = this.component
     // For performance reasons, we memoize the provider component
     // And all of the things it requires are declared outside of the component, so it doesn't need to re-render
-    const ReactNodeViewProvider: React.FunctionComponent<NodeViewProps> = React.memo(
-      componentProps => {
-        return (
-          <ReactNodeViewContext.Provider value={context}>
-            {React.createElement(Component, componentProps)}
-          </ReactNodeViewContext.Provider>
-        )
-      },
-    )
+    const ReactNodeViewProvider: NamedExoticComponent<ReactNodeViewProps<T>> = memo(componentProps => {
+      return (
+        <ReactNodeViewContext.Provider value={context}>
+          {createElement(Component, componentProps)}
+        </ReactNodeViewContext.Provider>
+      )
+    })
 
     ReactNodeViewProvider.displayName = 'ReactNodeView'
 
@@ -320,8 +318,8 @@ export class ReactNodeView<
 /**
  * Create a React node view renderer.
  */
-export function ReactNodeViewRenderer(
-  component: ComponentType<NodeViewProps>,
+export function ReactNodeViewRenderer<T = HTMLElement>(
+  component: ComponentType<ReactNodeViewProps<T>>,
   options?: Partial<ReactNodeViewRendererOptions>,
 ): NodeViewRenderer {
   return props => {
@@ -332,6 +330,6 @@ export function ReactNodeViewRenderer(
       return {} as unknown as ProseMirrorNodeView
     }
 
-    return new ReactNodeView(component, props, options)
+    return new ReactNodeView<T>(component, props, options)
   }
 }

package/src/ReactRenderer.tsx

@@ -1,5 +1,13 @@
-import { Editor } from '@tiptap/core'
-import React from 'react'
+import type { Editor } from '@tiptap/core'
+import type {
+  ComponentClass,
+  ForwardRefExoticComponent,
+  FunctionComponent,
+  PropsWithoutRef,
+  ReactNode,
+  RefAttributes,
+} from 'react'
+import React, { version as reactVersion } from 'react'
 import { flushSync } from 'react-dom'
 
 import { EditorWithContentComponent } from './Editor.js'
@@ -29,6 +37,27 @@ function isForwardRefComponent(Component: any) {
   )
 }
 
+/**
+ * Check if we're running React 19+ by detecting if function components support ref props
+ * @returns {boolean}
+ */
+function isReact19Plus(): boolean {
+  // React 19 is detected by checking React version if available
+  // In practice, we'll use a more conservative approach and assume React 18 behavior
+  // unless we can definitively detect React 19
+  try {
+    // @ts-ignore
+    if (reactVersion) {
+      const majorVersion = parseInt(reactVersion.split('.')[0], 10)
+
+      return majorVersion >= 19
+    }
+  } catch {
+    // Fallback to React 18 behavior if we can't determine version
+  }
+  return false
+}
+
 export interface ReactRendererOptions {
   /**
    * The editor instance.
@@ -60,9 +89,9 @@ export interface ReactRendererOptions {
 }
 
 type ComponentType<R, P> =
-  React.ComponentClass<P> |
-  React.FunctionComponent<P> |
-  React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+  | ComponentClass<P>
+  | FunctionComponent<P>
+  | ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<R>>
 
 /**
  * The ReactRenderer class. It's responsible for rendering React components inside the editor.
@@ -86,7 +115,7 @@ export class ReactRenderer<R = unknown, P extends Record<string, any> = object>
 
   props: P
 
-  reactElement: React.ReactNode
+  reactElement: ReactNode
 
   ref: R | null = null
 
@@ -129,14 +158,32 @@ export class ReactRenderer<R = unknown, P extends Record<string, any> = object>
     const props = this.props
     const editor = this.editor as EditorWithContentComponent
 
-    if (isClassComponent(Component) || isForwardRefComponent(Component)) {
-      // @ts-ignore This is a hack to make the ref work
-      props.ref = (ref: R) => {
-        this.ref = ref
+    // Handle ref forwarding with React 18/19 compatibility
+    const isReact19 = isReact19Plus()
+    const isClassComp = isClassComponent(Component)
+    const isForwardRefComp = isForwardRefComponent(Component)
+
+    const elementProps = { ...props }
+
+    if (!elementProps.ref) {
+      if (isReact19) {
+        // React 19: ref is a standard prop for all components
+        // @ts-ignore - Setting ref prop for React 19 compatibility
+        elementProps.ref = (ref: R) => {
+          this.ref = ref
+        }
+      } else if (isClassComp || isForwardRefComp) {
+        // React 18 and prior: only set ref for class components and forwardRef components
+        // @ts-ignore - Setting ref prop for React 18 class/forwardRef components
+        elementProps.ref = (ref: R) => {
+          this.ref = ref
+        }
       }
+      // For function components in React 18, we can't use ref - the component won't receive it
+      // This is a limitation we have to accept for React 18 function components without forwardRef
     }
 
-    this.reactElement = <Component {...props} />
+    this.reactElement = <Component {...elementProps} />
 
     editor?.contentComponent?.setRenderer(this.id, this)
   }

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './NodeViewContent.js'
 export * from './NodeViewWrapper.js'
 export * from './ReactNodeViewRenderer.js'
 export * from './ReactRenderer.js'
+export * from './types.js'
 export * from './useEditor.js'
 export * from './useEditorState.js'
 export * from './useReactNodeView.js'

package/src/types.ts

@@ -0,0 +1,6 @@
+import type { NodeViewProps as CoreNodeViewProps } from '@tiptap/core'
+import type React from 'react'
+
+export type ReactNodeViewProps<T = HTMLElement> = CoreNodeViewProps & {
+  ref: React.RefObject<T | null>
+}