drawSelection behind decorations

v6
1

Since the selection will be placed behind the text (and the decoration), you struggle to see the selection altogether.

How should I deal with the drawSelection plugin when I have decorated my document?

2

Don’t put non-transparent background styles on the text, basically. Find other ways to style it.

3

That’s a bit problematic for me. Even if I choose semi-transparent decorations, it still looks funky/non-intuitive.

In the old version there was a plugin that would handle this, CodeMirror: Selection Marking Demo

Any idea if this is possible to mimic in v6? Or perhaps remove marks that are within the selected range, and then re-add them when they are no longer selected?

4

I tried to recreate the plugin in v6, but it fails to work as intended because the marks appear as children of the other decorations. Do you have any suggestion on a workaround?

const selectionPlugin = ViewPlugin.fromClass(class {
  selection = Decoration.none;

  update(vu) {
    const { from, to } = vu.state.selection.main;

    this.selection = to > from ? Decoration.set([Decoration.mark({ class: styles.selected }).range(from, to)]) : Decoration.none;
  }
}, {
  decorations: instance => instance.selection,
})
5

You may be able to make whatever extension is adding the background not decorate selected text.

7

I tried this, and one problem is that I highlight tokens in chunks, i.e., position 5 to 10 will be a certain background/color. So I’m not exactly sure how to approach this, as any selection in that range will make the whole token decoration disappear.

I could highlight tokens on a character by character basis, but the range 5 to 10 would be 5 tokens instead of one, which likely impacts performance.

8

For anyone wondering, I made the plugin split tokens up if they are inside or part of the selection, and then render the selected tokens differently.