Is it possible to use one toolbar to control multiple editor?

Question

I'm trying to make multiple editor on one page, and I want a single toolbar to make the control, so it can determine which editor to edit when mouse move into the specific editor.

I have looked into ToolbarPlugin, there has a "const [editor] = useLexicalComposerContext();", looks like ToolbarPlugin need to be placed inside of LexicalComposer to be able to get that [editor].

Is there any workaround to make it possible to have one toolbar control multiple Editors?

Answer 1

The @lexical/react framework does not allow to run multiple independent (no parent) editors within the same screen region.

<LexicalComposer> --> creates Context
  // Plugins for editor
</LexicalComposer>

You can still do this by abstracting the toolbar plugin so that it takes a LexicalEditor as a property (<Toolbar editor={editor} />) and you can either have multiple toolbars that display/hide the toolbar accordingly or a separate Context that stores the instance.

That said, I would not recommend this! Your proposed behavior can negatively impact a11y and UX:

1. There's multiple pointers devices other than the mouse and people share different behaviors with them: phone, dictation tools, even keyboard navigation.
2. What about the non-clicked case (aka selection === null)?
3. It may not be obvious what and when the toolbar modifies the content, especially for caret selection (aka isSelectionCollapsed) (i.e. bold/italics formatting)