fix(git): add syntax highlighting to raw diff fallback lines

Author: Dimillian

src/features/git/components/GitDiffViewer.test.tsx

@@ -124,5 +124,9 @@ describe("GitDiffViewer", () => {
     expect(screen.queryByText("Diff unavailable.")).toBeNull();
     expect(screen.getByText("added line")).toBeTruthy();
     expect(screen.getByText("removed line")).toBeTruthy();
+
+    const rawLines = Array.from(document.querySelectorAll(".diff-viewer-raw-line"));
+    expect(rawLines[1]?.className).toContain("diff-viewer-raw-line-add");
+    expect(rawLines[2]?.className).toContain("diff-viewer-raw-line-del");
   });
 });

src/features/git/components/GitDiffViewer.utils.ts

@@ -55,6 +55,12 @@ export function parseRawDiffLines(diff: string): ParsedDiffLine[] {
     });
 }
 
+export function isFallbackRawDiffLineHighlightable(
+  type: ParsedDiffLine["type"],
+) {
+  return type === "add" || type === "del" || type === "context";
+}
+
 export function calculateDiffStats(diffs: GitDiffViewerItem[]): DiffStats {
   let additions = 0;
   let deletions = 0;

src/features/git/components/GitDiffViewerDiffCard.tsx

@@ -12,12 +12,17 @@ import type {
   PullRequestReviewIntent,
 } from "../../../types";
 import { parseDiff, type ParsedDiffLine } from "../../../utils/diff";
+import { highlightLine, languageFromPath } from "../../../utils/syntax";
 import {
   DIFF_VIEWER_SCROLL_CSS,
 } from "../../design-system/diff/diffViewerTheme";
 import { splitPath } from "./GitDiffPanel.utils";
 import type { GitDiffViewerItem } from "./GitDiffViewer.types";
-import { normalizePatchName, parseRawDiffLines } from "./GitDiffViewer.utils";
+import {
+  isFallbackRawDiffLineHighlightable,
+  normalizePatchName,
+  parseRawDiffLines,
+} from "./GitDiffViewer.utils";
 
 type HoveredDiffLine =
   | {
@@ -117,6 +122,10 @@ export const DiffCard = memo(function DiffCard({
     [displayPath],
   );
   const displayDir = dir ? `${dir}/` : "";
+  const fallbackLanguage = useMemo(
+    () => languageFromPath(displayPath),
+    [displayPath],
+  );
 
   const fileDiff = useMemo(() => {
     if (!entry.diff.trim()) {
@@ -287,14 +296,26 @@ export const DiffCard = memo(function DiffCard({
         </div>
       ) : entry.diff.trim().length > 0 && parsedLines.length > 0 ? (
         <div className="diff-viewer-output diff-viewer-output-flat diff-viewer-output-raw">
-          {parsedLines.map((line, index) => (
-            <div
-              key={index}
-              className={`diff-viewer-raw-line diff-viewer-raw-line-${line.type}`}
-            >
-              {line.text}
-            </div>
-          ))}
+          {parsedLines.map((line, index) => {
+            const highlighted = highlightLine(
+              line.text,
+              isFallbackRawDiffLineHighlightable(line.type)
+                ? fallbackLanguage
+                : null,
+            );
+
+            return (
+              <div
+                key={index}
+                className={`diff-viewer-raw-line diff-viewer-raw-line-${line.type}`}
+              >
+                <span
+                  className="diff-line-content"
+                  dangerouslySetInnerHTML={{ __html: highlighted }}
+                />
+              </div>
+            );
+          })}
         </div>
       ) : (
         <div className="diff-viewer-placeholder">{placeholder}</div>

src/features/git/components/PierreDiffBlock.tsx

@@ -2,12 +2,17 @@ import { useMemo } from "react";
 import { parsePatchFiles, type FileDiffMetadata } from "@pierre/diffs";
 import { FileDiff, WorkerPoolContextProvider } from "@pierre/diffs/react";
 import { parseDiff } from "../../../utils/diff";
+import { highlightLine, languageFromPath } from "../../../utils/syntax";
 import { workerFactory } from "../../../utils/diffsWorker";
 import {
   DIFF_VIEWER_HIGHLIGHTER_OPTIONS,
   DIFF_VIEWER_SCROLL_CSS,
 } from "../../design-system/diff/diffViewerTheme";
-import { normalizePatchName, parseRawDiffLines } from "./GitDiffViewer.utils";
+import {
+  isFallbackRawDiffLineHighlightable,
+  normalizePatchName,
+  parseRawDiffLines,
+} from "./GitDiffViewer.utils";
 
 type PierreDiffBlockProps = {
   diff: string;
@@ -60,6 +65,10 @@ export function PierreDiffBlock({
     }
     return parseRawDiffLines(diff);
   }, [diff]);
+  const fallbackLanguage = useMemo(
+    () => languageFromPath(displayPath),
+    [displayPath],
+  );
 
   const diffOptions = useMemo(
     () => ({
@@ -91,14 +100,26 @@ export function PierreDiffBlock({
         </div>
       ) : (
         <div className="diff-viewer-output diff-viewer-output-flat diff-viewer-output-raw">
-          {parsedLines.map((line, index) => (
-            <div
-              key={index}
-              className={`diff-viewer-raw-line diff-viewer-raw-line-${line.type}`}
-            >
-              {line.text}
-            </div>
-          ))}
+          {parsedLines.map((line, index) => {
+            const highlighted = highlightLine(
+              line.text,
+              isFallbackRawDiffLineHighlightable(line.type)
+                ? fallbackLanguage
+                : null,
+            );
+
+            return (
+              <div
+                key={index}
+                className={`diff-viewer-raw-line diff-viewer-raw-line-${line.type}`}
+              >
+                <span
+                  className="diff-line-content"
+                  dangerouslySetInnerHTML={{ __html: highlighted }}
+                />
+              </div>
+            );
+          })}
         </div>
       )}
     </WorkerPoolContextProvider>

src/styles/diff-viewer.css

@@ -688,6 +688,19 @@
   white-space: pre-wrap;
 }
 
+.diff-viewer-raw-line .diff-line-content {
+  min-width: 0;
+  white-space: pre-wrap;
+}
+
+.diff-viewer-raw-line-add {
+  background: rgba(46, 160, 67, 0.25);
+}
+
+.diff-viewer-raw-line-del {
+  background: rgba(248, 81, 73, 0.25);
+}
+
 .diff-line-hunk {
   background: var(--surface-card-muted);
   color: var(--text-subtle);