CODEWITHSUNDEEP
javascriptpaginationrich-text-editorpage-break
user3198085
user3198085

Reputation: 81

How would you implement a rich text editor with pagination?

As a part of a bigger project I'm going to implement a rich text editor with pagination.

Because of previous bad experiences with content-editable I would prefer the editor to use an approach with a document model (e.g., prose-mirror and slate).

The editor is going to have only a handful of elements that the user can insert, so the amount features is not very important.

The hard problem here is pagination, which unfortunately none, of the otherwise decently looking editors I've looked at, support out of the box.

I'm confident that I'm capable of extending one of the existing editors with pagination support, but I'm also aware that it will require a lot of work, so I really want to make the right decisions from the beginning.

Given the provided information, which approach would you choose in regards to implementing a rich text editor with pagination?

Technical details and stories about past experiences with extending/using various editors are more than welcome.

Upvotes: 5

Views: 3376

Answers (1)

Mike Burton
Mike Burton

Reputation: 3020

We've done pagination with ProseMirror. It's a pain in the butt, but there are a lot of ways to make it work in the model - modeling pages directly, using marks to indicate page boundaries, etc - as long as you're comfortable writing custom views to support your chosen representation.

The key decisions focus on

  1. How interactive does your pagination need to be?
  2. How fluid is your formatting?

If you're ok with pagination that is "eventually" correct, and if you have rules that fix your characters per line (basically pseudo-monospacing), you'll be ok in PM. If you need your pagination to be correct RIGHT NOW and support diverse fonts, you're going to have to fall back on the browser's ability to measure your element sizes, which means a lot of "shadow" rendering.

You should probably also realize up front that ProseMirror is a relatively quick document engine, but with long documents where in-editor pagination really shines it still struggles to keep up with the workload. I'm hoping that the core can be rewritten in something like WebAssembly, which should offer a substantial speedup for the low-level calculations that ProseMirror is doing for this sort of stuff.

Upvotes: 4

Related Questions