Highlight active line (#2501)

assets/js/hooks/cell_editor/live_editor.js

@@ -53,6 +53,7 @@ import { languages } from "./live_editor/codemirror/languages";
 import { exitMulticursor } from "./live_editor/codemirror/commands";
 import { highlight } from "./live_editor/highlight";
 import { ancestorNode, closestNode } from "./live_editor/codemirror/tree_utils";
+import { selectingClass } from "./live_editor/codemirror/selecting_class";
 
 /**
  * Mounts cell source editor with real-time collaboration mechanism.
@@ -298,6 +299,7 @@ export default class LiveEditor {
         drawSelection(),
         dropCursor(),
         rectangularSelection(),
+        selectingClass(),
         crosshairCursor(),
         EditorState.allowMultipleSelections.of(true),
         bracketMatching(),

assets/js/hooks/cell_editor/live_editor/codemirror/selecting_class.js

@@ -0,0 +1,17 @@
+import { EditorView } from "@codemirror/view";
+
+const attributesFacet = EditorView.editorAttributes.compute(
+  ["selection"],
+  (state) => {
+    const allRangesEmpty = state.selection.ranges.every((range) => range.empty);
+    return allRangesEmpty ? {} : { class: "cm-selecting" };
+  },
+);
+
+/**
+ * Returns an extension that adds `cm-selecting` class to the root
+ * element, whenever the editor has a non-empty selection range.
+ */
+export function selectingClass() {
+  return [attributesFacet];
+}

assets/js/hooks/cell_editor/live_editor/codemirror/theme.js

@@ -64,6 +64,10 @@ function buildEditorTheme(colors, { dark }) {
         backgroundColor: "transparent",
       },
 
+      "&.cm-focused:not(.cm-selecting) .cm-activeLine": {
+        backgroundColor: colors.activeLine,
+      },
+
       ".cm-cursor, .cm-dropCursor": {
         borderLeft: "1px solid",
         borderRight: "1px solid",
@@ -103,6 +107,10 @@ function buildEditorTheme(colors, { dark }) {
         backgroundColor: "transparent",
       },
 
+      "&.cm-focused:not(.cm-selecting) .cm-gutters .cm-activeLineGutter": {
+        backgroundColor: colors.activeLine,
+      },
+
       ".cm-tooltip": {
         backgroundColor: colors.backgroundLighter,
         boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.2)",
@@ -516,6 +524,7 @@ const editorTheme = buildEditorTheme(
     backgroundLightest: "#454a56",
     border: "#363c46",
     cursor: "#73ade8",
+    activeLine: "#2d323b",
     selectionBackground: "#394c5f",
     inactiveSelectionBackground: "#29333d",
     selectionMatchBackground: "#343f4d",
@@ -553,6 +562,7 @@ const lightEditorTheme = buildEditorTheme(
     backgroundLightest: "#cacaca",
     border: "#dfdfe0",
     cursor: "#5c79e2",
+    activeLine: "#efeff0",
     selectionBackground: "#d4dbf4",
     inactiveSelectionBackground: "#ebeef9",
     selectionMatchBackground: "#d3d5e1",