Only last one of multiple editors works with Balloontoolbar

[zbeyens]

^{Originally posted by dtslvr December 15, 2021}
Hello

I have multiple editors with a unique id set that use Balloontoolbar. Unfortunately, only the toolbar of the last editor is working. I have updated plate from version 1 to 8 and now it's finally running again, but only with one rich text editor. Any idea how I can analyze this problem?

Dependencies:

"@udecode/plate": "8.3.1",
"@udecode/plate-core": "8.3.0",
"@udecode/plate-common": "7.0.2",
"slate": "0.72.0",
"slate-hyperscript": "0.67.0",
"slate-react": "0.72.0"

Thank you for any hint.
Thomas

[zbeyens]

@dtslvr moved here as it's a bug

[dtslvr]

Thank you for transforming my request to a bug report @zbeyens. Do you have a clue what is going wrong?

[moxxuk]

Is this related to the Balloon Toolbar not working in the examples, or is that a different issue?

[seb-saletes]

Hi @zbeyens,
Thanks for all the work as always 🙏
Do you have an ETA for this bug ? Or maybe you could give some instructions so I can try to fix it myself.
Sorry for pushing you but this bug is preventing us to use v9 in production.

[zbeyens]

The bug is probably in usePlateEditorState, the editor id is depending on the last focused editor

[zbeyens]

I've located the bug: usePlateEditorState(id) does not support dynamic id, React subscribes to the first id value then the component need to be unmount/mount again to work with dynamic id. It's tricky because we have different store + hooks for each id, and React does not play well with dynamic hooks. Workaround is to pass key={id} to the component using the hook.

[seb-saletes]

Thanks Zbeyens ! I was following the discussion with Hideman on slack, I guessed it had something to do with our problem here

[dtslvr]

Thanks a lot for your efforts in this issue!

I have upgraded @udecode/plate and @udecode/plate-core to version 9.2.1. Unfortunately still the same behavior. Unique ids are passed to <Plate>. Anything else I can check?

[zbeyens]

The balloon toolbar works in both editors in the example, do you have the same issue?

[dtslvr]

The balloon toolbar works in both editors in the example, do you have the same issue?

Yes, in your example (docs), it works as expected. But I'm facing the same issue as before.

To illustrate it, I have created a live demo and a repository with the source. Inline, only the last editor is working. If you switch to Default, it's working as expected with multiple editors. I hope this example code may help.