mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-07 09:25:29 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Segev Finer 2024-07-02 22:58:46 +03:00 committed by GitHub
parent dfacb3b987
commit 509676ed4a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/tasty-moons-move.md Normal file
View File

@ -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

5
packages/core/src/Editor.ts
View File

@ -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,

1
packages/core/src/types.ts
View File

@ -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 }

4
packages/vue-3/src/Editor.ts
View File

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