@tiptap/react 3.22.0 → 3.22.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "3.22.0",
+  "version": "3.22.2",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -48,20 +48,20 @@
     "@types/react-dom": "^19.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@tiptap/core": "^3.22.0",
-    "@tiptap/pm": "^3.22.0"
+    "@tiptap/core": "^3.22.2",
+    "@tiptap/pm": "^3.22.2"
   },
   "optionalDependencies": {
-    "@tiptap/extension-bubble-menu": "^3.22.0",
-    "@tiptap/extension-floating-menu": "^3.22.0"
+    "@tiptap/extension-floating-menu": "^3.22.2",
+    "@tiptap/extension-bubble-menu": "^3.22.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@tiptap/core": "^3.22.0",
-    "@tiptap/pm": "^3.22.0"
+    "@tiptap/core": "^3.22.2",
+    "@tiptap/pm": "^3.22.2"
   },
   "repository": {
     "type": "git",

package/src/Editor.ts

@@ -3,7 +3,10 @@ import type { ReactPortal } from 'react'
 
 import type { ReactRenderer } from './ReactRenderer.js'
 
-export type EditorWithContentComponent = Editor & { contentComponent?: ContentComponent | null }
+export type EditorWithContentComponent = Editor & {
+  contentComponent?: ContentComponent | null
+  isEditorContentInitialized?: boolean
+}
 export type ContentComponent = {
   setRenderer(id: string, renderer: ReactRenderer): void
   removeRenderer(id: string): void

package/src/EditorContent.tsx

@@ -89,18 +89,9 @@ export class PureEditorContent extends React.Component<
 > {
   editorContentRef: React.RefObject<any>
 
-  initialized: boolean
-
-  unsubscribeToContentComponent?: () => void
-
   constructor(props: EditorContentProps) {
     super(props)
     this.editorContentRef = React.createRef()
-    this.initialized = false
-
-    this.state = {
-      hasContentComponentInitialized: Boolean((props.editor as EditorWithContentComponent | null)?.contentComponent),
-    }
   }
 
   componentDidMount() {
@@ -129,29 +120,11 @@ export class PureEditorContent extends React.Component<
 
       editor.contentComponent = getInstance()
 
-      // Has the content component been initialized?
-      if (!this.state.hasContentComponentInitialized) {
-        // Subscribe to the content component
-        this.unsubscribeToContentComponent = editor.contentComponent.subscribe(() => {
-          this.setState(prevState => {
-            if (!prevState.hasContentComponentInitialized) {
-              return {
-                hasContentComponentInitialized: true,
-              }
-            }
-            return prevState
-          })
-
-          // Unsubscribe to previous content component
-          if (this.unsubscribeToContentComponent) {
-            this.unsubscribeToContentComponent()
-          }
-        })
-      }
-
       editor.createNodeViews()
 
-      this.initialized = true
+      editor.isEditorContentInitialized = true
+
+      this.forceUpdate()
     }
   }
 
@@ -162,7 +135,7 @@ export class PureEditorContent extends React.Component<
       return
     }
 
-    this.initialized = false
+    editor.isEditorContentInitialized = false
 
     if (!editor.isDestroyed) {
       editor.view.setProps({
@@ -170,10 +143,6 @@ export class PureEditorContent extends React.Component<
       })
     }
 
-    if (this.unsubscribeToContentComponent) {
-      this.unsubscribeToContentComponent()
-    }
-
     editor.contentComponent = null
 
     // try to reset the editor element

package/src/ReactNodeViewRenderer.tsx

@@ -5,7 +5,7 @@ import type {
   NodeViewRendererOptions,
   NodeViewRendererProps,
 } from '@tiptap/core'
-import { getRenderedAttributes, NodeView } from '@tiptap/core'
+import { cancelPositionCheck, getRenderedAttributes, NodeView, schedulePositionCheck } 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'
@@ -72,6 +72,18 @@ export class ReactNodeView<
    */
   selectionRafId: number | null = null
 
+  /**
+   * The last known position of this node view, used to detect position-only
+   * changes that don't produce a new node object reference.
+   */
+  private currentPos: number | undefined
+
+  /**
+   * Callback registered with the per-editor position-update registry.
+   * Stored so it can be unregistered in destroy().
+   */
+  private positionCheckCallback: (() => void) | null = null
+
   constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>) {
     super(component, props, options)
 
@@ -196,6 +208,26 @@ export class ReactNodeView<
 
     this.editor.on('selectionUpdate', this.handleSelectionUpdate)
     this.updateElementAttributes()
+    this.currentPos = this.getPos()
+
+    this.positionCheckCallback = () => {
+      const newPos = this.getPos()
+
+      if (typeof newPos !== 'number' || newPos === this.currentPos) {
+        return
+      }
+
+      this.currentPos = newPos
+
+      // Pass a fresh getPos reference so React's memo detects a prop change.
+      this.renderer.updateProps({ getPos: () => this.getPos() })
+
+      if (typeof this.options.attrs === 'function') {
+        this.updateElementAttributes()
+      }
+    }
+
+    schedulePositionCheck(this.editor, this.positionCheckCallback)
   }
 
   /**
@@ -238,7 +270,8 @@ export class ReactNodeView<
     this.selectionRafId = requestAnimationFrame(() => {
       this.selectionRafId = null
       const { from, to } = this.editor.state.selection
-      const pos = this.getPos()
+      // Avoid resolving getPos() after ProseMirror has detached this node view.
+      const pos = this.currentPos
       if (typeof pos !== 'number') {
         return
       }
@@ -283,6 +316,7 @@ export class ReactNodeView<
       this.node = node
       this.decorations = decorations
       this.innerDecorations = innerDecorations
+      this.currentPos = this.getPos()
 
       return this.options.update({
         oldNode,
@@ -296,13 +330,31 @@ export class ReactNodeView<
       })
     }
 
+    const newPos = this.getPos()
+
     if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
+      if (newPos === this.currentPos) {
+        return true
+      }
+
+      // Position changed without a content/decoration change — trigger re-render
+      // so the component receives an up-to-date value from getPos().
+      // Pass a fresh getPos reference so React's memo detects a prop change.
+      this.currentPos = newPos
+      rerenderComponent({
+        node,
+        decorations,
+        innerDecorations,
+        extension: this.extensionWithSyncedStorage,
+        getPos: () => this.getPos(),
+      })
       return true
     }
 
     this.node = node
     this.decorations = decorations
     this.innerDecorations = innerDecorations
+    this.currentPos = newPos
 
     rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage })
 
@@ -337,6 +389,12 @@ export class ReactNodeView<
   destroy() {
     this.renderer.destroy()
     this.editor.off('selectionUpdate', this.handleSelectionUpdate)
+
+    if (this.positionCheckCallback) {
+      cancelPositionCheck(this.editor, this.positionCheckCallback)
+      this.positionCheckCallback = null
+    }
+
     this.contentDOMElement = null
 
     if (this.selectionRafId) {

package/src/ReactRenderer.tsx

@@ -147,7 +147,7 @@ type ComponentType<R, P> =
 export class ReactRenderer<R = unknown, P extends Record<string, any> = object> {
   id: string
 
-  editor: Editor
+  editor: EditorWithContentComponent
 
   component: any
 
@@ -173,7 +173,7 @@ export class ReactRenderer<R = unknown, P extends Record<string, any> = object>
   ) {
     this.id = Math.floor(Math.random() * 0xffffffff).toString()
     this.component = component
-    this.editor = editor as EditorWithContentComponent
+    this.editor = editor
     this.props = props as P
     this.element = document.createElement(as)
     this.element.classList.add('react-renderer')
@@ -182,10 +182,9 @@ export class ReactRenderer<R = unknown, P extends Record<string, any> = object>
       this.element.classList.add(...className.split(' '))
     }
 
-    // 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) {
+    if (this.editor.isEditorContentInitialized) {
+      // If EditorContent is mounted, flush synchronously to maintain cursor positioning consistency.
+      // Subsequent renders can be async without affecting cursor behavior.
       flushSync(() => {
         this.render()
       })