Codemirror 6 Markers

1

Is there a feature in Codemirror 6 that is equivalent to the old text markers? I can’t seem to find them in the docs, but I might be missing something.

https://codemirror.net/doc/manual.html#api_marker

2

Not directly equivalent—the idea is to keep track of the position yourself, for example somewhere in a state field, and map it to its new position on every transaction to make sure it stays in the proper place.

3

Okay, I think that makes sense. In previous versions I used text markers to add a CSS class that surrounds a text selection, like a SearchCursor result. What would be the best way to do that with version 6?

4

Ah, to actually style the content you need decorations which, similarly, are maintained (and explicitly mapped) by your plugin.

5

I’ve built a range set with widget decorations based off a SearchCursor result but I’m not quite sure how to apply the range set to the state.

    let cursor = new SearchCursor(this.editor.state.doc, html);

    let builder = new RangeSetBuilder<Decoration>();

    while (!cursor.next().done) {
        let {from, to} = cursor.value
        builder.add(from, to, decoration);
    }

    const rangeset = builder.finish();

    // apply range set
6

You’ll want to keep the rangeset in a state field and provide it through the EditorView.decorations facet, or in a view plugin where you’d provide it to the view through the decorations option.

7

Ahh, that makes sense. Thanks for your help.