We got a design brief stating that the menu should only appear while a user is interacting with the editor.
We have a custom toolbar component, and using React to render everything.
The DOM structure is like this:
- Wrapper component
(in reverse for tab-ordering issues, the toolbar renders on top of the editor via flex-reverse).
The main issue we’re facing is that the EditorView constantly loses focus when the user is interacting with the menu. The solution to that, so far, is to fastidiously call
editorView.focus() after each dispatch or command application.
However, this approach breaks in two cases:
- more complex UI, e.g. dropdowns for text alignment, you have to keep track whether the dropdown is open, and then keep showing the toolbar, even if the editor has lost focus.
- general annoyance, e.g. the toolbar has a bit of margin around it, and then clicking on the margin makes the editor lose focus. You have to make sure that the toolbar traps those clicks and either re-focuses the view or stops propagation etc.
There’s ways around all of that of course, like keeping track of open popups and dialogs, trapping clicks etc etc, but it feels like going against the grain.
I wonder if there’s any other solution for this, e.g: could I somehow put the toolbar inside the content-editable component so that interacting with it wouldn’t steal the focus from the editor? Would that even work? Any other approaches that come to mind?