Normalizing editor and keeping sync with DOM in SlateJS

I’m trying to build a paginated editor with Slate React similar to MS Word. However, I’ve had problems trying to apply automatic page breaks.

Description of the problem

To create the pages for the editor, I came up with a custom node of type ‘page’ that has the following structure when rendered:

 <div className="page" {...attributes} >
      <div className="inner-page-container">
        {children}
      </div>
 </div>

Children are “paragraph” nodes that render like:

<p className="paragraph" {...attributes}>{children}</p>

Then, I try to normalize each of these page nodes with:

import { Transforms,Element,Node, Editor ,Text, nodes} from 'slate'
import { ReactEditor } from 'slate-react'

const emptyPage: any ={type:'page',children:[{type:'paragraph', children:[{type:'text',text:''}]}]}

function withCustomNormalize(editor: ReactEditor) {
 const { normalizeNode } = editor

 editor.normalizeNode = (entry) => {
  const [node, path] = entry

  // if(Text.isText(node)) return normalizeNode(entry)

  if (Element.isElement(node) && node.type === 'page') {
    let PageNode
    let NextPageNode
    let PageHeight
    let ChildrenHeight = 0
    try{
      PageNode = ReactEditor.toDOMNode(editor, node)
      NextPageNode = PageNode.nextSibling
      const styles = window.getComputedStyle(PageNode)
      PageHeight = PageNode.clientHeight - (parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom))
    }catch(e){
      console.log(e)
      return
    }

    const innerContainer = (PageNode.children[0] as HTMLElement)

    for (const child of innerContainer.children){
      ChildrenHeight += child.clientHeight
    }

    
    const delta = PageHeight - ChildrenHeight
    
    if (delta < 0  && NextPageNode == null){
      Transforms.liftNodes(editor)
      Transforms.splitNodes(editor)
      Transforms.wrapNodes(editor, emptyPage)
    } else if (delta < 0 && NextPageNode != null){
      try {
        Transforms.moveNodes(editor, {to: [path[0] + 1, 0]})
      } catch (e){
        return 
      }
    }
  }
  normalizeNode(entry)
}
  return editor
}

export default withCustomNormalize

The code checks if there’s overflow on the inner-container and, case positive, if there’s no “next page”, splits the selections and wraps it around a new page node, otherwise it just moves the selection to the next page. Problem is: when hitting enter on the last possible line before overflowing, another paragraph node is created below. Only when I type something in, normalization is called. The image below kind of describes what I mean.

For more context, pretty much the same behavior can be seen here https://github.com/usunil0/slate-paged/tree/master (where I got the core idea for most of the code)

(Although the last node is active as if you could type something in, as soon as you try so, normalization is called, when it should’ve been called before for this to work as expected)

I know this is due to how normalization is triggered, as mentioned here https://github.com/ianstormtaylor/slate/issues/3465

I’d like to know of any ideas/possible workarounds for this problem. How can I call normalization for all children nodes under a certain parent(as in my “page” case)?