How to handle page breaks?

[EricHasegawa]

I'm using TipTap in a React application and need to implement page breaks at regular intervals (every 1,056px to be exact). Turns out that page breaks are actually super tricky in TipTap/ProseMirror, I've looked at [this community extension] (#3408) that creates a custom node, but this is not that helpful in my context as it can be moved around, deleted etc. I've looked at this "Should I use a state based plugin or a view based one" discussion in the ProseMirror forums and it provided some insight but nothing very specific, and I've also looked at this discussion which helps in handling printing but not dynamic page breaks.

Given all this, it's clear this will be super tricky. My two main options seem to be:

1. Create a custom PageBreak node, which I am not a huge fan of since I'll have to make it immovable, immutable, and will have to add a lot of custom logic to make content be inserted around it, finding where they should go etc.
2. Use custom CSS: find some way to "hack" into EditorContent and manually insert a custom div every 1056 px that looks/feels like a page break.

My main question is whether or not option 2 is possible. It seems like lots of logic is abstracted away in <EditorContent> and I'm not sure I can put my own divs in there and do all that I need to. There's not much documentation around customizing this, one question I have is what does setRenderer do and can it help me here? Also looking for general advice or suggestions on how to approach this.

[clemente-xyz]

Same here.

Did you manage to do it @EricHasegawa ?

[bdbch]

I'm still thinking about this in general. I've seen solutions using specific Page nodes with attributes to control page sizes, margins, etc. which I think is a good idea if you want to go for a "Paper"-like editing experience.

Page breaks then would just be the insertion of a new "Page" node below the current one and moving the cursor in there. Setting this up is actually quite easy (as it's just a Tiptap Node with attributes that should be rendered in a specific way).

The complicated parts then are:

• New pages - What happens when the content gets to long for the current page (in size and margin), content needs to be moved to a new page afterwards
• Backspacing out of a page - What happens if the cursor is at the start of a page and backspace is used? Most editors try to merge the pages content with the page before

Those are the things I currently had issues with the most and didn't had time to invest more here.

[clemente-xyz]

good insights. I have figured out a way, but not 100% functional, since tables and other more complex structures are super hard to split and accomodate.

Maybe we can continue the discussion on #5719 ?

[bdbch]

Sure thing, sounds good.