fix(vue-3): fix editor.state updating too late during a transaction due to reactiveState fixes #4870 (#5252)

.changeset/tasty-moons-move.md

@@ -0,0 +1,6 @@
+---
+"@tiptap/core": patch
+"@tiptap/vue-3": patch
+---
+
+Vue 3 bubble menus are properly synchronized with state transitions with the new beforeTransaction hook which is fired before the transaction is applied to the view

packages/core/src/Editor.ts

@@ -406,6 +406,11 @@ export class Editor extends EventEmitter<EditorEvents> {
     const state = this.state.apply(transaction)
     const selectionHasChanged = !this.state.selection.eq(state.selection)
 
+    this.emit('beforeTransaction', {
+      editor: this,
+      transaction,
+      nextState: state,
+    })
     this.view.updateState(state)
     this.emit('transaction', {
       editor: this,

packages/core/src/types.ts

@@ -50,6 +50,7 @@ export interface EditorEvents {
   }
   update: { editor: Editor; transaction: Transaction }
   selectionUpdate: { editor: Editor; transaction: Transaction }
+  beforeTransaction: { editor: Editor; transaction: Transaction, nextState: EditorState }
   transaction: { editor: Editor; transaction: Transaction }
   focus: { editor: Editor; event: FocusEvent; transaction: Transaction }
   blur: { editor: Editor; event: FocusEvent; transaction: Transaction }

packages/vue-3/src/Editor.ts

@@ -50,8 +50,8 @@ export class Editor extends CoreEditor {
     this.reactiveState = useDebouncedRef(this.view.state)
     this.reactiveExtensionStorage = useDebouncedRef(this.extensionStorage)
 
-    this.on('transaction', () => {
+    this.on('beforeTransaction', ({ nextState }) => {
-      this.reactiveState.value = this.view.state
+      this.reactiveState.value = nextState
       this.reactiveExtensionStorage.value = this.extensionStorage
     })