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.
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!
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).
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.
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.
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.
This is great! Im currently working on an implementation of exactly the same, but for React + Tiptap apps. I currently have a lot of progress, but still a bit buggy.
Do you have a rough time-scale of when you might be open-sourcing? I’d definitely be interested in contributing where it is needed. Having a performant pagination solution out there would provide huge value. I’ve never been convinced node-splitting is the way forward, your method of effectively “doing away” with the bulk of calculation by relying on CSS is the most scalable & robust I’ve seen as of yet.
I’m using chrome, on a relatively mid-tier setup.
I believe the limitation is mostly due to how many DOM elements the browser/device can handle. I’m also certain there are optimizations to be made in this aspect.
Anyway, here’s a vid of the editor handling 450 pages:
Hey Igor, that looks amazing. This must be the first paginated editor built on prosemirror in the public that can support page numbers that high. I’ve just shot you a direct message
