How Do I Add Auto Enumerating Headings ?

[sereneinserenade]

First of all, thank you SO MUCH for an editor like this. It literally makes my life much easier. 🚀

What I am trying to achieve:

I am trying to implement auto enumerating headings for the headings inside of the editor content. Right now I am using DOM Manipulation to achieve the behavior to convert

<h1> The First H1 </h1>
<h2> The First H2 </h2>
<h3> The First H3 </h3>
<h1> The Second H1 </h1>

to

<h1> 1. The First H1 </h1>
<h2> 1.1. The First H2 </h2>
<h3> 1.1.1. The First H3 </h3>
<h1> 2. The Second H1 </h1>

that means depending on the level of heading it will prepend the computed numbers in the innerText of each Heading Element.

---

Problem:

The algorithm that I am using for it is that whenever the editor content is updated, remove all the numbers from heading elements first and then recalculate the order and then prepend the newly computed numbers before the innerText of heading elements. Now because in the intermediate state where the numbers are removed, the cursor goes to the initial position of the line as it thinks as the numbers at the start of innerText of heading are removed, there is no content left, but after that I am adding the newly computed numbers with each update in the document and the cursor still stays on the initial position of that heading block.

---

Asking For Help:

• Is is possible to get this behavior with any tiptap/prosemirror extension so that we could skip the dirty work of manipulating the editor content with javascript ?

or

• is there any way to do it with javascript to avoid the issues with cursor moving to the initial character of line ?

Any help would be very much appreciated and once again, thank you TipTap team and Community for such an amazing text editor, I'm eagerly waiting for version 2.0 🚀

[philippkuehn]

You can create a nodeView for headings and prepend that numbers. Wrap them with contenteditable="false" so they are not editable. Not sure if this scales well because every heading has to calculate its own number. That also means these numbers are not stored in the exported document.

[diegogerio]

I had the same issue, are CSS counters enough for you?

h1 {
  counter-increment: h1;
  counter-reset: h2;
}
h2 {
  counter-increment: h2;
  counter-reset: h3;
}
h3 {
  counter-increment: h3;
}
h1::before {
  content: counter(h1)'. ';
}
h2::before {
  content: counter(h1)'.'counter(h2)'. ';
}
h3::before {
  content: counter(h1)'.'counter(h2)'.'counter(h3)'. ';
}