Fix: Don’t initialize tippy on requestAnimationFrame to avoid race conditions #1820
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Instead of initializting tippy when the bubble menu and floating menu plugins are initialized, defer the initialization of tippy to the moment when the the editor should display the floating or bubble menu
enriquecastl
commented
Aug 31, 2021
| @@ -74,13 +76,10 @@ export class BubbleMenuView { | |||
| this.view.dom.addEventListener('dragstart', this.dragstartHandler) | |||
| this.editor.on('focus', this.focusHandler) | |||
| this.editor.on('blur', this.blurHandler) | |||
| this.tippyOptions = tippyOptions | |||
| // Detaches menu content from its current parent | |||
| this.element.remove() | |||
There was a problem hiding this comment.
note: I considered safe to detach the menu element because tippy also detaches the element on mount.
enriquecastl
changed the title
|
That looks great. Thank you! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR defers the initialization of the tippy library in the bubble and floating menu extensions to the moment when the
updatehook is first invoked by ProseMirror. The goal of this change is initializing the tippy library only when the Editor’s element is attached to the document. Theupdatehook provides a convenient place to check whether the aforementioned condition is met.Why is this change necessary
We are implementing a WYSIWYG Editor using Tiptap’s Vue 2 extension. We ran into a problem where the
requestAnimationFramecall is executed without delay right after the bubble menu plugin is initialized. This behavior causes a race condition where tippy is initialized before the Vue component is fully mounted.How to reproduce the bug?
I can’t explain why
requestAnimationFrameis invoked differently from the demos you provide in this repository. I couldn’t create an isolated sandbox where the problem can be reproduced either. However, you can reproduce the problem if you try to edit a Project Wiki in https://gitlab.com.This approach ensures that a race condition can’t exist because the menu is only initialized when the editor’s state changes which is a sign that Tiptap’s Editor is fully mounted.