How to Properly Handle Page Nodes Within the ContentEditable Scope?

[Moti-Velz]

I'm implementing a custom PageNode as a Lexical ElementNode and trying to manage page-level abstractions. Currently, the pages are rendered inside the ContentEditable, which interferes with Lexical's state management and causes issues with layout and interaction.

Observations:

Using pages as divs works but disrupts the editor’s flow. The Content editable placeholder is behind the pages, and the enter key doesn't work.

How can I design the pagination logic in a way that keeps them from interfering with the ContentEditable ? Should I restructure RichTextPlugin or maybe have a Content Editable for each page ?

PageNode:
createDOM(config: EditorConfig): HTMLElement { const firstPageOffset = 524; // 4rem converted to pixels const pageSpacing = 32; // 2rem spacing between pages in pixels const dom = document.createElement('section'); dom.className = 'page-container'; dom.style.cssText =
position: relative;
top: ${firstPageOffset + (this.pageIndex ?? 0) * (11 * 96 + pageSpacing)}px;
left: 50%;
transform: translate(-50%, -50%);
width: ${8.5 * 96}px;
min-height: ${11 * 96}px;
box-sizing: border-box;
margin: 0 auto 2rem auto;
padding: 1in;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
dom.style.display = "block";
; return dom; }