Pagination

1

Hi all.

So… I’m trying to build a text editing app kind of like Google Docs. For so, I wanted to implement pagination that emulates A4 pages. I’ve tried many JS text editors like Slate and Lexical, with no success. However, with Prosemirror, I know it is possible to do so, as mentioned here https://stackoverflow.com/questions/50965683/how-would-you-implement-a-rich-text-editor-with-pagination and, by inspecting the elements of Celtx website (screenwriting tool), which has the mentioned pagination, it seems like they’re using Prosemirror too.

Although I found some discussions here (there also is the aforementioned Stackoverflow question), I can’t seem to get it very clear. I tried gathering some of the ideas I could find to create my own pagination plugin, but, no surprises, it’s been very difficult.

I’ve been basing myself on the following project: https://github.com/todorstoev/prosemirror-pagination, which seems to be no longer maintained. So far I’ve created a schema that goes like:

nodes: {
        doc: {content: "page+"},
        page: {
            content: "paragraph+",
            toDOM(){return ["div", {class: "page"}, ["div", {class: "inner-container"}, 0]]}
        },
        paragraph: {
            content: "text*", 
            toDOM() { return ["p", {class: "paragraph"}, 0] }},
        text: {},
    }

Then, in my plugin, I check whether or not there is overflow on the current page node. If there is, then I go through several cases:

  1. Is there a next page? If no, check if the last paragraph node is empty or not. If yes, simply copy it, then delete it, create a new page node and insert it there. If no, I’m still trying to figure out how to split that last paragraph so that the part that overflows goes down to the next page.

  2. If yes, I have no idea… Maybe inserting overflowing content in the next page node. But then, what if the next page content starts overflowing? Should I then loop through each page node looking for overflow and deleting/inserting nodes from one page to another?

I’m looking for ideas, some guidance, idk. Prosemirror is awesome and I’d really like to be able to finish this project and open source it later to help more people who are willing for something similar too.

2

Hello Andre,

I have been trying to do the same exact thing as well, except for TipTap (which is based on prosemirror). It has been very difficult for me to grasp how prosemirror works, but I am slowly making progress on looking at the ‘prosemirror-pagination’ repo. I hope I will be able to have it all implemented soon. I will post updates here when I can.

I was extremely surprised when I saw that your post was submitted only 27 days ago, in comparison to prosemirror-pagination last being updated 4 days ago. Perhaps we both can make working versions of pagination. :slight_smile:

3

I have a custom implementation https://github.com/Cassielxd/CassieEditor

1 Like
4

I am having a bit of hard time understanding the vue code as I am trying to implement this with react, but it sure does seem possible! Any update on the following Andre?

5

In fact, the core computing logic does not rely on any framework, and the core pagination part is PageExtension