Merge pull request #2561 from codecrafters-io/code-mirror/right-side-gutter

Add a right-side gutter CodeMirror extension

Author: VasylMarchuk

.prettierignore

@@ -21,3 +21,6 @@
 # index.html ends up weirdly formatted
 /app/index.html
 /tests/index.html
+
+# code-mirror-gutter-rs is cloned from @codemirror/view
+/app/utils/code-mirror-gutter-rs.ts

app/components/code-mirror.ts

@@ -38,6 +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 { highlightActiveLineGutter as highlightActiveLineGutterRS } from 'codecrafters-frontend/utils/code-mirror-gutter-rs';
 
 function generateHTMLElement(src: string): HTMLElement {
   const div = document.createElement('div');
@@ -66,7 +67,8 @@ const OPTION_HANDLERS: { [key: string]: OptionHandler } = {
   drawSelection: ({ drawSelection: enabled }) => (enabled ? [drawSelection()] : []),
   dropCursor: ({ dropCursor: enabled }) => (enabled ? [dropCursor()] : []),
   editable: ({ editable }) => [EditorView.editable.of(!!editable)],
-  highlightActiveLine: ({ highlightActiveLine: enabled }) => (enabled ? [highlightActiveLine(), highlightActiveLineGutter()] : []),
+  highlightActiveLine: ({ highlightActiveLine: enabled }) =>
+    enabled ? [highlightActiveLine(), highlightActiveLineGutter(), highlightActiveLineGutterRS()] : [],
   highlightNewlines: ({ highlightNewlines: enabled }) => (enabled ? [highlightNewlines()] : []),
   highlightSelectionMatches: ({ highlightSelectionMatches: enabled }) => (enabled ? [highlightSelectionMatches()] : []),
   highlightSpecialChars: ({ highlightSpecialChars: enabled }) => (enabled ? [highlightSpecialChars()] : []),

app/utils/code-mirror-collapse-unchanged-gutter.ts

@@ -1,5 +1,6 @@
 import { BlockInfo, EditorView, gutter, GutterMarker, type WidgetType } from '@codemirror/view';
 import { uncollapseUnchanged } from '@codemirror/merge';
+import { gutter as gutterRS, GutterMarker as GutterMarkerRS } from 'codecrafters-frontend/utils/code-mirror-gutter-rs';
 
 function isCollapseUnchangedWidget(widget: WidgetType) {
   return 'type' in widget && widget.type === 'collapsed-unchanged-code';
@@ -43,6 +44,23 @@ export class CollapseUnchangedGutterMarker extends GutterMarker {
   }
 }
 
+export class CollapseUnchangedGutterMarkerRS extends GutterMarkerRS {
+  line: BlockInfo;
+  view: EditorView;
+  widget: WidgetType;
+
+  constructor(view: EditorView, widget: WidgetType, line: BlockInfo) {
+    super();
+    this.line = line;
+    this.view = view;
+    this.widget = widget;
+  }
+
+  toDOM(view: EditorView) {
+    return renderGutterElement(view, this.widget, this.line);
+  }
+}
+
 export function collapseUnchangedGutter() {
   return [
     gutter({
@@ -52,5 +70,13 @@ export function collapseUnchangedGutter() {
         return isCollapseUnchangedWidget(widget) ? new CollapseUnchangedGutterMarker(view, widget, line) : null;
       },
     }),
+
+    gutterRS({
+      class: 'cm-collapseUnchangedGutter',
+
+      widgetMarker(view, widget, line) {
+        return isCollapseUnchangedWidget(widget) ? new CollapseUnchangedGutterMarkerRS(view, widget, line) : null;
+      },
+    }),
   ];
 }