Remove tippy.js and replace with Floating UI #5398
Merged
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
🦋 Changeset detectedLatest commit: bd8956f The changes in this PR will be included in the next version bump. This PR includes changesets to release 54 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
bdbch
changed the title
This was referenced Jul 26, 2024
nperez0111
reviewed
Jul 27, 2024
nperez0111
reviewed
Jul 27, 2024
… in Vue suggestion.js
… in React suggestion.js
bdbch
force-pushed
the
feature/floating-ui
branch
from
138de0c to
bd8956f
Compare
bdbch
added a commit
that referenced
this pull request
Jul 31, 2024
* start experimenting with floating-ui * add options to floating-ui bubble menu plugin & fix smaller issues * add vue support for new floating-ui * start experimenting with floating-ui * adjust floating-menu plugin for floating-ui & update react component * add vue support for floating-menu with floating-ui * update tests for new floating-ui integration * added changeset file * move floating-ui dependency to peerDeps * add install notice to changelog * remove unnecessary code for destroying and removing component element in Vue suggestion.js * remove unnecessary code for destroying and removing component element in React suggestion.js * sync package-lock * widen range for peerDeps again
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.
Changes Overview
This PR completely removes tippy.js from all Tiptap packages and replaces the implementation with Floating UI.
Tippy was already outdated and often caused rendering issues for example with React or conditional rendering. The new implement Floating UI implementation now can be conditionally rendered, customized and adjusted.
Implementation Approach
Instead of letting Tippy handle the element creation and mounting, we now do this on our own and use Floating UI to compute the position of the floating element using virtual elements.
The positions are calculated from the cursor or selection position.
Instead of
tippyOptionswe now pass down anoptionobject which can be used to control the Floating UI middlewares likeshift,fliporoffset.Testing Done
I updated all tests that were previously using tippy and made sure all run successfully.
Verification Steps
Additional Notes
Breaking change incoming. 😬
Checklist
Related Issues