Codemirror 6 Markers

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.

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.

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?

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

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 (! {
        let {from, to} = cursor.value
        builder.add(from, to, decoration);

    const rangeset = builder.finish();

    // apply range set

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.

Ahh, that makes sense. Thanks for your help.