Add a new lineComments extension for CodeMirror

app/components/code-mirror.hbs

@@ -1,5 +1,6 @@
 <code-mirror
   {{did-insert this.renderEditor}}
+  {{! Do not sort did-updates alphabetically, their order matters }}
   {{did-update this.documentDidChange @document}}
   {{did-update this.optionDidChange "allowMultipleSelections" @allowMultipleSelections}}
   {{did-update this.optionDidChange "autocompletion" @autocompletion}}
@@ -24,9 +25,11 @@
   {{did-update this.optionDidChange "indentWithTab" @indentWithTab}}
   {{did-update this.optionDidChange "languageOrFilename" @filename}}
   {{did-update this.optionDidChange "languageOrFilename" @language}}
+  {{did-update this.optionDidChange "lineCommentsOrCommentsRelatedOption" (array @lineComments @lineData @readOnly)}}
   {{did-update this.optionDidChange "lineNumbers" @lineNumbers}}
   {{did-update this.optionDidChange "lineSeparator" @lineSeparator}}
   {{did-update this.optionDidChange "lineWrapping" @lineWrapping}}
+  {{did-update this.optionDidChange "syntaxHighlighting" @syntaxHighlighting}}
   {{did-update
     this.optionDidChange
     "originalDocumentOrDiffRelatedOption"
@@ -37,6 +40,7 @@
       @collapseUnchanged
       @highlightChanges
       @syntaxHighlightDeletions
+      @syntaxHighlighting
       @unchangedMargin
       @unchangedMinSize
       @allowInlineDiffs
@@ -46,7 +50,6 @@
   {{did-update this.optionDidChange "readOnly" @readOnly}}
   {{did-update this.optionDidChange "rectangularSelection" @rectangularSelection}}
   {{did-update this.optionDidChange "scrollPastEnd" @scrollPastEnd}}
-  {{did-update this.optionDidChange "syntaxHighlighting" @syntaxHighlighting}}
   {{did-update this.optionDidChange "tabSize" @tabSize}}
   {{did-update this.optionDidChange "theme" @theme}}
   data-test-code-mirror-component

app/components/code-mirror.ts

@@ -42,6 +42,7 @@ import { collapseRanges } from 'codecrafters-frontend/utils/code-mirror-collapse
 import { collapseRangesGutter } from 'codecrafters-frontend/utils/code-mirror-collapse-ranges-gutter';
 import { collapseUnchanged } from 'codecrafters-frontend/utils/code-mirror-collapse-unchanged';
 import { collapseUnchangedGutter } from 'codecrafters-frontend/utils/code-mirror-collapse-unchanged-gutter';
+import { lineComments, type LineDataCollection } from 'codecrafters-frontend/utils/code-mirror-line-comments';
 
 function generateHTMLElement(src: string): HTMLElement {
   const div = document.createElement('div');
@@ -59,7 +60,7 @@ export type LineRange = { startLine: number; endLine: number };
 
 type DocumentUpdateCallback = (newValue: string) => void;
 
-type Argument = boolean | string | number | undefined | Extension | DocumentUpdateCallback | LineRange[];
+type Argument = boolean | string | number | undefined | Extension | DocumentUpdateCallback | LineRange[] | LineDataCollection;
 
 type OptionHandler = (args: Signature['Args']['Named']) => Extension[] | Promise<Extension[]>;
 
@@ -86,6 +87,8 @@ const OPTION_HANDLERS: { [key: string]: OptionHandler } = {
   indentOnInput: ({ indentOnInput: enabled }) => (enabled ? [indentOnInput()] : []),
   indentUnit: ({ indentUnit: indentUnitText }) => (indentUnitText !== undefined ? [indentUnit.of(indentUnitText)] : []),
   indentWithTab: ({ indentWithTab: enabled }) => (enabled ? [keymap.of([indentWithTab])] : []),
+  lineCommentsOrCommentsRelatedOption: ({ lineComments: enabled, lineData, readOnly }) =>
+    enabled && lineData && readOnly ? [lineComments(lineData)] : [],
   lineNumbers: ({ lineNumbers: enabled }) => (enabled ? [lineNumbers()] : []),
   foldGutter: ({ foldGutter: enabled }) =>
     enabled
@@ -270,6 +273,14 @@ export interface Signature {
        * Explicitly pass a language to the editor
        */
       language?: string;
+      /**
+       * Enable line comments (disabled when document is not read-only)
+       */
+      lineComments?: boolean;
+      /**
+       * Line data containing comments counts or other line-related metadata
+       */
+      lineData?: LineDataCollection;
       /**
        * Enable the line numbers gutter
        */
@@ -390,17 +401,10 @@ export default class CodeMirrorComponent extends Component<Signature> {
       return;
     }
 
-    // When originalDocument changes - completely unload the diff compartment to avoid any side-effects
-    if (optionName === 'originalDocumentOrDiffRelatedOption') {
-      this.#updateRenderedView({
-        effects: this.#resetCompartment('originalDocumentOrDiffRelatedOption'),
-      });
-    }
-
-    // When collapsedRanges changes - completely unload the collapsedRanges compartment to avoid any side-effects
-    if (optionName === 'collapsedRanges') {
+    // These options need to be reset after changing, to avoid any side-effects
+    if (['collapsedRanges', 'lineCommentsOrCommentsRelatedOption', 'originalDocumentOrDiffRelatedOption'].includes(optionName)) {
       this.#updateRenderedView({
-        effects: this.#resetCompartment('collapsedRanges'),
+        effects: this.#resetCompartment(optionName),
       });
     }
 
@@ -409,16 +413,6 @@ export default class CodeMirrorComponent extends Component<Signature> {
       effects: await this.#updateCompartment(optionName),
     });
 
-    // When syntaxHighlighting changes - reload the diff compartment to also re-configure syntaxHighlightDeletions
-    if (optionName === 'syntaxHighlighting') {
-      this.#updateRenderedView({
-        effects: this.#resetCompartment('originalDocumentOrDiffRelatedOption'),
-      });
-      this.#updateRenderedView({
-        effects: await this.#updateCompartment('originalDocumentOrDiffRelatedOption'),
-      });
-    }
-
     // When lineSeparator changes - completely reload the document to avoid any side-effects
     if (optionName === 'lineSeparator') {
       this.#updateRenderedView(

app/controllers/demo/code-mirror.ts

@@ -57,6 +57,7 @@ const OPTION_DEFAULTS = {
   indentWithTab: true,
   language: true,
   lineNumbers: true,
+  lineComments: false,
   lineSeparator: true,
   lineWrapping: true,
   maxHeight: true,
@@ -114,6 +115,7 @@ export default class DemoCodeMirrorController extends Controller {
     'indentUnit',
     'indentWithTab',
     'language',
+    'lineComments',
     'lineNumbers',
     'lineSeparator',
     'lineWrapping',
@@ -176,6 +178,7 @@ export default class DemoCodeMirrorController extends Controller {
   @tracked indentUnit = OPTION_DEFAULTS.indentUnit;
   @tracked indentWithTab = OPTION_DEFAULTS.indentWithTab;
   @tracked language = OPTION_DEFAULTS.language;
+  @tracked lineComments = OPTION_DEFAULTS.lineComments;
   @tracked lineNumbers = OPTION_DEFAULTS.lineNumbers;
   @tracked lineSeparator = OPTION_DEFAULTS.lineSeparator;
   @tracked lineSeparators = LINE_SEPARATORS;

app/routes/demo/code-mirror.ts

@@ -28,6 +28,7 @@ const QUERY_PARAMS = [
   'indentUnit',
   'indentWithTab',
   'language',
+  'lineComments',
   'lineNumbers',
   'lineSeparator',
   'lineWrapping',

app/templates/demo/code-mirror.hbs

@@ -179,6 +179,12 @@
         <Input @type="checkbox" @checked={{this.foldGutter}} />
         <span class="ml-2">foldGutter</span>
       </label>
+      <label class="{{labelClasses}}" title="Enable line comments (disabled when document is not read-only)">
+        <Input @type="checkbox" @checked={{this.lineComments}} disabled={{not this.readOnly}} />
+        <span class="ml-2 {{unless this.readOnly 'text-gray-300'}}">lineComments</span>
+      </label>
+    </codemirror-options-left>
+    <codemirror-options-right class="flex flex-wrap">
       <label class="{{labelClasses}}" title="Enable visual line wrapping for lines exceeding editor width">
         <Input @type="checkbox" @checked={{this.lineWrapping}} />
         <span class="ml-2">lineWrapping</span>
@@ -187,8 +193,6 @@
         <Input @type="checkbox" @checked={{this.scrollPastEnd}} />
         <span class="ml-2">scrollPastEnd</span>
       </label>
-    </codemirror-options-left>
-    <codemirror-options-right class="flex flex-wrap">
       <label class="{{labelClasses}}" title="Limit maximum height of the component's element">
         <Input @type="checkbox" @checked={{this.maxHeight}} />
         <span class="ml-2">maxHeight</span>
@@ -345,6 +349,8 @@
   @indentUnit={{if this.indentUnit this.selectedIndentUnit.symbol}}
   @indentWithTab={{this.indentWithTab}}
   @language={{if this.language this.selectedDocument.language}}
+  @lineComments={{this.lineComments}}
+  @lineData={{if this.lineComments this.selectedDocument.lineData}}
   @lineNumbers={{this.lineNumbers}}
   @lineSeparator={{if this.lineSeparator this.selectedLineSeparator.symbol}}
   @lineWrapping={{this.lineWrapping}}

app/utils/code-mirror-documents.ts

@@ -1,6 +1,36 @@
 import { tracked } from '@glimmer/tracking';
 import type { LineRange } from 'codecrafters-frontend/components/code-mirror';
 import parseDiffAsDocument from 'codecrafters-frontend/utils/parse-diff-as-document';
+import { LineData, LineDataCollection } from 'codecrafters-frontend/utils/code-mirror-line-comments';
+
+function generateRandomLineData(linesCount = 0) {
+  function getRandomInt(inclusiveMin: number, exclusiveMax: number) {
+    const minCeiled = Math.ceil(inclusiveMin);
+    const maxFloored = Math.floor(exclusiveMax);
+
+    return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
+  }
+
+  const lineData = Array.from({ length: linesCount }).map(function (_v, lineNumber) {
+    const rnd = Math.random();
+
+    let commentsCount;
+
+    if (rnd < 0.05) {
+      commentsCount = getRandomInt(100, 1000);
+    } else if (rnd < 0.1) {
+      commentsCount = getRandomInt(10, 100);
+    } else if (rnd < 0.8) {
+      commentsCount = 0;
+    } else {
+      commentsCount = getRandomInt(1, 10);
+    }
+
+    return new LineData(lineNumber + 1, commentsCount);
+  });
+
+  return new LineDataCollection(lineData);
+}
 
 export class ExampleDocument {
   @tracked document: string = '';
@@ -9,6 +39,7 @@ export class ExampleDocument {
   @tracked language: string;
   @tracked highlightedRanges: LineRange[];
   @tracked collapsedRanges: LineRange[];
+  @tracked lineData?: LineDataCollection;
 
   constructor({
     document = '',
@@ -31,6 +62,8 @@ export class ExampleDocument {
     this.language = language;
     this.highlightedRanges = highlightedRanges;
     this.collapsedRanges = collapsedRanges;
+
+    this.lineData = generateRandomLineData(document?.split('\n').length);
   }
 
   static createEmpty() {

app/utils/code-mirror-line-comments-expanded-plugin.ts

@@ -0,0 +1,64 @@
+import { Decoration, EditorView, ViewPlugin, ViewUpdate, type DecorationSet } from '@codemirror/view';
+import { RangeSetBuilder } from '@codemirror/state';
+import { expandedLineNumbersFacet } from 'codecrafters-frontend/utils/code-mirror-line-comments';
+
+const lineCommentsExpandedDecoration = Decoration.line({
+  attributes: { class: 'cm-lineCommentsExpanded' },
+});
+
+function lineCommentsExpandedDecorations(view: EditorView) {
+  const expandedLines = view.state.facet(expandedLineNumbersFacet)[0] || [];
+  const builder = new RangeSetBuilder<Decoration>();
+
+  // for (let i = 0; i < view.state.doc.lines; i++) {
+  //   const line = view.state.doc.line(i + 1);
+
+  //   if (expandedLines.includes(line.number)) {
+  //     builder.add(line.from, line.from, lineCommentsExpandedDecoration);
+  //   }
+  // }
+
+  for (const { from, to } of view.visibleRanges) {
+    for (let pos = from; pos <= to; ) {
+      const line = view.state.doc.lineAt(pos);
+
+      if (expandedLines.includes(line.number)) {
+        builder.add(line.from, line.from, lineCommentsExpandedDecoration);
+      }
+
+      pos = line.to + 1;
+    }
+  }
+
+  return builder.finish();
+}
+
+export function lineCommentsExpandedPlugin() {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = lineCommentsExpandedDecorations(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.decorations = lineCommentsExpandedDecorations(update.view);
+
+        // if (update.transactions) {
+        //   for (const tr of update.transactions) {
+        //     for (const effect of tr.effects) {
+        //       if (effect instanceof StateEffect && effect.value?.compartment === expandedLineNumbersCompartment) {
+        //         this.decorations = lineCommentsExpandedDecorations(update.view);
+        //         break;
+        //       }
+        //     }
+        //   }
+        // }
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  );
+}