Merge pull request #2535 from codecrafters-io/code-mirror/even-better…

…-collapse-unchanged-gutter An even better Collapse Unchanged Gutter
codecrafters-io · Jan 16, 2025 · 11ac5f4 · 11ac5f4
2 parents 56aedc1 + ef54ac4
commit 11ac5f4
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 62 deletions.
diff --git a/app/components/code-mirror.ts b/app/components/code-mirror.ts
@@ -37,7 +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';
+import { collapseUnchangedGutter } from 'codecrafters-frontend/utils/code-mirror-collapse-unchanged-gutter';
 
 function generateHTMLElement(src: string): HTMLElement {
   const div = document.createElement('div');
@@ -136,7 +136,7 @@ const OPTION_HANDLERS: { [key: string]: OptionHandler } = {
             highlightChanges: !!highlightChanges,
             syntaxHighlightDeletions: !!syntaxHighlighting && !!syntaxHighlightDeletions,
           }),
-          collapseUnchangedGutterWidgetClass(),
+          collapseUnchanged ? collapseUnchangedGutter() : [],
         ]
       : [];
   },

diff --git a/app/utils/code-mirror-collapse-unchanged-gutter-widget-class.ts b/app/utils/code-mirror-collapse-unchanged-gutter-widget-class.ts
diff --git a/app/utils/code-mirror-collapse-unchanged-gutter.ts b/app/utils/code-mirror-collapse-unchanged-gutter.ts
@@ -0,0 +1,47 @@
+import { EditorView, gutter, GutterMarker, type WidgetType } from '@codemirror/view';
+
+function isCollapseUnchangedWidget(widget: WidgetType) {
+  return 'type' in widget && widget.type === 'collapsed-unchanged-code';
+}
+
+function toDOM(_view: EditorView): Node {
+  const el = document.createElement('div');
+  el.className = 'cm-collapseUnchangedGutterElement';
+  el.addEventListener('click', (_e) => {
+    const editor = el.closest('.cm-editor');
+    const gutter = el.closest('.cm-gutter');
+    const gutterElement = el.closest('.cm-gutterElement');
+    const gutterElementSiblings = gutter?.querySelectorAll('.cm-collapseUnchangedBarSibling');
+
+    if (!editor || !gutter || !gutterElement || !gutterElementSiblings) {
+      return;
+    }
+
+    // Find the index of the clicked gutter element
+    const gutterElementIndex = [...gutterElementSiblings.values()].indexOf(gutterElement);
+
+    // Find the corresponding Collapse Unchanged Bar in the content
+    const collapsedUnchangedBar = editor.querySelectorAll<HTMLElement>('.cm-content .cm-collapsedLines').item(gutterElementIndex);
+
+    collapsedUnchangedBar?.click();
+  });
+
+  return el;
+}
+
+export class CollapseUnchangedGutterMarker extends GutterMarker {
+  elementClass = 'cm-collapseUnchangedBarSibling';
+  toDOM = toDOM;
+}
+
+export function collapseUnchangedGutter() {
+  return [
+    gutter({
+      class: 'cm-collapseUnchangedGutter',
+      renderEmptyElements: true,
+      widgetMarker(_view, widget, _block) {
+        return isCollapseUnchangedWidget(widget) ? new CollapseUnchangedGutterMarker() : null;
+      },
+    }),
+  ];
+}
diff --git a/app/utils/code-mirror-themes.ts b/app/utils/code-mirror-themes.ts
@@ -67,10 +67,10 @@ const BASE_STYLE = {
   },
 
   // Collapse unchanged lines gutter
