Multi-level lists with indexes in the content

1

I am working on a ProseMirror tool that would generate legislative documents in a sub-schema of AkomaNtoso (LegalDocML). Rather than using an <ol> and <li> approach, where the actual numbering is a display concern dealt with by the browser, AkomaNtoso expects legislative section numbers to appear as the text child of a <num> tag.

I’m assuming the reason they do it that way is because so many actual laws are incorrectly numbered, and they are trying to be compatible with existing laws, warts and all.

I don’t need the user to be able to override the numbers, necessarily. But I do need the numbers in the XML, not just the CSS.

So I need the same functionality that you can get with CSS using counter, counter-reset, counter-increment, and counter(), but I need it to happen inside the ProseMirror codes.

I’m relatively new to ProseMirror, so I’m just looking for some reasonable options for how to proceed. References to plugins, examples, pitfalls to avoid, all appreciated, thanks.

2

Make this an attribute on list item nodes, and set up your list-manipulation commands to maintain them in the way the user expects.

3

Thanks for the reply. That would get me <section index="1">...</section>, if I understand correctly. Which is a start. But what I need to generate is <section index="1"><num>1</num>...</section>. I need the value of the index attribute of the section node to appear as a text node inside the “num” subnode, and when the list manipulation commands change the value of the attribute, I need the value of the text node to change too.

It would be great if I could just say, in toDOM, that the content of the num node is always the value of the index attribute of its parent. toDOM receives the node, not the node’s parent. And I’m not sure what the alternatives are.

How would you approach that?

4

You can’t. The way nodes are rendered is purely dependent on the node itself, not its context in the document.

You may be able to do this with CSS :before and attr().

5

I’m aware toDOM won’t do it, and CSS is what I’m using now. But schema compliance requires the number to be recorded as text in the subnode, not generated in the browser, so CSS like ::before and ::after won’t cut it.

I’m assuming I need to write code that will listen to changes, and then reset the text in the “num” nodes as required. If that’s true, what I don’t know is where that code would be best placed.

If there are high quality examples I could follow that solve a similar problem (modifying the content of text nodes based on changes to other portions of the tree), that would be great.

6

appendTransaction is probably the best place for this. When a list item is changed by a transaction, check its number, and if it is incorrect, append a transaction that fixes it.