Maintaining Text Selection with Focus Shift in Plate.js

[SID9-HoneyBee]

Hello,

I am currently working with Plate.js in my project and have encountered a challenge that I hope to get some guidance on. I have implemented functionality where users can adjust the font size of selected text via a UI control. However, when the control gains focus to adjust the font size, the text selection in the editor is lost. This behavior interrupts the user experience, as the visual indication of selection disappears.

Is there a way to maintain the text selection highlight in Plate.js when focus shifts away from the editor to another UI element? I would like the selected text to remain highlighted, similar to how some toolbar button interactions do not clear the selection.

Could you please advise on any strategies or configurations within Plate.js that might allow maintaining the selection highlight even when the focus is shifted? Any examples or guidance would be greatly appreciated.

Thank you for your help!

[12joan]

If your font size controls do not require focus (which they probably don't require unless they involve a text input), you can prevent focus from leaving the editor while the user interacts with the controls by calling event.preventDefault() on each mousedown event.

Otherwise, you can render a fake selection rectangle using either an absolutely positioned div (see getSelectionBoundingClientRect) or a Slate decoration (see this tutorial and the code for createFindReplacePlugin for an example of using decorators in Plate).

[SID9-HoneyBee]

Thank you for your advice.
The problem with the button was solved with event.preventDefault.

But there still remains a problem with the input control.