basicSetup breaks cursor highlighting

Hi, so we use codemirror in a code playground here: Oxc - The JavaScript Oxidation Compiler Playground and when we highlight something, every line from the first line of the selection to the line before the last selected line gets highlighted. This is really awkward because it just skips the last line that you highlight, you can try it out too, you will probably see the same thing. The thing is, removing the basicSetup from our extensions actually makes selections work normally, although not sure why. (and has the downside of no longer having the basicSetup which is not really workable) Here’s the exact line of our basicSetup, maybe there’s something else wrong here: https://github.com/web-infra-dev/oxc/blob/f48db3f85e337e92f6ae2231370601f7a58cdd45/website/playground/index.js#L134

Thanks for reading and I am excited to hear any thoughts or solutions that come :slight_smile:

This is really weird. If you inspect the DOM with devtools, you’ll see the 3rd selection rectangle (.cm-selectionBackground) has the right dimensions, but isn’t drawn to cover those. If I add a border, the border only shows up along the bottom of the reported dimensions. Both Firefox and Chrome do this, so I doubt it’s a browser bug. But I don’t see any style or other factor in the DOM inspector that would explain it.

Could you, by any chance, try to reduce this issue to as simple a setup as you can? The problem (obviously) doesn’t occur in most setups, so maybe it is something about other styles or the editor’s DOM context that causes this.

Oh wait, you overrode the .cm-activeLine style to add a non-transparent background that hides the selection. There’s your issue.

Thank you for investigating! That’s actually the githubDark theme that does that, so I guess it’s time to investigate there.

I opened an issue about it here, thanks again for the help!