Make active line background transparent

FIX: Highlight the active line even when there is a selection. Prevent the active line background from obscuring the selection backdrop.
codemirror · Sep 12, 2022 · 4810ba4 · 4810ba4
1 parent 6a15409
commit 4810ba4
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 4 deletions.
diff --git a/src/active-line.ts b/src/active-line.ts
@@ -25,7 +25,6 @@ const activeLineHighlighter = ViewPlugin.fromClass(class {
   getDeco(view: EditorView) {
     let lastLineStart = -1, deco = []
     for (let r of view.state.selection.ranges) {
-      if (!r.empty) return Decoration.none
       let line = view.lineBlockAt(r.head)
       if (line.from > lastLineStart) {
         deco.push(lineDeco.range(line.from))

diff --git a/src/gutter.ts b/src/gutter.ts
@@ -446,7 +446,7 @@ const activeLineGutterMarker = new class extends GutterMarker {
 
 const activeLineGutterHighlighter = gutterLineClass.compute(["selection"], state => {
   let marks = [], last = -1
-  for (let range of state.selection.ranges) if (range.empty) {
+  for (let range of state.selection.ranges) {
     let linePos = state.doc.lineAt(range.head).from
     if (linePos > last) {
       last = linePos

diff --git a/src/theme.ts b/src/theme.ts
@@ -138,8 +138,8 @@ export const baseTheme = buildTheme("." + baseThemeID, {
     display: "block"
   },
 
-  "&light .cm-activeLine": { backgroundColor: "#f3f9ff" },
-  "&dark .cm-activeLine": { backgroundColor: "#223039" },
+  "&light .cm-activeLine": { backgroundColor: "#cceeff44" },
+  "&dark .cm-activeLine": { backgroundColor: "#99eeff33" },
 
   "&light .cm-specialChar": { color: "red" },
   "&dark .cm-specialChar": { color: "#f78" },