Merge pull request #2513 from codecrafters-io/code-mirror/update-cm-m…

…erge

Update `@codemirror/merge` to version `6.8.0`

app/components/code-mirror.ts

@@ -37,6 +37,7 @@ import {
 import { languages } from '@codemirror/language-data';
 import { markdown } from '@codemirror/lang-markdown';
 import { highlightNewlines } from 'codecrafters-frontend/utils/code-mirror-highlight-newlines';
+import { collapseUnchangedGutterWidgetClass } from 'codecrafters-frontend/utils/code-mirror-collapse-unchanged-gutter-widget-class';
 
 function generateHTMLElement(src: string): HTMLElement {
   const div = document.createElement('div');
@@ -135,6 +136,7 @@ const OPTION_HANDLERS: { [key: string]: OptionHandler } = {
             highlightChanges: !!highlightChanges,
             syntaxHighlightDeletions: !!syntaxHighlighting && !!syntaxHighlightDeletions,
           }),
+          collapseUnchangedGutterWidgetClass(),
         ]
       : [];
   },
@@ -397,6 +399,10 @@ export default class CodeMirrorComponent extends Component<Signature> {
       parent: element,
       doc: this.args.document,
       extensions: [
+        EditorState.phrases.of({
+          '$ unchanged lines': 'Expand $ unchanged lines',
+        }),
+
         keymap.of(defaultKeymap),
 
         ...(await Promise.all(

app/styles/app.css

@@ -7,8 +7,6 @@
 /* Custom styles for individual pages */
 @import 'pages/affiliate-link-page.css';
 @import 'pages/code-walkthrough-page.css';
-@import 'pages/course-admin-submission-diff.css';
-@import 'pages/course-admin-updates-diff.css';
 @import 'pages/course-stage-solution-page.css';
 
 /* purgecss start ignore */

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

@@ -0,0 +1,40 @@
+import { EditorView, GutterMarker, gutterWidgetClass } from '@codemirror/view';
+
+export class CollapseUnchangedGutterMarker extends GutterMarker {
+  elementClass = 'cm-collapseUnchangedBarNeighbor';
+
+  toDOM(_view: EditorView): Node {
+    const el = document.createElement('div');
+    el.className = 'cm-collapseUnchangedBarGutterElement';
+    el.addEventListener('click', (_e) => {
+      const editor = el.closest('.cm-editor');
+      const gutter = el.closest('.cm-gutter');
+      const gutterElement = el.closest('.cm-collapseUnchangedBarNeighbor');
+      const gutterElementSiblings = gutter?.querySelectorAll('.cm-collapseUnchangedBarNeighbor');
+
+      if (!editor || !gutter || !gutterElement || !gutterElementSiblings) {
+        return;
+      }
+
+      // Find the index of the clicked gutter element
+      const gutterElementIndex = [...gutterElementSiblings.values()].indexOf(gutterElement);
+
+      // Find the corresponding expand unchanged bar in the content
+      const expandCollapsedBar = editor.querySelectorAll<HTMLElement>('.cm-content .cm-collapsedLines').item(gutterElementIndex);
+
+      expandCollapsedBar?.click();
+    });
+
+    return el;
+  }
+}
+
+export function collapseUnchangedGutterWidgetClass() {
+  return gutterWidgetClass.of(function (_view, widget, _block): GutterMarker | null {
+    if ('type' in widget && widget.type === 'collapsed-unchanged-code') {
+      return new CollapseUnchangedGutterMarker();
+    }
+
+    return null;
+  });
+}