Paginated Editing?

Is it possible to organize a document into pages of a fixed height and have pages overflow into each other?

Google docs (and obviously microsoft word) does this, where paragraphs can flow between pages, e.g.:

Is this possible with the current prosemirror schema? My first thought was to have pages be a node type under document that can contain all the content, but I don’t know how to make content flow between nodes without manually attempting it on every transform.

Since this is complicated and kind of at odds with our goal of being a semantic, not visual editor, I think such a feature is out of scope for this project.

I’ve had some success attempting paging by defining all my elements under a ‘page’ node. The top level doc in the schema only accepts content of ‘page+’, then the page node accepts all the regular elements.

As marijn has said it is quite complicated since you then have to define a custom keymap to handle special key inputs like enter and backspace for instance. Then you also have to handle moving the page content or nodes to the next page when you hit your page length from the browser DOM. It also requires the splitting of long nodes into two when they extend across the page boundary etc. Then do the opposite and join them on backspace for previously split nodes :slight_smile:

…and that’s just getting started. Pretty complicated! But I at least proved it’s quite possible. There may be better ways to implement but that seemed to work, mostly! I just proved I could do it kind of… I plan on finishing someday. Seems to be much easier to build using prosemirror then in other contenteditable based editors I’ve looked at though.

If anyone has any easier ways to implement, I’d like to hear! I attempted this on 0.10 before decorators were a thing so there might be some possibilities using decoration ?

EDIT: I think the keymap is unnecessary actually, but you need to do extendTransformAction in onAction to modify your pages based on the length plus the other complexities

1 Like

Hi Jon,

We are also doing paging in a Script Editor (so the same thing that you describe => Page+, splitting nodes into two, joining nodes, etc…) We already discussed with JCHollett the topic, since they also did paging in a PM editor…

Can you share some of your code or advice, so that we have more food to step on and discuss?

Greetz, Pavel