@tiptap/react 3.0.0 → 3.0.1

package/src/ReactRenderer.tsx

@@ -1,7 +1,16 @@
-import { Editor } from '@tiptap/core'
-import React from 'react'
-
-import { Editor as ExtendedEditor } from './Editor.js'
+import type { Editor } from '@tiptap/core'
+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'
 
 /**
  * Check if a component is a class component.
@@ -9,11 +18,7 @@ import { Editor as ExtendedEditor } from './Editor.js'
  * @returns {boolean}
  */
 function isClassComponent(Component: any) {
-  return !!(
-    typeof Component === 'function'
-    && Component.prototype
-    && Component.prototype.isReactComponent
-  )
+  return !!(typeof Component === 'function' && Component.prototype && Component.prototype.isReactComponent)
 }
 
 /**
@@ -23,31 +28,96 @@ function isClassComponent(Component: any) {
  */
 function isForwardRefComponent(Component: any) {
   return !!(
-    typeof Component === 'object'
-    && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'
+    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 {
   /**
    * The editor instance.
    * @type {Editor}
    */
-  editor: Editor,
+  editor: Editor
 
   /**
    * The props for the component.
    * @type {Record<string, any>}
    * @default {}
    */
-  props?: Record<string, any>,
+  props?: Record<string, any>
 
   /**
    * The tag name of the element.
    * @type {string}
    * @default 'div'
    */
-  as?: string,
+  as?: string
 
   /**
    * The class name of the element.
@@ -55,21 +125,13 @@ export interface ReactRendererOptions {
    * @default ''
    * @example 'foo bar'
    */
-  className?: string,
-
-  /**
-   * The attributes of the element.
-   * @type {Record<string, string>}
-   * @default {}
-   * @example { 'data-foo': 'bar' }
-   */
-  attrs?: Record<string, string>,
+  className?: string
 }
 
 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.
@@ -81,33 +143,33 @@ type ComponentType<R, P> =
  *   },
  *   as: 'span',
  * })
