A4 pages conceptual guide

1

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:

7 Likes
2

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
5 Likes
3

This is my test case:

I have 2 pages on my document, all with header, body and footer. I have some text content on my second page. If I try and make overflow some text in the first page (so trying to get it to the second page), I’m getting this error:

ERROR TransformError: Structure replace would overwrite content
at new TransformError (http://localhost/editor/vendor.js:155764:19)
at Transaction.step (http://localhost/editor/vendor.js:155804:30)
at Transaction.push../node_modules/prosemirror-transform/dist/index.es.js.Transform.join (http://localhost/editor/vendor.js:156342:15)
at Plugin.appendTransaction (http://localhost/editor/main.js:5716:25)

when it tries to join all the pages:

while (tr.doc.content.childCount > 1) {
     tr = tr.join(tr.doc.content.firstChild.nodeSize, 2);
}

I’m not using all of your plugin, in fact I changed some specs in order to reflect my needs.

4

Hello @Pipodi the way i do it is to remove all the headers and footers before the page join while i keep them in the plugin state. Then add them again in the split.

5

Hello, my friend! I tried hard to use your open source code, but failed. Can you send the sample code from Gif? Thank you very much :kissing_heart:

6

this my impl