@tiptap/react 2.14.0 → 2.22.0

package/src/ReactRenderer.tsx

@@ -33,10 +33,56 @@ function isClassComponent(Component: any) {
 function isForwardRefComponent(Component: any) {
   return !!(
     typeof Component === 'object'
-    && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'
+    && 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}
@@ -160,27 +206,21 @@ export class ReactRenderer<R = unknown, P extends Record<string, any> = object>
 
     // Handle ref forwarding with React 18/19 compatibility
     const isReact19 = isReact19Plus()
-    const isClassComp = isClassComponent(Component)
-    const isForwardRefComp = isForwardRefComponent(Component)
+    const componentCanReceiveRef = canReceiveRef(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
-        }
+    // 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
       }
-      // 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 {...elementProps} />