-*/
-export class ReactRenderer<R = unknown, P = unknown> {
+ */
+export class ReactRenderer<R = unknown, P extends Record<string, any> = object> {
   id: string
 
-  editor: ExtendedEditor
+  editor: Editor
 
   component: any
 
   element: Element
 
-  props: Record<string, any>
+  props: P
 
-  reactElement: React.ReactNode
+  reactElement: ReactNode
 
   ref: R | null = null
 
-  constructor(component: ComponentType<R, P>, {
-    editor,
-    props = {},
-    as = 'div',
-    className = '',
-    attrs,
-  }: ReactRendererOptions) {
-    this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
+  /**
+   * Immediately creates element and renders the provided React component.
+   */
+  constructor(
+    component: ComponentType<R, P>,
+    { editor, props = {}, as = 'div', className = '' }: ReactRendererOptions,
+  ) {
+    this.id = Math.floor(Math.random() * 0xffffffff).toString()
     this.component = component
-    this.editor = editor as ExtendedEditor
-    this.props = props
+    this.editor = editor as EditorWithContentComponent
+    this.props = props as P
     this.element = document.createElement(as)
     this.element.classList.add('react-renderer')
 
@@ -115,30 +177,55 @@ export class ReactRenderer<R = unknown, P = unknown> {
       this.element.classList.add(...className.split(' '))
     }
 
-    if (attrs) {
-      Object.keys(attrs).forEach(key => {
-        this.element.setAttribute(key, attrs[key])
+    // If the editor is already initialized, we will need to
+    // synchronously render the component to ensure it renders
+    // together with Prosemirror's rendering.
+    if (this.editor.isInitialized) {
+      flushSync(() => {
+        this.render()
+      })
+    } else {
+      queueMicrotask(() => {
+        this.render()
       })
     }
-
-    this.render()
   }
 
+  /**
+   * Render the React component.
+   */
   render(): void {
     const Component = this.component
     const props = this.props
+    const editor = this.editor as EditorWithContentComponent
+
+    // Handle ref forwarding with React 18/19 compatibility
+    const isReact19 = isReact19Plus()
+    const componentCanReceiveRef = canReceiveRef(Component)
 
-    if (isClassComponent(Component) || isForwardRefComponent(Component)) {
-      props.ref = (ref: R) => {
+    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} />
 
-    this.editor?.contentComponent?.setRenderer(this.id, this)
+    editor?.contentComponent?.setRenderer(this.id, this)
   }
 
+  /**
+   * Re-renders the React component with new props.
+   */
   updateProps(props: Record<string, any> = {}): void {
     this.props = {
       ...this.props,
@@ -148,7 +235,21 @@ export class ReactRenderer<R = unknown, P = unknown> {
     this.render()
   }
 
+  /**
+   * Destroy the React component.
+   */
   destroy(): void {
-    this.editor?.contentComponent?.removeRenderer(this.id)
+    const editor = this.editor as EditorWithContentComponent
+
+    editor?.contentComponent?.removeRenderer(this.id)
+  }
+
+  /**
+   * Update the attributes of the element that holds the React component.
+   */
+  updateAttributes(attributes: Record<string, string>): void {
+    Object.keys(attributes).forEach(key => {
+      this.element.setAttribute(key, attributes[key])
+    })
   }
 }

package/src/index.ts

@@ -1,12 +1,11 @@
-export * from './BubbleMenu.js'
 export * from './Context.js'
-export { Editor } from './Editor.js'
 export * from './EditorContent.js'
-export * from './FloatingMenu.js'
 export * from './NodeViewContent.js'
 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/menus/BubbleMenu.tsx

@@ -0,0 +1,68 @@
+import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
+import { useCurrentEditor } from '@tiptap/react'
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &
+  React.HTMLAttributes<HTMLDivElement>
+
+export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
+  (
+    { pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, options, children, ...restProps },
+    ref,
+  ) => {
+    const menuEl = useRef(document.createElement('div'))
+
+    if (typeof ref === 'function') {
+      ref(menuEl.current)
+    } else if (ref) {
+      ref.current = menuEl.current
+    }
+
+    const { editor: currentEditor } = useCurrentEditor()
+
+    useEffect(() => {
+      const bubbleMenuElement = menuEl.current
+
+      bubbleMenuElement.style.visibility = 'hidden'
+      bubbleMenuElement.style.position = 'absolute'
+
+      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
+        return
+      }
+
+      const attachToEditor = editor || currentEditor
+
+      if (!attachToEditor) {
+        console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')
+        return
+      }
+
+      const plugin = BubbleMenuPlugin({
+        updateDelay,
+        resizeDelay,
+        editor: attachToEditor,
+        element: bubbleMenuElement,
+        pluginKey,
+        shouldShow,
+        options,
+      })
+
+      attachToEditor.registerPlugin(plugin)
+
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey)
+        window.requestAnimationFrame(() => {
+          if (bubbleMenuElement.parentNode) {
+            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement)
+          }
+        })
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editor, currentEditor])
+
+    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
+  },
+)

package/src/menus/FloatingMenu.tsx

@@ -0,0 +1,68 @@
+import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'
+import { useCurrentEditor } from '@tiptap/react'
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
+  editor: FloatingMenuPluginProps['editor'] | null
+  options?: FloatingMenuPluginProps['options']
+} & React.HTMLAttributes<HTMLDivElement>
+
+export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(
+  ({ pluginKey = 'floatingMenu', editor, shouldShow = null, options, children, ...restProps }, ref) => {
+    const menuEl = useRef(document.createElement('div'))
+
+    if (typeof ref === 'function') {
+      ref(menuEl.current)
+    } else if (ref) {
+      ref.current = menuEl.current
+    }
+
+    const { editor: currentEditor } = useCurrentEditor()
+
+    useEffect(() => {
+      const floatingMenuElement = menuEl.current
+
+      floatingMenuElement.style.visibility = 'hidden'
+      floatingMenuElement.style.position = 'absolute'
+
+      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
+        return
+      }
+
+      const attachToEditor = editor || currentEditor
+
+      if (!attachToEditor) {
+        console.warn(
+          'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',
+        )
+        return
+      }
+
+      const plugin = FloatingMenuPlugin({
+        editor: attachToEditor,
+        element: floatingMenuElement,
+        pluginKey,
+        shouldShow,
+        options,
+      })
+
+      attachToEditor.registerPlugin(plugin)
+
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey)
+        window.requestAnimationFrame(() => {
+          if (floatingMenuElement.parentNode) {
+            floatingMenuElement.parentNode.removeChild(floatingMenuElement)
+          }
+        })
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editor, currentEditor])
+
+    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
+  },
+)

package/src/menus/index.ts

@@ -0,0 +1,2 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.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>
+}