@tiptap/vue-3 3.22.0 → 3.22.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/vue-3",
   "description": "Vue components for tiptap",
-  "version": "3.22.0",
+  "version": "3.22.2",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -40,18 +40,18 @@
   ],
   "devDependencies": {
     "vue": "^3.5.13",
-    "@tiptap/core": "^3.22.0",
-    "@tiptap/pm": "^3.22.0"
+    "@tiptap/pm": "^3.22.2",
+    "@tiptap/core": "^3.22.2"
   },
   "optionalDependencies": {
-    "@tiptap/extension-bubble-menu": "^3.22.0",
-    "@tiptap/extension-floating-menu": "^3.22.0"
+    "@tiptap/extension-bubble-menu": "^3.22.2",
+    "@tiptap/extension-floating-menu": "^3.22.2"
   },
   "peerDependencies": {
     "vue": "^3.0.0",
     "@floating-ui/dom": "^1.0.0",
-    "@tiptap/pm": "^3.22.0",
-    "@tiptap/core": "^3.22.0"
+    "@tiptap/core": "^3.22.2",
+    "@tiptap/pm": "^3.22.2"
   },
   "repository": {
     "type": "git",

package/src/VueNodeViewRenderer.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import type { DecorationWithType, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'
-import { NodeView } from '@tiptap/core'
+import { cancelPositionCheck, NodeView, schedulePositionCheck } from '@tiptap/core'
 import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
 import type { Component, PropType, Ref } from 'vue'
@@ -75,6 +75,18 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
 
   decorationClasses!: Ref<string>
 
+  /**
+   * 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
+
   private cachedExtensionWithSyncedStorage: NodeViewProps['extension'] | null = null
 
   /**
@@ -150,6 +162,27 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
 
     this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
     this.editor.on('selectionUpdate', this.handleSelectionUpdate)
+    this.currentPos = this.getPos()
+
+    this.positionCheckCallback = () => {
+      // Guard against the callback firing before the renderer is fully initialized.
+      if (!this.renderer) {
+        return
+      }
+
+      const newPos = this.getPos()
+
+      if (typeof newPos !== 'number' || newPos === this.currentPos) {
+        return
+      }
+
+      this.currentPos = newPos
+
+      // Pass a fresh getPos reference so Vue's reactivity detects a prop change.
+      this.renderer.updateProps({ getPos: () => this.getPos() })
+    }
+
+    schedulePositionCheck(this.editor, this.positionCheckCallback)
 
     this.renderer = new VueRenderer(extendedComponent, {
       editor: this.editor,
@@ -226,6 +259,7 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
       this.node = node
       this.decorations = decorations
       this.innerDecorations = innerDecorations
+      this.currentPos = this.getPos()
 
       return this.options.update({
         oldNode,
@@ -243,13 +277,31 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
       return false
     }
 
+    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 Vue's reactivity 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 })
 
@@ -294,6 +346,11 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
   destroy() {
     this.renderer.destroy()
     this.editor.off('selectionUpdate', this.handleSelectionUpdate)
+
+    if (this.positionCheckCallback) {
+      cancelPositionCheck(this.editor, this.positionCheckCallback)
+      this.positionCheckCallback = null
+    }
   }
 }