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?
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:
selection === null
)?isSelectionCollapsed
) (i.e. bold/italics formatting)