I’m building a Scrivener-like UI in React+Redux where there’s a document tree, and selecting a node with children will display a concatenation of those children in the editor. That’s easy enough. But my question is: what’s a strategy for tracking changes to the correct original document?
I’m new to ProseMirror but I’m guessing there’s a way to pass an ID along inside a nested input structure, and retain those IDs in the eventual transaction output. Is there an example of something like this anywhere?
Tracking changes is usually best done by observing transactions and recording steps.
You can add ID attributes to nodes, but you need to do a bit of work to preserve their uniqueness, via a plugin that reassigns IDs when they are duplicated through paste or drag/drop.
I’m now thinking it will be easiest to simply instantiate separate editors for each node (which are like chapters of a book, for instance, they could be many many pages long each). Not sure how this will scale though—do you think that would be too heavy?
It is definitely possible to show an editor for only part of a document. You’ll probably want to offset your changes to single-big-document coordinates when processing them.
How big a document can be depends on your target browsers and the plugins you use. Generally, a whole book may be too much. A medium-length chapter should work.
To clarify, the sub-documents are stored separately in a tree, like so:
{
project: {
meta: {
title: 'Out-of-Band',
authors: ['Ted Hayes'],
createdAt: 'Now',
},
docs: {
'A1A1': {
body: '',
title: 'Out-of-Band'
},
'ABCD': {
body: 'This is the body of ABCD—in the beginning, there was a surprisingly complicated text editor',
title: 'Chapter 1',
},
'1234': {
body: 'Some other content',
title: 'Section 1',
},
'12AB': {
body: 'Blergle blyblox',
title: 'Section 2',
},
'9876': {
body: 'Chapter 2 began like this though',
title: 'Chapter 2',
},
'2345': {
body: 'And finally this happened',
title: 'Chapter 3',
},
},
docTree: [
{ id: 'A1A1', children: [
{ id: 'ABCD', children: [{ id: '1234' }, { id: '12AB' }] },
{ id: '9876' },
{ id: '2345' },
]}
],
},
};
And the UI allows you to select any node in that tree and display a concatenation of that subtree in the editor. So the original question was specifically how to accomplish that latter bit and still write changes to the correct original subdocument. Does that make sense?