78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
/**
|
||
* Monaco split diff editor (VS Code–style). Replaces the custom table-based
|
||
* `SplitDiffViewer`: same Monaco bundle as `MonacoViewer`, with syntax
|
||
* highlighting, scroll sync, and virtualisation for large files.
|
||
*/
|
||
import { useMemo } from 'react';
|
||
import { DiffEditor, languageForPath } from '@/lib/monaco/loader';
|
||
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
|
||
import { cn } from '@/lib/utils';
|
||
|
||
export interface MonacoDiffViewerProps {
|
||
filePath: string;
|
||
/** Left pane; `null`/`undefined` treated as empty (e.g. new file → all additions). */
|
||
original: string | null | undefined;
|
||
modified: string;
|
||
className?: string;
|
||
}
|
||
|
||
function diffModelPath(filePath: string, side: 'orig' | 'mod'): string {
|
||
const key = encodeURIComponent(filePath.replace(/\\/g, '/'));
|
||
return `inmemory://niancode-diff/${side}/${key}`;
|
||
}
|
||
|
||
export default function MonacoDiffViewer({
|
||
filePath,
|
||
original,
|
||
modified,
|
||
className,
|
||
}: MonacoDiffViewerProps) {
|
||
const language = useMemo(() => languageForPath(filePath), [filePath]);
|
||
const originalPath = useMemo(() => diffModelPath(filePath, 'orig'), [filePath]);
|
||
const modifiedPath = useMemo(() => diffModelPath(filePath, 'mod'), [filePath]);
|
||
const left = original ?? '';
|
||
|
||
return (
|
||
<div
|
||
data-testid="monaco-diff-viewer"
|
||
className={cn('niancode-diff-editor h-full w-full min-h-0', className)}
|
||
>
|
||
<DiffEditor
|
||
height="100%"
|
||
language={language}
|
||
original={left}
|
||
modified={modified}
|
||
originalModelPath={originalPath}
|
||
modifiedModelPath={modifiedPath}
|
||
theme="vs"
|
||
loading={
|
||
<div className="flex h-full items-center justify-center">
|
||
<LoadingSpinner />
|
||
</div>
|
||
}
|
||
options={{
|
||
readOnly: true,
|
||
domReadOnly: true,
|
||
originalEditable: false,
|
||
renderSideBySide: true,
|
||
useInlineViewWhenSpaceIsLimited: false,
|
||
renderIndicators: true,
|
||
renderOverviewRuler: true,
|
||
renderMarginRevertIcon: false,
|
||
minimap: { enabled: false },
|
||
fontSize: 13,
|
||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
|
||
scrollBeyondLastLine: false,
|
||
smoothScrolling: true,
|
||
wordWrap: 'on',
|
||
diffWordWrap: 'on',
|
||
automaticLayout: true,
|
||
guides: { indentation: false },
|
||
stickyScroll: { enabled: false },
|
||
padding: { top: 8, bottom: 8 },
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|