Make heading counter-style configurable

1

I would like to give users a function to change the counter-style of the document’s headings.

My documents are fairly long and use an industry-specific style of numbering headings (A., I., 1., …). Some users would like to change that, e.g. to (I., 1., a), …).

I wonder though how to store and render such configuration. I can see two different approaches:

  1. Store the global data in the document’s attrs.
  2. Store the data for each individual heading in the heading’s attrs.

The first approach requires storing data in the doc node which seems possible, but not encouraged. The next problem then would be to access that data when rendering the nodes. If I am not mistaken, doc is not available to NodeSpec.toDOM()

With the second approach the data would be available via node.attrs but storing the information in every heading when storing it once would be enough seems suboptimal. Also, changing a counter-style would require a transaction on every node which seems equally bad.

I also looked into Plugins, but I don’t see how one could be designed to augment the toDOM method.

What would be a suitable approach?

2

Keeping this in the document node (and adding a step type that updates it) sounds like it would work. A plugin could add the appropriate class to toggle the css counters to the editor via the attributes prop. Or alternative, store it outside of the document in some separate data structure.

3

Thank you marijn for the swift answer. I am always surprised how flexible ProseMirror is.

The solution I found to work is to use the attributes prop of a Plugin and generate a style attribute for the editable element. In this attribute one can place programmatically generated CSS variables, eg --h1counter: counter(h1, 'upper-alpha') '. '. These variables can then be used in the application’s stylesheet.