fix: do not partially hide CM selection background on active lines (#82)

Author: pkerschbaum

src/App.css

@@ -126,3 +126,11 @@
 .cm-tooltip.cm-tooltip-autocomplete > ul {
 	border-radius: 0.125rem;
 }
+
+.cm-editor:not(:has(.cm-selectionBackground)) .cm-activeLine {
+	background-color: hsl(var(--accent));
+}
+
+.cm-editor:has(.cm-selectionBackground) .cm-activeLine {
+	background-color: transparent;
+}

src/utils/codemirror-themes.tsx

@@ -17,7 +17,7 @@ export const ESLintPlaygroundTheme = EditorView.theme(
 			paddingRight: "1px",
 			backgroundColor: "var(--body-background-color)",
 		},
-		".cm-activeLine, .cm-activeLineGutter": {
+		".cm-activeLineGutter": {
 			backgroundColor: "var(--body-background-color)",
 		},
 		".cm-content": {
@@ -53,7 +53,6 @@ export const ESLintPlaygroundTheme = EditorView.theme(
 			margin: "0",
 		},
 		"&.cm-editor .cm-content .cm-line ::selection": {
-			backgroundColor: "var(--color-primary-800) !important",
 			color: "#fff !important",
 		},
 	},