Floating Toolbar is not working properly

[OlivierCo]

Description

When I select text I can see the floating toolbar appearing in the DOM but the position is far from good.

here is an example of the inline style

outline: none;
left: -10255px;
position: absolute;
top: -10039.2px;

Reproduction URL

No response

Reproduction steps

1. Go to plate editor
2. Click on '....'
3. Scroll down to '....'
4. See error

Plate version

49.2.12

Slate React version

^0.117.4

Screenshots

Logs

Browsers

No response

[dosubot[bot]]

The floating toolbar position is calculated using the selection's bounding rectangle. If the selection can't be detected or converted to a DOM range, the toolbar falls back to a default off-screen position (like left: -9999px, top: -9999px) see code reference.

A common cause is using an incompatible React version—Plate is built for React 19, and older React versions can break toolbar positioning see similar issue. Other causes include: no valid selection, editor not focused, other floating plugins open, or the editor being in read-only mode.

Troubleshooting steps:

• Make sure your project uses React 19.
• Confirm the editor is focused and text is selected.
• Check that no other floating plugins are open.
• Ensure the editor is not in read-only mode (unless you want the toolbar to show in read-only).

If these checks don't help, you may want to review your editor setup and plugin configuration. The toolbar position updates reactively with selection changes, so any async or stale selection state can also cause issues see hook logic.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[dosubot[bot]]

This usually happens when Plate can't get a valid selection or map it to the DOM, so it falls back to a default position with large negative values to hide the toolbar offscreen. Common causes are: using an incompatible React version (Plate 49.2.12 expects React 19), the editor not being focused, or no text actually selected.

Make sure you’re on React 19, the editor is focused, and you have a real text selection. If you’re already on React 19 and still see this, check that no other floating plugins are interfering and that the editor isn’t in read-only mode. More details on this behavior are discussed here and the positioning logic is explained in the code here and here.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}