Easily track & remove content with decorations

[shshaw]

Thanks for the response.

Storing data as a RangeSet makes (theoretical) sense. However, even after spending a week steeped in the CodeMirror 6 docs, I constantly find myself struggling with the practical implementation.

For example: You recommend using RangeSet.

1. There aren’t any direct examples of RangeSet I can find, so…
2. I go to the RangeSet Docs
3. Dig through dozen or more methods to even see the ways to create a RangeSet.
4. It’s still unclear if I should use new RangeSet(), RangeSet.of(), RangeSet.empty, or if I need to use the completely separate RangeSetBuilder.

After all of that, I still have to figure out:

1. How to integrate that into StateField
2. How to properly store data in the RangeSet and StateField
3. How to loop through the RangeSet to update the position with tr.changes.mapPos
4. How to get that data back and use it to remove a range of the document.

I’m not complaining about having to learn new concepts, but there are so many disparate concepts/types and so few examples that really showcase how these concepts are supposed to work individually or together.

Some of that will come with time and community, but if there are parts of the documentation or codebase I might be missing that help with understanding how to implement or use them, do let me know.

Noting other discussions for reference:

Where to start

This resonates with my experience learning CM6 too. I would describe it something like this: In addition to CM6, I’ve used a number of other libraries/frameworks for text editing, for UI, and etc. They often share similar ideas for how to structure code and expose levers for making your own editing experience. As a result, I’ve built up a number of code architectures/approaches to doing certain kinds of tasks with text editors that I can usually apply in some fashion, no matter the text editor …

RangeSet with metadata and different decorations

Hello. Please help to understand the best way to create a RangeSet with Ranges that contain metadata (e.g., variable or object) together with a state. This state would define behaviour and decoration logic. The flow is the following: The hotkey creates a new Range with some metadata (and a state from 3-5 predefined states). Based on user’s input the state would change (or delete it in some cases). Based on state the Range is decorated differently (applying Mark, collapsed, etc.). I understa…

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…