@tiptap/react 3.0.0-beta.1 → 3.0.0-beta.10

package/src/ReactNodeViewRenderer.tsx

@@ -1,12 +1,13 @@
-import type { DecorationWithType, Editor, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'
+import type { DecorationWithType, Editor, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'
 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 } from 'react'
-import React from 'react'
+import type { ComponentType, NamedExoticComponent } from 'react'
+import { createElement, createRef, memo } from 'react'
 
 import type { EditorWithContentComponent } from './Editor.js'
 import { ReactRenderer } from './ReactRenderer.js'
+import type { ReactNodeViewProps } from './types.js'
 import type { ReactNodeViewContextProps } from './useReactNodeView.js'
 import { ReactNodeViewContext } from './useReactNodeView.js'
 
@@ -45,14 +46,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.
@@ -76,7 +78,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 => {
@@ -96,10 +99,10 @@ 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 => {
+    const ReactNodeViewProvider: NamedExoticComponent<ReactNodeViewProps<T>> = memo(componentProps => {
       return (
         <ReactNodeViewContext.Provider value={context}>
-          {React.createElement(Component, componentProps)}
+          {createElement(Component, componentProps)}
         </ReactNodeViewContext.Provider>
       )
     })
@@ -302,8 +305,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 => {
@@ -314,6 +317,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 type { Editor } from '@tiptap/core'
-import React from 'react'
+import type {
+  ComponentClass,
+  ForwardRefExoticComponent,
+  FunctionComponent,
+  PropsWithoutRef,
+  ReactNode,
+  RefAttributes,
+} from 'react'
+import { version as reactVersion } from 'react'
 import { flushSync } from 'react-dom'
 
 import type { EditorWithContentComponent } from './Editor.js'
@@ -19,7 +27,75 @@ function isClassComponent(Component: any) {
  * @returns {boolean}
  */
 function isForwardRefComponent(Component: any) {
-  return !!(typeof Component === 'object' && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)')
+  return !!(
+    typeof Component === 'object' &&
+    Component.$$typeof &&
+    (Component.$$typeof.toString() === 'Symbol(react.forward_ref)' ||
+      Component.$$typeof.description === 'react.forward_ref')
+  )
+}
+
+/**
+ * Check if a component is a memoized component.
+ * @param Component
+ * @returns {boolean}
+ */
+function isMemoComponent(Component: any) {
+  return !!(
+    typeof Component === 'object' &&
+    Component.$$typeof &&
+    (Component.$$typeof.toString() === 'Symbol(react.memo)' || Component.$$typeof.description === 'react.memo')
+  )
+}
+
+/**
+ * Check if a component can safely receive a ref prop.
+ * This includes class components, forwardRef components, and memoized components
+ * that wrap forwardRef or class components.
+ * @param Component
+ * @returns {boolean}
+ */
+function canReceiveRef(Component: any) {
+  // Check if it's a class component
+  if (isClassComponent(Component)) {
+    return true
+  }
+
+  // Check if it's a forwardRef component
+  if (isForwardRefComponent(Component)) {
+    return true
+  }
+
+  // Check if it's a memoized component
+  if (isMemoComponent(Component)) {
+    // For memoized components, check the wrapped component
+    const wrappedComponent = Component.type
+    if (wrappedComponent) {
+      return isClassComponent(wrappedComponent) || isForwardRefComponent(wrappedComponent)
+    }
+  }
+
+  return false
+}
+
+/**
+ * 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 {
@@ -53,9 +129,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.
@@ -79,7 +155,7 @@ export class ReactRenderer<R = unknown, P extends Record<string, any> = object>
 
   props: P
 
-  reactElement: React.ReactNode
+  reactElement: ReactNode
 
   ref: R | null = null
 
@@ -120,14 +196,26 @@ 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) => {
+    // Handle ref forwarding with React 18/19 compatibility
+    const isReact19 = isReact19Plus()
+    const componentCanReceiveRef = canReceiveRef(Component)
+
+    const elementProps = { ...props }
+
+    // Always remove ref if the component cannot receive it (unless React 19+)
+    if (elementProps.ref && !(isReact19 || componentCanReceiveRef)) {
+      delete elementProps.ref
+    }
+
+    // Only assign our own ref if allowed
+    if (!elementProps.ref && (isReact19 || componentCanReceiveRef)) {
+      // @ts-ignore - Setting ref prop for compatible components
+      elementProps.ref = (ref: R) => {
         this.ref = ref
       }
     }
 
-    this.reactElement = <Component {...props} />
+    this.reactElement = <Component {...elementProps} />
 
     editor?.contentComponent?.setRenderer(this.id, this)
   }

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 './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>
+}

package/src/useEditorState.ts

@@ -1,5 +1,5 @@
 import type { Editor } from '@tiptap/core'
-import deepEqual from 'fast-deep-equal/es6/react'
+import deepEqual from 'fast-deep-equal/es6/react.js'
 import { useDebugValue, useEffect, useLayoutEffect, useState } from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'