-
-
- {result.lines.map((line, i) => {
- const key = `c-${String(i)}-${line.type}`;
- if (line.type === 'added') {
- return (
-
- +{line.text}
-
- );
- }
- if (line.type === 'removed') {
- return (
-
- -{line.text}
-
- );
- }
- return (
-
-
{line.text}
+ {/* Line rows */}
+ {result.lines.map((line, index) => {
+ const key = `c-${String(index)}-${line.type}`;
+ // Line number: prefer original, fallback to modified
+ const lineNumber =
+ /* v8 ignore next */
+ line.originalLineNumber ?? line.modifiedLineNumber ?? '';
+
+ const { lineNumberClasses, contentClasses } = getDiffLineClasses(
+ line.type,
+ );
+
+ return (
+
+ {/* Line number cell */}
+ {lineNumber}
+
+ {/* Content cell */}
+
+ {line.type === 'added' && +}
+ {line.type === 'removed' && -}
+ {line.text}
- );
- })}
-
+
+ );
+ })}
-
- {/* Additional line number gutters for Lines diff method */}
- {diffMethod === 'lines' && (
-
-
- {result.lines.map((line, i) => (
-
- {line.originalLineNumber ?? ''}
-
- ))}
-
-
- {result.lines.map((line, i) => (
-
- {line.modifiedLineNumber ?? ''}
-
- ))}
-
-
- )}
);
}
diff --git a/src/components/DiffViewer/DiffViewer.types.ts b/src/components/DiffViewer/DiffViewer.types.ts
index c3f2e12..af25b5d 100644
--- a/src/components/DiffViewer/DiffViewer.types.ts
+++ b/src/components/DiffViewer/DiffViewer.types.ts
@@ -1,28 +1,8 @@
-import type { DiffLineResult, DiffMethod, ViewMode } from 'src/types/diff';
+import type { DiffLineResult, ViewMode } from 'src/types/diff';
export interface DiffViewerProps {
/** The computed diff result with line data, null when output should be hidden */
result: DiffLineResult | null;
/** The effective display mode (forced 'unified' on mobile) */
viewMode: ViewMode;
- /** The diff method being used */
- diffMethod?: DiffMethod;
- /** Enable scroll synchronization (default: true) */
- enableScrollSync?: boolean;
- /** Explicit gutter width control */
- gutterWidth?: 'auto' | 2 | 3;
- /** Additional CSS classes */
- className?: string;
-}
-
-export interface DiffViewerRef {
- /** Current scroll state */
- scrollState: {
- scrollTop: number;
- scrollLeft: number;
- };
- /** Scroll to specific position */
- scrollTo: (scrollTop: number, scrollLeft?: number) => void;
- /** Get current gutter width */
- getGutterWidth: () => number;
}
diff --git a/src/components/DiffViewer/SideBySideView.test.tsx b/src/components/DiffViewer/SideBySideView.test.tsx
new file mode 100644
index 0000000..ea49a82
--- /dev/null
+++ b/src/components/DiffViewer/SideBySideView.test.tsx
@@ -0,0 +1,269 @@
+import { render } from '@testing-library/react';
+import type { DiffLineResult } from 'src/types/diff';
+import { segmentsToLines } from 'src/utils/segmentsToLines';
+
+import SideBySideView from './SideBySideView';
+
+function makeResult(
+ segments: DiffLineResult['segments'],
+ hasChanges: boolean,
+): DiffLineResult {
+ return { segments, hasChanges, lines: segmentsToLines(segments) };
+}
+
+describe('SideBySideView component', () => {
+ it('renders side-by-side view correctly', () => {
+ const result = makeResult(
+ [
+ { value: 'hello ', type: 'unchanged' },
+ { value: 'world', type: 'removed' },
+ { value: 'there', type: 'added' },
+ ],
+ true,
+ );
+
+ const { container } = render(
);
+
+ const diffOutput = container.querySelector('[aria-live="polite"]');
+ expect(diffOutput).toBeInTheDocument();
+
+ const originalColumns = container.querySelectorAll(
+ '[data-testid="diff-column-original"]',
+ );
+ expect(originalColumns.length).toBe(2);
+
+ const modifiedColumns = container.querySelectorAll(
+ '[data-testid="diff-column-modified"]',
+ );
+ expect(modifiedColumns.length).toBe(2);
+ });
+
+ it('renders line number gutters in side-by-side view', () => {
+ const result = makeResult(
+ [
+ { value: 'same\n', type: 'unchanged' },
+ { value: 'old\n', type: 'removed' },
+ { value: 'new\n', type: 'added' },
+ ],
+ true,
+ );
+
+ const { container } = render(
);
+
+ // Check for rows with both original and modified columns
+ const originalColumns = container.querySelectorAll(
+ '[data-testid="diff-column-original"]',
+ );
+ expect(originalColumns.length).toBe(2);
+
+ const modifiedColumns = container.querySelectorAll(
+ '[data-testid="diff-column-modified"]',
+ );
+ expect(modifiedColumns.length).toBe(2);
+ });
+
+ it('shows correct line numbers in side-by-side original column', () => {
+ const result = makeResult(
+ [
+ { value: 'same\n', type: 'unchanged' },
+ { value: 'old\n', type: 'removed' },
+ ],
+ true,
+ );
+
+ const { container } = render(
);
+
+ const originalColumns = container.querySelectorAll(
+ '[data-testid="diff-column-original"]',
+ );
+ expect(originalColumns).toHaveLength(2);
+
+ // Check line numbers and content in original column
+ expect(originalColumns[0].textContent).toBe('1same');
+ expect(originalColumns[1].textContent).toBe('2-old');
+ });
+
+ it('shows correct line numbers in side-by-side modified column', () => {
+ const result = makeResult(
+ [
+ { value: 'same\n', type: 'unchanged' },
+ { value: 'new\n', type: 'added' },
+ ],
+ true,
+ );
+
+ const { container } = render(
);
+
+ const modifiedColumns = container.querySelectorAll(
+ '[data-testid="diff-column-modified"]',
+ );
+ expect(modifiedColumns).toHaveLength(2);
+
+ // Check line numbers and content in modified column
+ expect(modifiedColumns[0].textContent).toBe('1same');
+ expect(modifiedColumns[1].textContent).toBe('2+new');
+ });
+
+ it('aligns consecutive removed and added lines on the same row', () => {
+ const result = makeResult(
+ [
+ { value: 'old\n', type: 'removed' },
+ { value: 'new\n', type: 'added' },
+ ],
+ true,
+ );
+
+ const { container } = render(
);
+
+ const originalColumns = container.querySelectorAll(
+ '[data-testid="diff-column-original"]',
+ );
+ const modifiedColumns = container.querySelectorAll(
+ '[data-testid="diff-column-modified"]',
+ );
+
+ // Should have only 1 row with both removed and added lines aligned
+ expect(originalColumns).toHaveLength(1);
+ expect(modifiedColumns).toHaveLength(1);
+
+ // Row shows removed line on left and added line on right
+ expect(originalColumns[0].textContent).toBe('1-old');
+ expect(modifiedColumns[0].textContent).toBe('1+new');
+ });
+
+ it('renders placeholder rows when removed/added lines are not consecutive', () => {
+ const result = makeResult(
+ [
+ { value: 'old\n', type: 'removed' },
+ { value: 'same\n', type: 'unchanged' },
+ { value: 'new\n', type: 'added' },
+ ],
+ true,
+ );
+
+ const { container } = render(
);
+
+ const originalColumns = container.querySelectorAll(
+ '[data-testid="diff-column-original"]',
+ );
+ const modifiedColumns = container.querySelectorAll(
+ '[data-testid="diff-column-modified"]',
+ );
+
+ expect(originalColumns).toHaveLength(3);
+ expect(modifiedColumns).toHaveLength(3);
+
+ // First row: removed line with placeholder on right
+ expect(originalColumns[0].textContent).toBe('1-old');
+ expect(modifiedColumns[0].textContent).toBe('\u00A0');
+
+ // Second row: unchanged line on both sides
+ expect(originalColumns[1].textContent).toBe('2same');
+ expect(modifiedColumns[1].textContent).toBe('1same');
+
+ // Third row: placeholder on left with added line on right
+ expect(originalColumns[2].textContent).toBe('\u00A0');
+ expect(modifiedColumns[2].textContent).toBe('2+new');
+ });
+
+ it('aligns multiple consecutive removed and added lines', () => {
+ const result = makeResult(
+ [
+ { value: 'old1\n', type: 'removed' },
+ { value: 'old2\n', type: 'removed' },
+ { value: 'new1\n', type: 'added' },
+ { value: 'new2\n', type: 'added' },
+ ],
+ true,
+ );
+
+ const { container } = render(
);
+
+ const originalColumns = container.querySelectorAll(
+ '[data-testid="diff-column-original"]',
+ );
+ const modifiedColumns = container.querySelectorAll(
+ '[data-testid="diff-column-modified"]',
+ );
+
+ // Should have 2 rows: old1/new1 and old2/new2
+ expect(originalColumns).toHaveLength(2);
+ expect(modifiedColumns).toHaveLength(2);
+
+ expect(originalColumns[0].textContent).toBe('1-old1');
+ expect(modifiedColumns[0].textContent).toBe('1+new1');
+
+ expect(originalColumns[1].textContent).toBe('2-old2');
+ expect(modifiedColumns[1].textContent).toBe('2+new2');
+ });
+
+ it('handles more removed lines than added lines', () => {
+ const result = makeResult(
+ [
+ { value: 'old1\n', type: 'removed' },
+ { value: 'old2\n', type: 'removed' },
+ { value: 'old3\n', type: 'removed' },
+ { value: 'new1\n', type: 'added' },
+ { value: 'new2\n', type: 'added' },
+ ],
+ true,
+ );
+
+ const { container } = render(
);
+
+ const originalColumns = container.querySelectorAll(
+ '[data-testid="diff-column-original"]',
+ );
+ const modifiedColumns = container.querySelectorAll(
+ '[data-testid="diff-column-modified"]',
+ );
+
+ // Should have 3 rows: old1/new1, old2/new2, old3/placeholder
+ expect(originalColumns).toHaveLength(3);
+ expect(modifiedColumns).toHaveLength(3);
+
+ expect(originalColumns[0].textContent).toBe('1-old1');
+ expect(modifiedColumns[0].textContent).toBe('1+new1');
+
+ expect(originalColumns[1].textContent).toBe('2-old2');
+ expect(modifiedColumns[1].textContent).toBe('2+new2');
+
+ expect(originalColumns[2].textContent).toBe('3-old3');
+ expect(modifiedColumns[2].textContent).toBe('\u00A0');
+ });
+
+ it('handles more added lines than removed lines', () => {
+ const result = makeResult(
+ [
+ { value: 'old1\n', type: 'removed' },
+ { value: 'old2\n', type: 'removed' },
+ { value: 'new1\n', type: 'added' },
+ { value: 'new2\n', type: 'added' },
+ { value: 'new3\n', type: 'added' },
+ ],
+ true,
+ );
+
+ const { container } = render(
);
+
+ const originalColumns = container.querySelectorAll(
+ '[data-testid="diff-column-original"]',
+ );
+ const modifiedColumns = container.querySelectorAll(
+ '[data-testid="diff-column-modified"]',
+ );
+
+ // Should have 3 rows: old1/new1, old2/new2, placeholder/new3
+ expect(originalColumns).toHaveLength(3);
+ expect(modifiedColumns).toHaveLength(3);
+
+ expect(originalColumns[0].textContent).toBe('1-old1');
+ expect(modifiedColumns[0].textContent).toBe('1+new1');
+
+ expect(originalColumns[1].textContent).toBe('2-old2');
+ expect(modifiedColumns[1].textContent).toBe('2+new2');
+
+ expect(originalColumns[2].textContent).toBe('\u00A0');
+ expect(modifiedColumns[2].textContent).toBe('3+new3');
+ });
+});
diff --git a/src/components/DiffViewer/SideBySideView.tsx b/src/components/DiffViewer/SideBySideView.tsx
new file mode 100644
index 0000000..f2368d1
--- /dev/null
+++ b/src/components/DiffViewer/SideBySideView.tsx
@@ -0,0 +1,128 @@
+import type { DiffLine } from 'src/types/diff';
+import { getDiffLineClasses } from 'src/utils/getDiffLineClasses';
+
+interface DiffRowPair {
+ original: DiffLine | null;
+ modified: DiffLine | null;
+}
+
+function pairLines(lines: DiffLine[]): DiffRowPair[] {
+ const pairs: DiffRowPair[] = [];
+ let i = 0;
+
+ while (i < lines.length) {
+ const line = lines[i];
+
+ if (line.type === 'unchanged') {
+ pairs.push({ original: line, modified: line });
+ i++;
+ } else if (line.type === 'removed') {
+ const removedLines: DiffLine[] = [line];
+ let j = i + 1;
+
+ while (j < lines.length && lines[j].type === 'removed') {
+ removedLines.push(lines[j]);
+ j++;
+ }
+
+ const addedLines: DiffLine[] = [];
+ while (j < lines.length && lines[j].type === 'added') {
+ addedLines.push(lines[j]);
+ j++;
+ }
+
+ const maxLength = Math.max(removedLines.length, addedLines.length);
+ for (let k = 0; k < maxLength; k++) {
+ pairs.push({
+ original: removedLines[k] ?? null,
+ modified: addedLines[k] ?? null,
+ });
+ }
+
+ i = j;
+ } else {
+ pairs.push({ original: null, modified: line });
+ i++;
+ }
+ }
+
+ return pairs;
+}
+
+interface SideBySideViewProps {
+ lines: DiffLine[];
+}
+
+export default function SideBySideView({ lines }: SideBySideViewProps) {
+ const pairs = pairLines(lines);
+
+ const sideBySideContentBase =
+ 'min-w-0 flex-1 pl-2 font-mono text-sm leading-6 text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words';
+
+ return (
+
+
+
+ {pairs.map((pair, index) => {
+ const key = `row-${String(index)}`;
+ const originalLineNumber = pair.original?.originalLineNumber ?? '';
+ const modifiedLineNumber = pair.modified?.modifiedLineNumber ?? '';
+
+ const {
+ lineNumberClasses: origLineNumberClasses,
+ contentClasses: origContentClasses,
+ } = getDiffLineClasses(pair.original?.type ?? null, {
+ contentBaseClasses: sideBySideContentBase,
+ });
+
+ const {
+ lineNumberClasses: modLineNumberClasses,
+ contentClasses: modContentClasses,
+ } = getDiffLineClasses(pair.modified?.type ?? null, {
+ contentBaseClasses: sideBySideContentBase,
+ });
+
+ return (
+
+ {/* Original side */}
+
+
+ {originalLineNumber}
+
+
+ {!pair.original ? (
+ {'\u00A0'}
+ ) : pair.original.type === 'removed' ? (
+ -{pair.original.text}
+ ) : (
+ {pair.original.text}
+ )}
+
+
+
+ {/* Modified side */}
+
+
+ {modifiedLineNumber}
+
+
+ {!pair.modified ? (
+ {'\u00A0'}
+ ) : pair.modified.type === 'added' ? (
+ +{pair.modified.text}
+ ) : (
+ {pair.modified.text}
+ )}
+
+
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/src/components/LineNumberGutter/LineNumberGutter.test.tsx b/src/components/LineNumberGutter/LineNumberGutter.test.tsx
deleted file mode 100644
index befc030..0000000
--- a/src/components/LineNumberGutter/LineNumberGutter.test.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { LineNumberGutter } from './LineNumberGutter';
-import type { LineNumberGutterProps } from './LineNumberGutter.types';
-
-describe('LineNumberGutter', () => {
- const defaultProps: LineNumberGutterProps = {
- lineCount: 10,
- digitCount: 2,
- scrollTop: 0,
- scrollLeft: 0,
- 'aria-label': 'Line numbers',
- };
-
- it('should render correct number of lines', () => {
- render(
);
-
- const lineElements = screen.getAllByText(/^\d+$/);
- expect(lineElements).toHaveLength(10);
- expect(lineElements[0]).toHaveTextContent('1');
- expect(lineElements[9]).toHaveTextContent('10');
- });
-
- it('should apply correct CSS classes for 2-digit width', () => {
- render(
);
-
- const gutter = screen.getByLabelText('Line numbers');
- expect(gutter).toHaveClass('w-[calc(2ch*2)]');
- });
-
- it('should apply correct CSS classes for 3-digit width', () => {
- render(
);
-
- const gutter = screen.getByLabelText('Line numbers');
- expect(gutter).toHaveClass('w-[calc(2ch*3)]');
- });
-
- it('should render with monospace font and right alignment', () => {
- render(
);
-
- const gutter = screen.getByLabelText('Line numbers');
- expect(gutter).toHaveClass('font-mono', 'text-right');
- });
-
- it('should handle scroll events', () => {
- render(
);
-
- const gutter = screen.getByLabelText('Line numbers');
-
- // Simulate scroll event
- gutter.dispatchEvent(new Event('scroll'));
-
- // The scroll event should be handled by the component
- // Since we can't easily mock the currentTarget in testing, let's check
- // that the component renders correctly and the scroll handler exists
- expect(gutter).toBeInTheDocument();
- });
-
- it('should apply custom className', () => {
- render(
);
-
- const gutter = screen.getByLabelText('Line numbers');
- expect(gutter).toHaveClass('custom-class');
- });
-
- it('should handle zero line count', () => {
- render(
);
-
- const gutter = screen.getByLabelText('Line numbers');
- expect(gutter).toBeInTheDocument();
-
- // Check that no line numbers are rendered
- const lineElements = screen.queryByText(/^\d+$/);
- expect(lineElements).toBeNull();
- });
-
- it('should handle large line counts with 3-digit width', () => {
- render(
-
,
- );
-
- const lineElements = screen.getAllByText(/^\d+$/);
- expect(lineElements).toHaveLength(150);
- expect(lineElements[0]).toHaveTextContent('1');
- expect(lineElements[149]).toHaveTextContent('150');
- });
-
- it('should update scroll position when scrollTop and scrollLeft props change', () => {
- const { rerender } = render(
-
,
- );
-
- const gutter = screen.getByLabelText('Line numbers');
- expect(gutter).toBeInTheDocument();
-
- // Update scroll position
- rerender(
-
,
- );
-
- // The element should still be present and the scroll position should be updated
- expect(gutter).toBeInTheDocument();
- });
-
- it('should handle scroll position updates when ref is null', () => {
- // This test ensures the useEffect doesn't throw when ref is null
- const { rerender } = render(
-
,
- );
-
- expect(() => {
- rerender(
-
,
- );
- }).not.toThrow();
- });
-
- it('should apply correct CSS classes for digit count other than 3', () => {
- render(
);
-
- const gutter = screen.getByLabelText('Line numbers');
- expect(gutter).toHaveClass('w-[calc(2ch*2)]');
- });
-
- it('should handle component unmounting gracefully', () => {
- const { unmount } = render(
-
,
- );
-
- // This should not throw when component unmounts
- expect(() => {
- unmount();
- }).not.toThrow();
- });
-
- it('should handle scroll position changes without throwing errors', () => {
- const { rerender } = render(
-
,
- );
-
- // Multiple rerenders with different scroll positions should not throw
- expect(() => {
- rerender(
-
,
- );
- rerender(
-
,
- );
- }).not.toThrow();
- });
-
- it('should handle horizontal scrollbar detection on scroll', () => {
- // This test ensures the scrollbar detection logic runs without error
- // We can't easily mock the DOM querySelector in this test environment,
- // but we can verify the component handles scrollLeft changes
- const { rerender } = render(
-
,
- );
-
- const gutter = screen.getByLabelText('Line numbers');
- expect(gutter).toBeInTheDocument();
-
- // Trigger scrollLeft change which should trigger scrollbar detection
- expect(() => {
- rerender(
);
- }).not.toThrow();
- });
-});
diff --git a/src/components/LineNumberGutter/LineNumberGutter.tsx b/src/components/LineNumberGutter/LineNumberGutter.tsx
deleted file mode 100644
index 888421c..0000000
--- a/src/components/LineNumberGutter/LineNumberGutter.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import type { LineNumberGutterProps } from './LineNumberGutter.types';
-
-export const LineNumberGutter: React.FC
= ({
- lineCount,
- digitCount,
- scrollTop,
- scrollLeft,
- className = '',
- 'aria-label': ariaLabel = 'Line numbers',
-}) => {
- // Generate line numbers
- const lineNumbers = useMemo(() => {
- return Array.from({ length: lineCount }, (_, index) => index + 1);
- }, [lineCount]);
-
- const scrollElementRef = useRef(null);
- const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = useState(false);
-
- // Check for horizontal scrollbar in the content area
- const checkHorizontalScrollbar = () => {
- // Find the content element by looking for the next sibling or parent's child
- const contentElement = /* v8 ignore next */
- scrollElementRef.current?.parentElement?.querySelector(
- '[class*="overflow-x-auto"]',
- );
- /* v8 ignore start */
- if (contentElement) {
- const hasScrollbar =
- contentElement.scrollWidth > contentElement.clientWidth;
- setHasHorizontalScrollbar(hasScrollbar);
- }
- /* v8 ignore end */
- };
-
- useEffect(() => {
- /* v8 ignore start */
- if (scrollElementRef.current) {
- scrollElementRef.current.scrollTop = scrollTop;
- scrollElementRef.current.scrollLeft = scrollLeft;
- }
- /* v8 ignore end */
- }, [scrollTop, scrollLeft]);
-
- // Check for horizontal scrollbar when scroll position changes
- useEffect(() => {
- const timeoutId = setTimeout(() => {
- checkHorizontalScrollbar();
- }, 0);
- return () => {
- clearTimeout(timeoutId);
- };
- }, [scrollLeft]);
-
- const widthClass = digitCount === 3 ? 'w-[calc(2ch*3)]' : 'w-[calc(2ch*2)]';
-
- return (
-
- {lineNumbers.map((lineNumber) => (
-
- {lineNumber}
-
- ))}
-