[WIP] Add lineComments CodeMirror extension - lineCommentsExpandedPlugin

Author: VasylMarchuk

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

@@ -0,0 +1,54 @@
+import { Decoration, EditorView, ViewPlugin, ViewUpdate, type DecorationSet } from '@codemirror/view';
+import { RangeSetBuilder, StateEffect } from '@codemirror/state';
+import { expandedLineNumbersCompartment, 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 (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) {
+        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,
+    },
+  );
+}

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

@@ -1,25 +1,25 @@
 import { Decoration, EditorView, WidgetType, type DecorationSet } from '@codemirror/view';
-import { Line, StateEffect, StateField } from '@codemirror/state';
-import { lineDataFacet, expandedLineNumbersFacet, expandedLineNumbersCompartment } from 'codecrafters-frontend/utils/code-mirror-line-comments';
+import { Line, /* StateEffect, */ StateField } from '@codemirror/state';
+import { lineDataFacet /*, expandedLineNumbersFacet, expandedLineNumbersCompartment */ } from 'codecrafters-frontend/utils/code-mirror-line-comments';
 
 class LineCommentsWidget extends WidgetType {
   line: Line;
-  isExpanded: boolean;
+  // isExpanded: boolean;
 
-  constructor(line: Line, isExpanded: boolean = false) {
+  constructor(line: Line /* , isExpanded: boolean = false */) {
     super();
     this.line = line;
-    this.isExpanded = isExpanded;
+    // this.isExpanded = isExpanded;
   }
 
   toDOM(view: EditorView): HTMLElement {
-    const expandedLines = view.state.facet(expandedLineNumbersFacet)[0] || [];
+    // const expandedLines = view.state.facet(expandedLineNumbersFacet)[0] || [];
     const commentsCount = view.state.facet(lineDataFacet)[0]?.dataForLine(this.line.number)?.commentsCount || 0;
     const classNames = ['cm-lineCommentsWidget'];
 
-    if (expandedLines.includes(this.line.number) || this.isExpanded) {
-      classNames.push('cm-lineCommentsWidgetExpanded');
-    }
+    // if (expandedLines.includes(this.line.number) || this.isExpanded) {
+    //   classNames.push('cm-lineCommentsWidgetExpanded');
+    // }
 
     const elem = document.createElement('div');
     elem.className = classNames.join(' ');
@@ -55,15 +55,15 @@ const lineCommentsWidgetStateField = StateField.define<DecorationSet>({
 
     // let newDecorations = decorations.map(transaction.changes);
 
-    for (const effect of transaction.effects) {
-      if (effect instanceof StateEffect && effect.value?.compartment === expandedLineNumbersCompartment) {
-        return this.create(transaction.state);
+    // for (const effect of transaction.effects) {
+    //   if (effect instanceof StateEffect && effect.value?.compartment === expandedLineNumbersCompartment) {
+    //     // return this.create(transaction.state);
 
-        // newDecorations = newDecorations.update({ filter: (pos) => pos !== effect.value.pos }).update({
-        //   add: [lineCommentsWidgetDecoration(transaction.state.doc.lineAt(effect.value.pos))],
-        // });
-      }
-    }
+    //     newDecorations = newDecorations.update({ filter: (pos) => pos !== effect.value.pos }).update({
+    //       add: [lineCommentsWidgetDecoration(transaction.state.doc.lineAt(effect.value.pos))],
+    //     });
+    //   }
+    // }
 
     // return newDecorations;
 
@@ -82,15 +82,17 @@ const lineCommentsWidgetBaseTheme = EditorView.baseTheme({
       backgroundColor: '#009bff40',
       paddingLeft: '1rem',
       marginRight: '-1rem',
+    },
 
-      '&.cm-lineCommentsWidgetExpanded': {
+    '&.cm-lineCommentsExpanded': {
+      '& .cm-lineCommentsWidget': {
         display: 'block',
         backgroundColor: '#009bff80',
       },
+    },
 
-      '& + br': {
-        display: 'none',
-      },
+    '& .cm-lineCommentsWidget + br': {
+      display: 'none',
     },
 
     '& .cm-insertedLine + br': {

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

@@ -1,6 +1,7 @@
-import { Compartment, Facet, StateEffect } from '@codemirror/state';
+import { Compartment, Facet } from '@codemirror/state';
 import { lineCommentsWidget } from 'codecrafters-frontend/utils/code-mirror-line-comments-widget';
 import { lineCommentsGutter } from 'codecrafters-frontend/utils/code-mirror-line-comments-gutter';
+import { lineCommentsExpandedPlugin } from 'codecrafters-frontend/utils/code-mirror-line-comments-expanded-plugin';
 
 export class LineData {
   commentsCount: number;
@@ -30,10 +31,16 @@ export const expandedLineNumbersFacet = Facet.define<number[]>();
 
 export const expandedLineNumbersCompartment = new Compartment();
 
-export const toggleLineCommentsEffect = StateEffect.define<{ pos: number; isExpanded: boolean }>({
-  map: (value, mapping) => ({ pos: mapping.mapPos(value.pos), isExpanded: value.isExpanded }),
-});
+// export const toggleLineCommentsEffect = StateEffect.define<{ pos: number; isExpanded: boolean }>({
+//   map: (value, mapping) => ({ pos: mapping.mapPos(value.pos), isExpanded: value.isExpanded }),
+// });
 
 export function lineComments(lineData: LineDataCollection) {
-  return [lineDataFacet.of(lineData), expandedLineNumbersCompartment.of(expandedLineNumbersFacet.of([])), lineCommentsWidget(), lineCommentsGutter()];
+  return [
+    lineDataFacet.of(lineData),
+    expandedLineNumbersCompartment.of(expandedLineNumbersFacet.of([])),
+    lineCommentsWidget(),
+    lineCommentsGutter(),
+    lineCommentsExpandedPlugin(),
+  ];
 }