Use CodeMirror on Admin Submissions Diff tab

app/components/code-mirror.ts

@@ -311,7 +311,9 @@ const OPTION_HANDLERS: OptionHandlersSignature = {
           unifiedMergeView({
             original: originalDocument,
             mergeControls: !!mergeControls,
-            collapseUnchanged: collapseUnchanged ? { margin: 2, minSize: 4 } : undefined,
+            collapseUnchanged: collapseUnchanged ? { margin: 3, minSize: 4 } : undefined,
+            highlightChanges: false,
+            syntaxHighlightDeletions: true,
           }),
         ]
       : [];

app/components/course-admin/submissions-page/submission-details/diff-container.hbs

@@ -1,25 +1,34 @@
-<div ...attributes>
+<div class="course-admin-submission-diff-container" ...attributes>
   {{#if @submission.hasChangedFiles}}
     {{#each @submission.changedFiles key="filename" as |changedFile index|}}
       <div
         class="{{if (not-eq index (sub @submission.changedFiles.length 1)) 'mb-4'}}
           bg-white shadow-sm rounded border border-gray-300 overflow-y-hidden"
+        data-test-changed-file
       >
         <div class="bg-gray-100 rounded-t py-1 px-4 border-b border-gray-200 shadow-sm">
           <span class="font-mono text-xs text-gray-600 bold">{{changedFile.filename}}</span>
         </div>
 
-        <div class="text-sm leading-6">
-          {{! #if ensures that language is typed and not null }}
-          {{#if @submission.repository.language}}
-            <SyntaxHighlightedDiff
-              @comments={{(array)}}
-              @code={{changedFile.diff}}
-              @language={{@submission.repository.language.slug}}
-              @shouldCollapseUnchangedLines={{true}}
-            />
-          {{/if}}
-        </div>
+        {{#let (diff-to-document changedFile.diff) as |document|}}
+          <CodeMirror
+            @document={{document.current}}
+            @originalDocument={{document.original}}
+            @language={{@submission.repository.language.slug}}
+            @filename={{changedFile.filename}}
+            @collapseUnchanged={{true}}
+            @allowMultipleSelections={{true}}
+            @bracketMatching={{true}}
+            @crosshairCursor={{true}}
+            @drawSelection={{true}}
+            @rectangularSelection={{true}}
+            @readOnly={{true}}
+            @highlightSelectionMatches={{true}}
+            @highlightSpecialChars={{true}}
+            @theme={{this.codeMirrorTheme}}
+            class="block text-sm"
+          />
+        {{/let}}
       </div>
     {{/each}}
   {{else}}

app/components/course-admin/submissions-page/submission-details/diff-container.ts

@@ -1,6 +1,8 @@
 import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import type DarkModeService from 'codecrafters-frontend/services/dark-mode';
 import type SubmissionModel from 'codecrafters-frontend/models/submission';
-
+import { codeCraftersDark, codeCraftersLight } from 'codecrafters-frontend/utils/code-mirror-themes';
 interface Signature {
   Element: HTMLDivElement;
 
@@ -9,7 +11,13 @@ interface Signature {
   };
 }
 
-export default class DiffContainerComponent extends Component<Signature> {}
+export default class DiffContainerComponent extends Component<Signature> {
+  @service declare darkMode: DarkModeService;
+
+  get codeMirrorTheme() {
+    return this.darkMode.isEnabled ? codeCraftersDark : codeCraftersLight;
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {

app/helpers/diff-to-document.ts

@@ -0,0 +1,32 @@
+import { helper } from '@ember/component/helper';
+
+const diffToDocument = helper(function diffToDocument([diff = '']: [string | undefined]) {
+  const diffLines = diff.split('\n');
+
+  const current = [];
+  const original = [];
+
+  for (const line of diffLines) {
+    if (line.startsWith('-')) {
+      original.push(line.substring(1));
+    } else if (line.startsWith('+')) {
+      current.push(line.substring(1));
+    } else {
+      original.push(line.substring(1));
+      current.push(line.substring(1));
+    }
+  }
+
+  return {
+    current: current.join('\n'),
+    original: original.join('\n'),
+  };
+});
+
+export default diffToDocument;
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'diff-to-document': typeof diffToDocument;
+  }
+}

app/styles/app.css

@@ -6,6 +6,7 @@
 @import 'pages/affiliate-link-page.scss';
 @import 'pages/course-stage-solution-page.scss';
 @import 'pages/code-walkthrough-page.scss';
+@import 'pages/course-admin-submission-diff.scss';
 
 /* purgecss start ignore */
 @import '@typeform/embed/build/css/popup.css';

app/styles/pages/course-admin-submission-diff.scss

@@ -0,0 +1,3 @@
+.course-admin-submission-diff-container code-mirror .cm-collapsedLines {
+  margin-left: -24px;
+}

app/templates/demo/code-mirror.hbs

@@ -295,7 +295,7 @@
   @scrollPastEnd={{this.scrollPastEnd}}
   @syntaxHighlighting={{this.syntaxHighlighting}}
   {{! Element classes }}
-  class="block overflow-auto mt-4 h-72 {{if this.outline 'outline-2 outline-dashed outline-green-500'}}"
+  class="block overflow-auto mt-4 max-h-96 {{if this.outline 'outline outline-dotted outline-gray-200 dark:outline-gray-700'}}"
 />
 
 <div class="my-2 text-right">

app/utils/blend-colors.ts

@@ -0,0 +1,11 @@
+import hexRgb from 'hex-rgb';
+import rgbHex from 'rgb-hex';
+
+export default function blendColors(fgColor = '#ffffff', opacity = 1, bgColor = '#ffffff') {
+  const fgRgb = hexRgb(fgColor, { format: 'array' });
+  const bgRgb = hexRgb(bgColor, { format: 'array' });
+
+  const blendedRgb = fgRgb.slice(0, 3).map<number>((colFg, idx) => opacity * colFg + (1 - opacity) * (bgRgb[idx] || 255)) as [number, number, number];
+
+  return `#${rgbHex(...blendedRgb)}`;
+}