Handling floating toolbars in shadow dom contexts

[aw1875]

Hi there! I'm not sure if I've missed this somewhere in the documentation, but is there a way or configuration for handling floating toolbars, such as the link or table, within a shadow DOM? Right now, the floating toolbar seems to be appearing in the top left corner of the page (which is way outside the shadow dom), and I haven't been able to find the right setup yet.

[dosubot[bot]]

Plate currently doesn't support rendering floating toolbars inside a shadow DOM. The floating toolbars are always portaled to document.body, which causes them to appear outside the shadow root and often in the wrong position. There isn't a config or prop to change this behavior right now.

A possible workaround is to modify the Plate source to allow passing a custom portal container (like your shadow root) instead of document.body. You could use the existing findDocumentOrShadowRoot utility to detect the shadow root and pass it to the portal logic, but this would require patching Plate internals. Plate uses the Floating UI library, which does support custom portal containers, but Plate doesn't expose this option yet. See the relevant code and docs for more details:

• findDocumentOrShadowRoot
• Floating toolbar implementation
• Portal usage example

If you need this feature, you may want to patch Plate locally or follow Floating UI's docs for custom portal containers until Plate exposes this as a config.

To reply, just mention @dosu.

---

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