A4 pages conceptual guide

Hello all, as I can see a lot of people are interested in emulating A4 pages in the their document presentation. I want to share my experience on the topic as I’ve been working on it for a while. So here is what i have done so far.

ezgif.com-video-to-gif

Its in early stage and more cases needs to be covered, but ProseMirror was the only tool that could help me do this. So have a schema that looks like that :

doc(
   page(
       header(block+)
       body(block+)
       footer(block+)
       pageCounter(paragraph{1})
   )
)

Creating a new plugin for the purpose I followed the instructions in other topics to use join/split methods to move page boundaries. However I made a custom split function to add the header, the footer and the pageCounter nodes to the new page. In the update method of the plugin I’m listening for a overflow in the body node, when it happens I trigger a new empty transaction containing meta data for the height of the body. In appendTransaction I wait for this meta data , I remove headers and footers from all pages so I can join them correctly. When i join all pages I reinsert the headers and the footers again in the single big page. Then I start to split when the sum of the children of the body node is higher than the height of the body, using my custom split function. Every document manipulation is done in appendTransaction , against the resulting transaction of the previous. With 100 pages i didnt observe any performance issues. Im writing this that A4 is doable and ProseMirror is awesome tool ! :slight_smile:

2 Likes

I decided to open-source the plugin. Everybody who want to help is welcome. Here is the github:

What is done till now

  • correct split for single line paragraphs

What should be done

  • correct split in tables
  • correct split for multiline paragraphs