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

[ecumene]

Thanks for the thoughtful reply!

What it does is to calculate how much content it can fit and otherwise wrap the rest elsewhere.

It's really important to me that the editor is PDF-ready while also supporting adjustable font sizes and other rich text features. Would I be able to say constrain this to a 8.5in/11in div then resize the text? Or is this just for a hardcoded size? 16pt font would require less lines to overflow than 14pt font and calculating that number would be inconsistent. Does this also work for images now that I think about it?

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

I'm still learning about Lexical, how would this look in code?

function onChange(editorState) {
  editorState.read(() => {
    // Read the contents of the EditorState here.
    const root = $getRoot();

    console.log(root);
  });
}