Keep track of ranges when changing content

Hello,

Let’s say I have the following content:

<some-element>
    <some-child some-attr="foo" another-attr="bar" />
</some-element>

I am obviously able to parse this and get a data structure that represents this document in memory.

I would like to attach some ranges to objects representing this document. For example, the value of some-attr starts at 42 and ends at 45, so I attach the range [42-45] to the object representing some-attr in memory. My question is: how to keep track of subsequent changes in this range?

Say I have a special action that, when triggered, changes the content of some-attr by dispatching a transaction. Then I would have to manually update the range attached to the object representation of some-attr, but also all the ranges affected by the change (for example, the range attached to another-attr).

Do I have to manually update all ranges? If not, what would be the idiomatic way to do this with CodeMirror 6?

You can map positions through changes, or even use a RangeSet to track your ranges.