Merge pull request #2838 from codecrafters-io/code-mirror/add-highlighted-ranges

VasylMarchuk · web-flow · commit 91326522dec1 · 2025-05-27T21:22:58.000+03:00
Add `highlightedRanges` support to CodeMirror
diff --git a/app/components/code-mirror.hbs b/app/components/code-mirror.hbs
@@ -11,6 +11,7 @@
   {{did-update this.optionDidChange "editable" @editable}}
   {{did-update this.optionDidChange "foldGutter" @foldGutter}}
   {{did-update this.optionDidChange "highlightActiveLine" @highlightActiveLine}}
+  {{did-update this.optionDidChange "highlightedRanges" @highlightedRanges}}
   {{did-update this.optionDidChange "highlightNewlines" @highlightNewlines}}
   {{did-update this.optionDidChange "highlightSelectionMatches" @highlightSelectionMatches}}
   {{did-update this.optionDidChange "highlightSpecialChars" @highlightSpecialChars}}
diff --git a/app/components/code-mirror.ts b/app/components/code-mirror.ts
@@ -39,6 +39,7 @@ import { markdown } from '@codemirror/lang-markdown';
 import { highlightNewlines } from 'codecrafters-frontend/utils/code-mirror-highlight-newlines';
 import { collapseUnchangedGutter } from 'codecrafters-frontend/utils/code-mirror-collapse-unchanged-gutter';
 import { highlightActiveLineGutter as highlightActiveLineGutterRS } from 'codecrafters-frontend/utils/code-mirror-gutter-rs';
