Floating toolbar button will move with scroll

[felixfeng33]

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

[georeith]

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.

[zbeyens]

Fixed by removing PortalBody