Focused selection color will soon need a more specific selector

[marijnh]

To address a bug where, if people put CodeMirror editors inside another CodeMirror editor, the outer editor's focused state affects the selection and cursor styling of the inner editors, I will soon put out a release of @codemirror/view that uses a more specific style rule for the default focused selection color. In order for themes to still override this, they will need to match the specificity. I.e., in create-theme.ts, this line (note also the typo, #7)...

'&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection':

... must become ...

'&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':

[trusktr]

I seems maybe thememirror might currently be broken because it has not been updated according to the above?

When I try selecting any text on the current line, the selection is not visible.

Here's a reproduction on CodePen:

https://codepen.io/trusktr/pen/MWLXzVJ

[trusktr]

For now my workaround is to take the color of the activeLine from my chosen theme, then add an opacity value to it in my custom CSS:

		.cm-activeLine {
			/* The color from noctisLilac with an additional 0.4 opacity value */
			background-color: rgba(225, 222, 243, 0.4) !important;
		}

This then makes the selection appear (because the selection is underneath the activeLine).

Before:

Screen.Recording.2023-11-25.at.11.42.25.AM.mov

After:

Screen.Recording.2023-11-25.at.11.42.47.AM.mov