+import { highlightRanges } from 'codecrafters-frontend/utils/code-mirror-highlight-ranges';
 
 function generateHTMLElement(src: string): HTMLElement {
   const div = document.createElement('div');
@@ -52,12 +53,17 @@ enum FoldGutterIcon {
   Collapsed = '<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible; cursor: pointer;"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>',
 }
 
+export type LineRange = { startLine: number; endLine: number };
+
 type DocumentUpdateCallback = (newValue: string) => void;
 
-type Argument = boolean | string | number | undefined | Extension | DocumentUpdateCallback;
+type Argument = boolean | string | number | undefined | Extension | DocumentUpdateCallback | LineRange[];
 
 type OptionHandler = (args: Signature['Args']['Named']) => Extension[] | Promise<Extension[]>;
 
+/**
+ * Order of keys in this object matters, do not sort alphabetically
+ */
 const OPTION_HANDLERS: { [key: string]: OptionHandler } = {
   allowMultipleSelections: ({ allowMultipleSelections }) => [EditorState.allowMultipleSelections.of(!!allowMultipleSelections)],
   autocompletion: ({ autocompletion: enabled }) => (enabled ? [autocompletion(), keymap.of(completionKeymap)] : []),
@@ -69,6 +75,7 @@ const OPTION_HANDLERS: { [key: string]: OptionHandler } = {
   editable: ({ editable }) => [EditorView.editable.of(!!editable)],
   highlightActiveLine: ({ highlightActiveLine: enabled }) =>
     enabled ? [highlightActiveLine(), highlightActiveLineGutter(), highlightActiveLineGutterRS()] : [],
+  highlightedRanges: ({ highlightedRanges }) => (highlightedRanges ? highlightRanges(highlightedRanges) : []),
   highlightNewlines: ({ highlightNewlines: enabled }) => (enabled ? [highlightNewlines()] : []),
   highlightSelectionMatches: ({ highlightSelectionMatches: enabled }) => (enabled ? [highlightSelectionMatches()] : []),
   highlightSpecialChars: ({ highlightSpecialChars: enabled }) => (enabled ? [highlightSpecialChars()] : []),
@@ -240,6 +247,10 @@ export interface Signature {
        * Enable inline highlighting of changes in the diff
        */
       highlightChanges?: boolean;
+      /**
+       * Enable highlighting of specified line ranges
+       */
+      highlightedRanges?: LineRange[];
       /**
        * Enable highlighting of new line symbols
        */
diff --git a/app/components/file-contents-card.hbs b/app/components/file-contents-card.hbs
@@ -53,6 +53,7 @@
       @editable={{false}}
       @readOnly={{true}}
       @highlightActiveLine={{false}}
+      @highlightedRanges={{@highlightedRanges}}
       @highlightSelectionMatches={{true}}
       @highlightSpecialChars={{true}}
       @highlightTrailingWhitespace={{true}}
diff --git a/app/components/file-contents-card.ts b/app/components/file-contents-card.ts
@@ -3,6 +3,7 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import type DarkModeService from 'codecrafters-frontend/services/dark-mode';
+import type { LineRange } from 'codecrafters-frontend/components/code-mirror';
 import { codeCraftersDark, codeCraftersLight } from 'codecrafters-frontend/utils/code-mirror-themes';
 
 interface Signature {
@@ -34,6 +35,10 @@ interface Signature {
      * Show a tooltip in the header when collapsible & collapsed
      */
     headerTooltipText?: string;
+    /**
+     * Enable highlighting of specified line ranges
+     */
+    highlightedRanges?: LineRange[];
     /**
      * Scroll the component into view after it's collapsed
      */
diff --git a/app/components/file-diff-card.hbs b/app/components/file-diff-card.hbs
@@ -17,6 +17,7 @@
         @drawSelection={{true}}
         @rectangularSelection={{true}}
         @readOnly={{true}}
+        @highlightedRanges={{@highlightedRanges}}
         @highlightSelectionMatches={{true}}
         @highlightSpecialChars={{true}}
         @theme={{this.codeMirrorTheme}}
diff --git a/app/components/file-diff-card.ts b/app/components/file-diff-card.ts
@@ -1,6 +1,7 @@
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import type DarkModeService from 'codecrafters-frontend/services/dark-mode';
+import type { LineRange } from 'codecrafters-frontend/components/code-mirror';
 import { codeCraftersDark, codeCraftersLight } from 'codecrafters-frontend/utils/code-mirror-themes';
 
 interface Signature {
@@ -20,6 +21,10 @@ interface Signature {
      * Always render CodeMirror/SyntaxHighlightedDiff using Dark Theme
      */
     forceDarkTheme?: boolean;
+    /**
+     * Enable highlighting of specified line ranges
+     */
+    highlightedRanges?: LineRange[];
     /**
      * Override language auto-detected from `filename` and set it manually
      */
diff --git a/app/controllers/demo/code-mirror.ts b/app/controllers/demo/code-mirror.ts
@@ -44,6 +44,7 @@ const OPTION_DEFAULTS = {
   foldGutter: true,
   highlightActiveLine: true,
   highlightChanges: false,
+  highlightedRanges: false,
   highlightNewlines: false,
   highlightSelectionMatches: true,
   highlightSpecialChars: true,
@@ -100,6 +101,7 @@ export default class DemoCodeMirrorController extends Controller {
     'foldGutter',
     'highlightActiveLine',
     'highlightChanges',
+    'highlightedRanges',
     'highlightNewlines',
     'highlightSelectionMatches',
     'highlightSpecialChars',
@@ -152,6 +154,7 @@ export default class DemoCodeMirrorController extends Controller {
   @tracked foldGutter = OPTION_DEFAULTS.foldGutter;
   @tracked highlightActiveLine = OPTION_DEFAULTS.highlightActiveLine;
   @tracked highlightChanges = OPTION_DEFAULTS.highlightChanges;
+  @tracked highlightedRanges = OPTION_DEFAULTS.highlightedRanges;
   @tracked highlightNewlines = OPTION_DEFAULTS.highlightNewlines;
   @tracked highlightSelectionMatches = OPTION_DEFAULTS.highlightSelectionMatches;
   @tracked highlightSpecialChars = OPTION_DEFAULTS.highlightSpecialChars;
diff --git a/app/controllers/demo/file-contents-card.ts b/app/controllers/demo/file-contents-card.ts
@@ -5,6 +5,7 @@ import EXAMPLE_DOCUMENTS, { ExampleDocument } from 'codecrafters-frontend/utils/
 
 const OPTION_DEFAULTS = {
   headerTooltipText: false,
+  highlightedRanges: false,
   isCollapsed: false,
   isCollapsible: false,
   scrollIntoViewOnCollapse: true,
@@ -16,6 +17,7 @@ export default class DemoFileContentsCardController extends Controller {
 
   @tracked documents: ExampleDocument[] = EXAMPLE_DOCUMENTS;
   @tracked headerTooltipText: boolean = OPTION_DEFAULTS.headerTooltipText;
+  @tracked highlightedRanges: boolean = OPTION_DEFAULTS.highlightedRanges;
   @tracked isCollapsed: boolean = OPTION_DEFAULTS.isCollapsed;
   @tracked isCollapsible: boolean = OPTION_DEFAULTS.isCollapsible;
   @tracked scrollIntoViewOnCollapse: boolean = OPTION_DEFAULTS.scrollIntoViewOnCollapse;
diff --git a/app/controllers/demo/file-diff-card.ts b/app/controllers/demo/file-diff-card.ts
@@ -5,6 +5,7 @@ import EXAMPLE_DOCUMENTS, { DiffBasedExampleDocument } from 'codecrafters-fronte
 
 const OPTION_DEFAULTS = {
   forceDarkTheme: false,
+  highlightedRanges: false,
   selectedDocumentIndex: 1,
   useCodeMirror: true,
 };
@@ -13,6 +14,7 @@ export default class DemoFileDiffCardController extends Controller {
   @tracked documents: DiffBasedExampleDocument[] = EXAMPLE_DOCUMENTS;
 
   @tracked forceDarkTheme: boolean = OPTION_DEFAULTS.forceDarkTheme;
+  @tracked highlightedRanges: boolean = OPTION_DEFAULTS.highlightedRanges;
   @tracked selectedDocumentIndex: number = OPTION_DEFAULTS.selectedDocumentIndex;
   @tracked useCodeMirror: boolean = OPTION_DEFAULTS.useCodeMirror;
 
diff --git a/app/routes/demo/code-mirror.ts b/app/routes/demo/code-mirror.ts
@@ -15,6 +15,7 @@ const QUERY_PARAMS = [
   'filename',
   'foldGutter',
   'highlightActiveLine',
+  'highlightedRanges',
   'highlightChanges',
   'highlightNewlines',
   'highlightSelectionMatches',
diff --git a/app/routes/demo/file-contents-card.ts b/app/routes/demo/file-contents-card.ts
@@ -1,6 +1,14 @@
 import Route from '@ember/routing/route';
 
-const QUERY_PARAMS = ['foldGutter', 'headerTooltipText', 'isCollapsed', 'isCollapsible', 'scrollIntoViewOnCollapse', 'selectedDocumentIndex'];
+const QUERY_PARAMS = [
+  'foldGutter',
+  'headerTooltipText',
+  'highlightedRanges',
+  'isCollapsed',
+  'isCollapsible',
+  'scrollIntoViewOnCollapse',
+  'selectedDocumentIndex',
+];
 
 interface QueryParamOptions {
   [key: string]: {
diff --git a/app/routes/demo/file-diff-card.ts b/app/routes/demo/file-diff-card.ts
@@ -1,6 +1,6 @@
 import Route from '@ember/routing/route';
 
-const QUERY_PARAMS = ['forceDarkTheme', 'selectedDocumentIndex', 'useCodeMirror'];
+const QUERY_PARAMS = ['forceDarkTheme', 'highlightedRanges', 'selectedDocumentIndex', 'useCodeMirror'];
 
 interface QueryParamOptions {
   [key: string]: {
diff --git a/app/templates/demo/code-mirror.hbs b/app/templates/demo/code-mirror.hbs
@@ -99,6 +99,10 @@
         <Input @type="checkbox" @checked={{this.filename}} disabled={{eq this.language true}} />
         <span class="ml-2 {{if this.language 'text-gray-300'}}">filename</span>
       </label>
+      <label class="{{labelClasses}}" title="Enable highlighting of specified line ranges">
+        <Input @type="checkbox" @checked={{this.highlightedRanges}} />
+        <span class="ml-2">highlightedRanges</span>
+      </label>
     </codemirror-options-left>
     <codemirror-options-right class="flex flex-wrap">
       <label class="{{labelClasses}}" title="Placeholder text to show when document is empty or not passed">
@@ -108,7 +112,7 @@
     </codemirror-options-right>
   </codemirror-options>
 
-  <codemirror-options class="{{groupClasses}} border-dotted">
+  <codemirror-options class="{{groupClasses}} border-dotted flex-nowrap">
     <codemirror-options-left class="flex flex-grow flex-wrap">
       <label class="{{labelClasses}}" title="Enable unified diff editor by passing the original document">
         <Input @type="checkbox" @checked={{this.originalDocument}} />
@@ -122,8 +126,12 @@
         <Input @type="checkbox" @checked={{this.collapseUnchanged}} disabled={{not this.originalDocument}} />
         <span class="ml-2 {{unless this.originalDocument 'text-gray-300'}}">collapseUnchanged</span>
       </label>
+      <label class="{{labelClasses}}" title="Display chunks with only limited inline changes inline in the code">
+        <Input @type="checkbox" @checked={{this.allowInlineDiffs}} disabled={{not this.originalDocument}} />
+        <span class="ml-2 {{unless this.originalDocument 'text-gray-300'}}">allowInlineDiffs</span>
+      </label>
     </codemirror-options-left>
-    <codemirror-options-right class="flex flex-wrap">
+    <codemirror-options-right class="flex flex-wrap justify-end h-[20px]">
       <label class="{{labelClasses}}" title="Number of lines to leave visible after/before a change before collapsing unchanged lines">
         {{#let (not (and this.originalDocument this.collapseUnchanged)) as |isDisabled|}}
           <Input @type="checkbox" @checked={{this.unchangedMargin}} disabled={{isDisabled}} />
@@ -272,10 +280,6 @@
       <Input @type="checkbox" @checked={{this.syntaxHighlightDeletions}} disabled={{or (not this.originalDocument) (not this.syntaxHighlighting)}} />
       <span class="ml-2 {{unless (and this.originalDocument this.syntaxHighlighting) 'text-gray-300'}}">syntaxHighlightDeletions</span>
     </label>
-    <label class="{{labelClasses}}" title="Display chunks with only limited inline changes inline in the code">
-      <Input @type="checkbox" @checked={{this.allowInlineDiffs}} disabled={{not this.originalDocument}} />
-      <span class="ml-2 {{unless this.originalDocument 'text-gray-300'}}">allowInlineDiffs</span>
-    </label>
   </codemirror-options>
 
   <codemirror-options class="{{groupClasses}}">
@@ -337,6 +341,7 @@
   @foldGutter={{this.foldGutter}}
   @highlightActiveLine={{this.highlightActiveLine}}
   @highlightChanges={{this.highlightChanges}}
+  @highlightedRanges={{if this.highlightedRanges this.selectedDocument.highlightedRanges}}
   @highlightNewlines={{this.highlightNewlines}}
   @highlightSelectionMatches={{this.highlightSelectionMatches}}
   @highlightSpecialChars={{this.highlightSpecialChars}}
diff --git a/app/templates/demo/file-contents-card.hbs b/app/templates/demo/file-contents-card.hbs
@@ -29,6 +29,10 @@
         <Input @type="checkbox" @checked={{this.headerTooltipText}} disabled={{not this.isCollapsible}} />
         <span class="ml-2 {{unless this.isCollapsible 'text-gray-300'}}">headerTooltipText</span>
       </label>
+      <label class="{{labelClasses}}" title="Enable highlighting of specified line ranges">
+        <Input @type="checkbox" @checked={{this.highlightedRanges}} />
+        <span class="ml-2">highlightedRanges</span>
+      </label>
     </component-options-right>
   </component-options>
 {{/let}}
@@ -41,6 +45,7 @@
   @isCollapsible={{this.isCollapsible}}
   @scrollIntoViewOnCollapse={{this.scrollIntoViewOnCollapse}}
   @headerTooltipText={{if this.headerTooltipText "Example tooltip message"}}
+  @highlightedRanges={{if this.highlightedRanges this.selectedDocument.highlightedRanges}}
   @onExpand={{fn (mut this.isCollapsed) false}}
   @onCollapse={{fn (mut this.isCollapsed) true}}
   class="mt-4"
diff --git a/app/templates/demo/file-diff-card.hbs b/app/templates/demo/file-diff-card.hbs
@@ -26,6 +26,10 @@ py-2"
         <Input @type="checkbox" @checked={{this.forceDarkTheme}} />
         <span class="ml-2">forceDarkTheme</span>
       </label>
+      <label class="{{labelClasses}}" title="Enable highlighting of specified line ranges">
+        <Input @type="checkbox" @checked={{this.highlightedRanges}} />
+        <span class="ml-2">highlightedRanges</span>
+      </label>
     </component-options-right>
   </component-options>
 {{/let}}
@@ -36,6 +40,7 @@ py-2"
   @filename={{this.selectedDocument.filename}}
   @language={{this.selectedDocument.language}}
   @forceDarkTheme={{this.forceDarkTheme}}
+  @highlightedRanges={{if this.highlightedRanges this.selectedDocument.highlightedRanges}}
   class="mt-4 {{if this.forceDarkTheme 'dark'}}"
 />
 
diff --git a/app/utils/code-mirror-documents.ts b/app/utils/code-mirror-documents.ts
diff --git a/app/utils/code-mirror-highlight-ranges.ts b/app/utils/code-mirror-highlight-ranges.ts
diff --git a/app/utils/code-mirror-themes.ts b/app/utils/code-mirror-themes.ts
diff --git a/tests/integration/components/code-mirror-test.js b/tests/integration/components/code-mirror-test.js
