RangeSet with metadata and different decorations

v6
1

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:

  1. The hotkey creates a new Range with some metadata (and a state from 3-5 predefined states).
  2. Based on user’s input the state would change (or delete it in some cases).
  3. Based on state the Range is decorated differently (applying Mark, collapsed, etc.).

I understand I should be looking into StateField, but struggle to understand:

  1. Can I use just one StateField? This will be the cleanest way.
  2. How to properly update RangeSet on StateField.update e.g. to add new Range with metadata and initial state.
  3. How to StateField.provide to make proper decoration based on state.
2

I think so, yes.

RangeSet.update allows you to add new ranges to an existing set.

You can either make your range set a DecorationSet and store your own metadata in additional properties on the spec objects, or derive a separate DecorationSet from your ranges, and provide that as decorations.

3

Q2

Thanks, that works. I didn’t know you can pass an object {from: ..., to: ..., value:...} to RangeSet.update. Manual suggests only a Range object should be used.

Q3

Sorry, I am a bit new to CodeMirror so neither option makes sense to me. Could you provide a code example please?

4

And the manual is correct here. Use a Range object.