-  '.cm-collapseUnchangedBarGutter': {
+  '.cm-collapseUnchangedGutter': {
     '& .cm-gutterElement': {
-      '&.cm-collapseUnchangedBarNeighbor': {
-        '& .cm-collapseUnchangedBarGutterElement': {
+      '&.cm-collapseUnchangedBarSibling': {
+        '& .cm-collapseUnchangedGutterElement': {
           content: '""',
           position: 'absolute',
           left: 0,
@@ -87,20 +87,20 @@ const BASE_STYLE = {
           cursor: 'pointer',
         },
         '&:hover': {
-          '& .cm-collapseUnchangedBarGutterElement': {
+          '& .cm-collapseUnchangedGutterElement': {
             backgroundColor: tailwindColors.sky['100'],
             color: tailwindColors.sky['800'],
           },
         },
         '&:first-child': {
-          '& .cm-collapseUnchangedBarGutterElement': {
+          '& .cm-collapseUnchangedGutterElement': {
             borderTop: 'none',
             marginTop: '-0.5rem',
             backgroundImage: 'url("/assets/images/codemirror/expand-diff-top.svg")',
           },
         },
         '&:last-child': {
-          '& .cm-collapseUnchangedBarGutterElement': {
+          '& .cm-collapseUnchangedGutterElement': {
             borderBottom: 'none',
             marginTop: '0.5rem',
             backgroundImage: 'url("/assets/images/codemirror/expand-diff-bottom.svg")',
@@ -198,30 +198,30 @@ export const codeCraftersDark = [
       },
 
       // Collapse unchanged lines gutter
-      '.cm-collapseUnchangedBarGutter': {
+      '.cm-collapseUnchangedGutter': {
         '& .cm-gutterElement': {
-          '&.cm-collapseUnchangedBarNeighbor': {
-            '& .cm-collapseUnchangedBarGutterElement': {
+          '&.cm-collapseUnchangedBarSibling': {
+            '& .cm-collapseUnchangedGutterElement': {
               borderColor: blendColors(tailwindColors.white, 0.075, blendColors(tailwindColors.sky['900'], 0.4, tailwindColors.slate['800'])),
               backgroundColor: blendColors(tailwindColors.sky['900'], 0.4, tailwindColors.slate['800']),
               backgroundImage: 'url("/assets/images/codemirror/expand-diff-middle-dark.svg")',
             },
 
             '&:hover': {
-              '& .cm-collapseUnchangedBarGutterElement': {
+              '& .cm-collapseUnchangedGutterElement': {
                 backgroundColor: blendColors(tailwindColors.sky['800'], 0.4, tailwindColors.slate['800']),
                 color: tailwindColors.sky['300'],
               },
             },
 
             '&:first-child': {
-              '& .cm-collapseUnchangedBarGutterElement': {
+              '& .cm-collapseUnchangedGutterElement': {
                 backgroundImage: 'url("/assets/images/codemirror/expand-diff-top-dark.svg")',
               },
             },
 
             '&:last-child': {
-              '& .cm-collapseUnchangedBarGutterElement': {
+              '& .cm-collapseUnchangedGutterElement': {
                 backgroundImage: 'url("/assets/images/codemirror/expand-diff-bottom-dark.svg")',
               },
             },

diff --git a/tests/acceptance/course-admin/view-diffs-test.js b/tests/acceptance/course-admin/view-diffs-test.js
@@ -114,12 +114,12 @@ module('Acceptance | course-admin | view-diffs', function (hooks) {
       'The first placeholder should be expanded after clicking',
     );
 
-    await submissionsPage.diffTab.changedFiles[0].codeMirror.content.collapsedLinesPlaceholders[0].click();
+    await submissionsPage.diffTab.changedFiles[0].codeMirror.gutters.collapseUnchangedGutter.collapseUnchangedBarSiblings[0].click();
 
     assert.strictEqual(
       submissionsPage.diffTab.changedFiles[0].codeMirror.content.collapsedLinesPlaceholders.length,
       1,
-      'The second placeholder should be expanded after clicking',
+      "The second placeholder should be expanded after clicking on it's gutter sibling",
     );
 
     await submissionsPage.diffTab.changedFiles[0].codeMirror.content.collapsedLinesPlaceholders[0].click();

diff --git a/tests/pages/components/code-mirror.ts b/tests/pages/components/code-mirror.ts
@@ -28,6 +28,12 @@ export default create({
           scope: '> .cm-gutter.cm-changeGutter',
           elements: collection('> .cm-gutterElement'),
         },
+
+        collapseUnchangedGutter: {
+          scope: '> .cm-gutter.cm-collapseUnchangedGutter',
+          elements: collection('> .cm-gutterElement'),
+          collapseUnchangedBarSiblings: collection('.cm-collapseUnchangedGutterElement'),
+        },
       },
 
       content: {