[WIP] Add lineComments CodeMirror extension - external comments

Author: VasylMarchuk

app/components/code-mirror.hbs

@@ -22,7 +22,7 @@
   {{did-update this.optionDidChange "indentWithTab" @indentWithTab}}
   {{did-update this.optionDidChange "languageOrFilename" @filename}}
   {{did-update this.optionDidChange "languageOrFilename" @language}}
-  {{did-update this.optionDidChange "lineComments" @lineComments}}
+  {{did-update this.optionDidChange "lineCommentsOrComments" (array @comments @lineComments)}}
   {{did-update this.optionDidChange "lineNumbers" @lineNumbers}}
   {{did-update this.optionDidChange "lineSeparator" @lineSeparator}}
   {{did-update this.optionDidChange "lineWrapping" @lineWrapping}}

app/components/code-mirror.ts

@@ -38,7 +38,7 @@ import { languages } from '@codemirror/language-data';
 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 { lineComments } from 'codecrafters-frontend/utils/code-mirror-line-comments';
+import { lineComments, type LineCommentsCollection } from 'codecrafters-frontend/utils/code-mirror-line-comments';
 
 function generateHTMLElement(src: string): HTMLElement {
   const div = document.createElement('div');
@@ -54,7 +54,7 @@ enum FoldGutterIcon {
 
 type DocumentUpdateCallback = (newValue: string) => void;
 
-type Argument = boolean | string | number | undefined | Extension | DocumentUpdateCallback;
+type Argument = boolean | string | number | undefined | Extension | DocumentUpdateCallback | LineCommentsCollection;
 
 type OptionHandler = (args: Signature['Args']['Named']) => Extension[] | Promise<Extension[]>;
 
@@ -77,7 +77,7 @@ 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])] : []),
-  lineComments: ({ lineComments: enabled }) => (enabled ? [lineComments()] : []),
+  lineCommentsOrComments: ({ comments = [], lineComments: enabled }) => (enabled ? [lineComments(comments)] : []),
   lineNumbers: ({ lineNumbers: enabled }) => (enabled ? [lineNumbers()] : []),
   foldGutter: ({ foldGutter: enabled }) =>
     enabled
@@ -202,6 +202,10 @@ export interface Signature {
        * Enable highlighting of matching brackets
        */
       bracketMatching?: boolean;
+      /**
+       * Comments to show for each line in the editor, if `lineComments` are enabled
+       */
+      comments?: LineCommentsCollection;
       /**
        * Automatically close brackets when typing
        */

app/controllers/demo/code-mirror.ts

@@ -6,6 +6,36 @@ import { type Extension } from '@codemirror/state';
 import type DarkModeService from 'codecrafters-frontend/services/dark-mode';
 import { codeCraftersDark, codeCraftersLight } from 'codecrafters-frontend/utils/code-mirror-themes';
 import EXAMPLE_DOCUMENTS, { ExampleDocument } from 'codecrafters-frontend/utils/code-mirror-documents';
+import { LineComment } from 'codecrafters-frontend/utils/code-mirror-line-comments';
+
+function getRandomInt(inclusiveMin: number, exclusiveMax: number) {
+  const minCeiled = Math.ceil(inclusiveMin);
+  const maxFloored = Math.floor(exclusiveMax);
+
+  return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
+}
+
+function generateRandomComments(linesCount = 0) {
+  return 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 Array.from<string>({ length: commentsCount }).map(
+      (_v, index) => new LineComment({ lineNumber, author: 'Darth Programmius', text: `Comment #${index}` }),
+    );
+  });
+}
 
 const THEME_EXTENSIONS: {
   [key: string]: Extension;
@@ -200,6 +230,10 @@ export default class DemoCodeMirrorController extends Controller {
     return this.documents[this.selectedDocumentIndex] || ExampleDocument.createEmpty();
   }
 
+  get selectedDocumentComments() {
+    return generateRandomComments(this.selectedDocument.document.split(/$/gm).length);
+  }
+
   get selectedIndentUnit() {
     return this.indentUnits[this.selectedIndentUnitIndex];
   }

app/templates/demo/code-mirror.hbs

@@ -344,6 +344,7 @@
   @history={{this.history}}
   @indentOnInput={{this.indentOnInput}}
   @indentWithTab={{this.indentWithTab}}
+  @comments={{if this.lineComments this.selectedDocumentComments}}
   @lineComments={{this.lineComments}}
   @lineNumbers={{this.lineNumbers}}
   @lineWrapping={{this.lineWrapping}}

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

@@ -6,38 +6,9 @@ import {
   highlightActiveLineGutter as highlightActiveLineGutterRS,
 } from 'codecrafters-frontend/utils/code-mirror-gutter-rs';
 
-function getRandomInt(inclusiveMin: number, exclusiveMax: number) {
-  const minCeiled = Math.ceil(inclusiveMin);
-  const maxFloored = Math.floor(exclusiveMax);
+export type LineCommentsCollection = (undefined | LineComment[])[];
 
-  return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
-}
-
-function generateRandomComments(linesCount = 0) {
-  return 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 Array.from<string>({ length: commentsCount }).map(
-      (_v, index) => new LineComment({ lineNumber, author: 'Darth Programmius', text: `Comment #${index}` }),
-    );
-  });
-}
-
-type LineCommentsCollection = (undefined | LineComment[])[];
-
-class LineComment {
+export class LineComment {
   lineNumber: number;
   text: string;
   author: string;
@@ -143,9 +114,9 @@ class CommentButtonGutterMarker extends GutterMarkerRS {
   }
 }
 
-export function lineComments() {
+export function lineComments(comments: LineCommentsCollection) {
   return [
-    lineCommentsFacet.compute(['doc'], (state) => generateRandomComments(state.doc.lines)),
+    lineCommentsFacet.of(comments),
 
     lineCommentsStateField,