A new text editor with pagination

Hello,

I’m excited to share a project I’ve been working on for a while. But firstly, I’d like to thank Marijn Haverbeke for his wonderful work with ProseMirror.

The editor’s name is Badon Writer, and it comes with a completely new way of approaching the pagination problem, and thus it can even handle long documents (~300+ pages), with headers and footers.

There is support for opening word documents, and client side PDF generation. There’s also some support for scripting (in tables and the document as a whole), and a lot more.

It’s not a 100% finished, but I wanted to share what’s been done so far. Any advice or critics will be welcome.

The project will be open sourced in the short future.

If anyone’s interested, it’s already running at: https://www.badon.app/

Thanks!

6 Likes

Very impressive! That’s a pretty fully-featured editor. With some CSS enhancements that could look really nice. Hope you have a way of sustaining the development. Open-sourcing definitely can help garnering traction as many would rather use available solutions than building their own from scratch. Maybe doing consulting could help financing it. Good luck!

This is amazing! How did you approach the problem of pagination? Open-sourcing this would provide unprecedented value to the prosemirror community!

Thank you!

The pagination largely relies on CSS for the bulk of the layout work, so there’s no node splitting and barely any calculation related to height and width dimensions, which is why it’s quite performant.

There are a few drawbacks though, as every element must adhere to specific constraints (I had to write a table plugin from scratch).

1 Like

Nice editor!

There are a few different ways that have been used over the years to try to put editors into “pages”. I spent a year on a solution based on “CSS Regions” back in 2012-13 - a feature that was subsequently removed from Chromium [1]. Another popular solution that is still working is to use CSS multicolumn where each page represents a page. Problems arise if you want to support things like footnotes where footnotes take up different amounts of space on different pages.

I haven’t looked into all the details of your solution, but the basic concept seems to use floats to put page endings between pages similar to this demo [2]. Putting breaks like that in is also part of what is needed when using the multicolumn solution if you need to add extra space for figures, footnotes, etc.

After CSS Regions were removed, I tried a few times, but ultimately always ran into too many edge cases and weird behavior in individual browsers that I had given up on combining pagination with editing - instead opted to use pagination of the final output for PDF/print [3].

I wonder if you are running into such problems even now, or if the browsers have now become so good to follow specifications, etc. that it’s possible to make this work across platforms.

[1] GitHub - fiduswriter/pagination.js: pagination.js is a Javascript library that can be included in HTML files to render the contents of the HTML to pages that can be printed to PDF using CSS Regions. It requires a browser with support for CSS Regions.

[2] Test: Contenteditable editor with pages - JSFiddle - Code Playground

[3] GitHub - fiduswriter/paginate-for-print: paginate-for-print is trying to recreate some of the basic features of pagination.js without using CSS Regions with a focus on Chrome, Firefox, Safari and Edge. - since then I’ve switched to using Vivliostyle which is doing the same, but a lot more advanced

2 Likes

Awesome! I hadn’t taken a closer look at pagination.js as it seemed to be a solution for “static” content. I also haven’t added footnote support yet, but since these are less “dynamic”, I guess it’s possible to move them around asynchronously.

As for the basic concept, you nailed it. I’ll make sure to scratch “completely new” from now on. The only difference is that the “pages div” is on the same level as the “editor div”, with a display: content. A few other minor differences, but it’s pretty much the same concept. Edge cases are being handled individually.

1 Like

Your exact setup sounds like it is still quite unique, I think. If it helps you from a marketing and financing perspective, I would just continue calling it that. I am not going to mention pagination as a unique selling point of Fidus Writer. it turns out it is not that important for our users and the pagination will be different anyway if they choose to use one of the various export formats (LaTeX, DOCX, ODT, EPUB, JATS, etc.)…

Slightly related: a few years ago, I was working on print-related CSS specs, most of all this one: CSS Page Floats . While I don’t think your paginated editor can replace all CSS print-related features that are not currently shipped with browsers (you need JS libraries for that functionality), I think it should be possible to do at least basic page floats up/down. Maybe that is something your users will be interested in eventually.

1 Like