udecode
Floating toolbar button will move with scroll
Description
If the editor has a fixed height, the floating toolbar will be strange.
https://github.com/udecode/plate/assets/164472012/bc5b2c04-9bbd-472d-aa78-9717d15ebfa9
Steps to Reproduce
Sandbox
Expected Behavior
Environment
- slate:
- slate-react:
- browser: chrome
Bounty
Click here to add a bounty via Algora.
Funding
- You can sponsor this specific effort via a Polar.sh pledge below
- We receive the pledge once the issue is completed & verified
This issue is because of wrapping the floating toolbar in <PortalBody /> it moves the element which is passed to @floating-ui's setFloatingRef outside of the scroll hierarchy:
https://github.com/udecode/plate/blob/889b58ce09c93c78da9c104d5617887f4842698a/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx#L56
The simple fix for me was to not use <PortalBody />. If you do portal the item into the body then it will also lag behind when you scroll instead of scroll smoothly with your content. This is because onScroll does not trigger at the same rate the page actually scrolls and the updates are slow. Removing <PortalBody /> also fixes this because the element is scrolled with its container smoothly by the browser before @floating-ui's updates its position.
