fix(react): event handlers called once per event type #5463 (#5465)

This commit is contained in:
Nick Perez 2024-08-10 11:54:49 +02:00 committed by GitHub
parent 3efb23be9b
commit 8ea34e405e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 13 deletions

View File

@ -0,0 +1,5 @@
---
"@tiptap/react": patch
---
This resolves a bug with `useEditor` where event handlers were being called 2x for what should have been a single registration

View File

@ -136,18 +136,20 @@ class EditorInstanceManager {
* Create a new editor instance. And attach event listeners. * Create a new editor instance. And attach event listeners.
*/ */
private createEditor(): Editor { private createEditor(): Editor {
const editor = new Editor(this.options.current) const optionsToApply: Partial<EditorOptions> = {
...this.options.current,
// Always call the most recent version of the callback function by default // Always call the most recent version of the callback function by default
editor.on('beforeCreate', (...args) => this.options.current.onBeforeCreate?.(...args)) onBeforeCreate: (...args) => this.options.current.onBeforeCreate?.(...args),
editor.on('blur', (...args) => this.options.current.onBlur?.(...args)) onBlur: (...args) => this.options.current.onBlur?.(...args),
editor.on('create', (...args) => this.options.current.onCreate?.(...args)) onCreate: (...args) => this.options.current.onCreate?.(...args),
editor.on('destroy', (...args) => this.options.current.onDestroy?.(...args)) onDestroy: (...args) => this.options.current.onDestroy?.(...args),
editor.on('focus', (...args) => this.options.current.onFocus?.(...args)) onFocus: (...args) => this.options.current.onFocus?.(...args),
editor.on('selectionUpdate', (...args) => this.options.current.onSelectionUpdate?.(...args)) onSelectionUpdate: (...args) => this.options.current.onSelectionUpdate?.(...args),
editor.on('transaction', (...args) => this.options.current.onTransaction?.(...args)) onTransaction: (...args) => this.options.current.onTransaction?.(...args),
editor.on('update', (...args) => this.options.current.onUpdate?.(...args)) onUpdate: (...args) => this.options.current.onUpdate?.(...args),
editor.on('contentError', (...args) => this.options.current.onContentError?.(...args)) onContentError: (...args) => this.options.current.onContentError?.(...args),
}
const editor = new Editor(optionsToApply)
// no need to keep track of the event listeners, they will be removed when the editor is destroyed // no need to keep track of the event listeners, they will be removed when the editor is destroyed
@ -215,7 +217,6 @@ class EditorInstanceManager {
* Recreate the editor instance if the dependencies have changed. * Recreate the editor instance if the dependencies have changed.
*/ */
private refreshEditorInstance(deps: DependencyList) { private refreshEditorInstance(deps: DependencyList) {
if (this.editor && !this.editor.isDestroyed) { if (this.editor && !this.editor.isDestroyed) {
// Editor instance already exists // Editor instance already exists
if (this.previousDeps === null) { if (this.previousDeps === null) {