@tiptap/vue-2 3.22.0 → 3.22.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/vue-2",
   "description": "Vue components for tiptap",
-  "version": "3.22.0",
+  "version": "3.22.2",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -43,17 +43,17 @@
   },
   "devDependencies": {
     "vue": "^2.7.16",
-    "@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-bubble-menu": "^3.22.2",
+    "@tiptap/extension-floating-menu": "^3.22.2"
   },
   "peerDependencies": {
     "vue": "^2.6.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/VueNodeViewRenderer.ts

@@ -1,5 +1,5 @@
 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 { VueConstructor } from 'vue'
@@ -37,6 +37,18 @@ export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
 class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRendererOptions> {
   renderer!: VueRenderer
 
+  /**
+   * 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
+
   decorationClasses!: {
     value: string
   }
@@ -77,6 +89,27 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
 
     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(Component, {
       parent: this.editor.contentComponent,
@@ -153,6 +186,7 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
       this.node = node
       this.decorations = decorations
       this.innerDecorations = innerDecorations
+      this.currentPos = this.getPos()
 
       return this.options.update({
         oldNode,
@@ -169,13 +203,25 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
       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, getPos: () => this.getPos() })
       return true
     }
 
     this.node = node
     this.decorations = decorations
     this.innerDecorations = innerDecorations
+    this.currentPos = newPos
 
     rerenderComponent({ node, decorations, innerDecorations })
 
@@ -216,6 +262,11 @@ class VueNodeView extends NodeView<Vue | VueConstructor, Editor, VueNodeViewRend
   destroy() {
     this.renderer.destroy()
     this.editor.off('selectionUpdate', this.handleSelectionUpdate)
+
+    if (this.positionCheckCallback) {
+      cancelPositionCheck(this.editor, this.positionCheckCallback)
+      this.positionCheckCallback = null
+    }
   }
 }