@tiptap/react 2.12.0 → 2.13.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
-import React, { forwardRef, useState, useDebugValue, useLayoutEffect, useEffect, useRef, createContext, useContext } from 'react';
+import React, { forwardRef, useState, useDebugValue, useLayoutEffect, useEffect, useRef, createContext, useContext, version, createRef, memo, createElement } from 'react';
 import ReactDOM, { flushSync } from 'react-dom';
 import { Editor, NodeView, getRenderedAttributes } from '@tiptap/core';
 export * from '@tiptap/core';
@@ -1212,6 +1212,26 @@ function isForwardRefComponent(Component) {
     return !!(typeof Component === 'object'
         && ((_a = Component.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === 'Symbol(react.forward_ref)');
 }
+/**
+ * Check if we're running React 19+ by detecting if function components support ref props
+ * @returns {boolean}
+ */
+function isReact19Plus() {
+    // 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 (version) {
+            const majorVersion = parseInt(version.split('.')[0], 10);
+            return majorVersion >= 19;
+        }
+    }
+    catch {
+        // Fallback to React 18 behavior if we can't determine version
+    }
+    return false;
+}
 /**
  * The ReactRenderer class. It's responsible for rendering React components inside the editor.
  * @example
@@ -1257,13 +1277,30 @@ class ReactRenderer {
         const Component = this.component;
         const props = this.props;
         const editor = this.editor;
-        if (isClassComponent(Component) || isForwardRefComponent(Component)) {
-            // @ts-ignore This is a hack to make the ref work
-            props.ref = (ref) => {
-                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) => {
+                    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) => {
+                    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 = React.createElement(Component, { ...props });
+        this.reactElement = React.createElement(Component, { ...elementProps });
         (_a = editor === null || editor === void 0 ? void 0 : editor.contentComponent) === null || _a === void 0 ? void 0 : _a.setRenderer(this.id, this);
     }
     /**
@@ -1312,6 +1349,7 @@ class ReactNodeView extends NodeView {
             getPos: () => this.getPos(),
             updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
             deleteNode: () => this.deleteNode(),
+            ref: createRef(),
         };
         if (!this.component.displayName) {
             const capitalizeFirstChar = (string) => {
@@ -1329,8 +1367,8 @@ class ReactNodeView extends NodeView {
         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.memo(componentProps => {
-            return (React.createElement(ReactNodeViewContext.Provider, { value: context }, React.createElement(Component, componentProps)));
+        const ReactNodeViewProvider = memo(componentProps => {
+            return (React.createElement(ReactNodeViewContext.Provider, { value: context }, createElement(Component, componentProps)));
         });
         ReactNodeViewProvider.displayName = 'ReactNodeView';
         if (this.node.isLeaf) {