Best approach for rendering document subtree?

I’m working on an editor for documents that are composed of a list of sections. I want to keep the ability to review/edit the document as a whole, while also supporting a “section view” mode that only renders one section of the document at a time.

e.g. If the document tree is:

root
+-- section 1
     +-- paragraph
     +-- paragraph
+-- section 2
     +-- paragraph

I want to support optionally rendering only a single section at a time. When viewing the second section the rendered tree looks like:

root
+-- section 2
     +-- paragraph

I’d like any edits made while in section view to be propagated back to the original document.

I’m trying to think of the best way of doing this. My first instinct is to maintain the full document in memory, but build the EditorView by passing a single section as the doc part of state. I could then add a plugin that listens for transactions and proxies them back to the master document. I think this should work, but it feels potentially brittle.

Another approach I’m considering is to just delete all other sections when switching to a section view (and saving a reference to them in memory), then inserting them back when switching back to the full document view. This approach seems conceptually a little simpler, but it feels dirty (modifying data for view-layer purposes), and adds complexity for features like collaboration or version history that care about “real” document transactions.

Do either of these approaches seem more or less appropriate? Is there a better way of doing this I’m not considering?

Thanks!

1 Like

The first approach should work perfectly well. Use StepMap.offset to transform section-local steps into document-level steps. The nested editors in the footnote example work the same way.

1 Like

Perfect, thanks for the pointers – I should have noticed that footnote example, it is exactly what I needed. And thank you for maintaining ProseMirror, it’s a really delightful library to work with.