Highlight active line

Author: hasparus

src/components/index-page/how-it-works/how-it-works-list-item.tsx

@@ -13,7 +13,7 @@ export function HowItWorksListItem({
         {text}
         {icon}
       </div>
-      <div className="mt-px flex-1 bg-neu-0 text-sm/[21px] [--cm-background:transparent] md:pl-2 md:[&_:is(pre,.cm-content)]:!pt-5 max-md:[&_code>span]:!pl-0 [&_pre]:border-none [&_pre]:ring-0">
+      <div className="mt-px flex-1 bg-neu-0 text-sm/[21px] [--cm-background:transparent] md:[&_:is(.cm-line,.nextra-code>span)]:!pl-5 md:[&_:is(pre,.cm-content)]:!pt-5 max-md:[&_code>span]:!pl-0 [&_pre]:border-none [&_pre]:ring-0">
         {code}
       </div>
     </li>

src/components/index-page/how-it-works/index.tsx

@@ -35,6 +35,7 @@ export function HowItWorks() {
       <SectionLabel className="mb-6">How it works</SectionLabel>
       <h2 className="typography-h2 mb-6 lg:mb-16">A GraphQL Query</h2>
       <div className="relative">
+        {/* eslint-disable-next-line tailwindcss/no-custom-classname*/}
         <ol className="gql-radial-gradient list-none gap-px max-md:bg-gradient-to-r max-md:from-transparent max-md:via-neu-400 max-md:to-transparent lg:grid lg:grid-cols-3">
           <HowItWorksListItem
             text="Describe your data"
@@ -53,7 +54,7 @@ export function HowItWorks() {
         {inView && (
           <ol
             // this is rendered *on top* of the static version to avoid layout shift
-            className="pointer-events-none absolute inset-0 list-none gap-px *:pointer-events-auto lg:grid lg:grid-cols-3 lg:[&>:first-child]:col-start-2"
+            className="pointer-events-none absolute inset-0 list-none gap-px [counter-set:list-item_1] *:pointer-events-auto lg:grid lg:grid-cols-3 lg:[&>:first-child]:col-start-2"
           >
             <InteractiveEditor />
           </ol>

src/components/interactive-code-block/query-editor.tsx

@@ -1,5 +1,5 @@
 import { Component } from "react"
-import { EditorView, keymap } from "@codemirror/view"
+import { EditorView, keymap, highlightActiveLine } from "@codemirror/view"
 import { EditorState } from "@codemirror/state"
 import { history, historyKeymap, defaultKeymap } from "@codemirror/commands"
 import { bracketMatching } from "@codemirror/language"
@@ -76,6 +76,7 @@ export class QueryEditor extends Component<QueryEditorProps> {
         history(),
         closeBrackets(),
         bracketMatching(),
+        highlightActiveLine(),
         keymap.of([...historyKeymap, ...completionKeymap, ...defaultKeymap]),
         runQueryBinding,
         codeMirrorThemeExtension,

src/components/interactive-code-block/result-viewer.tsx

@@ -1,5 +1,5 @@
 import { Component } from "react"
-import { EditorView } from "@codemirror/view"
+import { EditorView, highlightActiveLine } from "@codemirror/view"
 import { EditorState } from "@codemirror/state"
 // todo: perhaps custom grammar to match the shiki highlighting?
 import { json } from "@codemirror/lang-json"
@@ -36,6 +36,7 @@ export class ResultViewer extends Component<ResultViewerProps> {
         EditorState.readOnly.of(true),
         json(),
         codeMirrorThemeExtension,
+        highlightActiveLine(),
       ],
     })
 

src/components/interactive-code-block/syntax-highlighting.css

@@ -298,12 +298,16 @@
 }
 
 /* Active line */
-.cm-activeLine {
-  background-color: rgba(0, 0, 0, 0.05);
+.cm-editor:not(.cm-focused) .cm-activeLine {
+  background: none;
 }
 
-.dark .cm-activeLine {
-  background-color: rgba(255, 255, 255, 0.05);
+.cm-focused .cm-activeLine {
+  background-color: hsl(var(--color-neu-100) / 0.575);
+}
+
+.dark .cm-focused .cm-activeLine {
+  background-color: hsl(var(--color-neu-500) / 0.06);
 }
 
 .cm-searchMatch {

src/components/interactive-code-block/variable-editor.tsx

@@ -1,5 +1,5 @@
 import { Component } from "react"
-import { EditorView } from "@codemirror/view"
+import { EditorView, highlightActiveLine } from "@codemirror/view"
 import { EditorState } from "@codemirror/state"
 import { json } from "@codemirror/lang-json"
 import { history } from "@codemirror/commands"
@@ -48,6 +48,7 @@ export class VariableEditor extends Component<VariableEditorProps> {
       extensions: [
         history(),
         json(),
+        highlightActiveLine(),
         codeMirrorThemeExtension,
         EditorView.updateListener.of(update => {
           if (update.docChanged && !this.ignoreChangeEvent) {