Feature: Support multiple editors to single `LexicalComposer`

[ecumene]

Multiple Editors

I would like to have pages in my editor, similar to Microsoft Word or Google Docs where each page has a blank space between them. I've tried doing the hacks other people have described via content-editable but they don't really work because you can delete the page break.

My use case is that I want to make a WYSIWYG editor for PDF / docx, but I can't seem to find a way to put that heard break in there. I may just resort to adding "page indicators" that tell you where a page ends based on height by drawing a line.

Editor

<LexicalComposer>
  <ToolbarPlugin />
  <Page />
  <Page />
  <Page />
</LexicalComposer>

Page

return (
  <LexicalOnChangePlugin onChange={onChange} />
);

The above works, but onChange only gets called for the last page.

Perhaps I'm going about the above wrong? Should I instead have multiple LexicalComposers and index them somehow?

[zurfyx]

On top of my head, I'd probably approach the problem with a transform rather than via hardcoded pages. See the CharacterLimit plugin for instance (https://github.com/facebook/lexical/blob/main/packages/lexical-react/src/shared/useCharacterLimit.js#L126). What it does is to calculate how much content it can fit and otherwise wrap the rest elsewhere.

For pages, it'd be rect sizes instead but the idea is similar. And you'd have to handle the special hard page break case.

The above works, but onChange only gets called for the last page.

To answer the question specifically, onChange does listen to all LexicalComposer EditorState changes but if Page is a DecoratorNode you'll have to propagate your (React) component changes to the Node. And I would use a single LexicalEditor instance, so a single LexicalComposer