| 1 | import { lazy, Suspense } from "react"; |
| 2 | |
| 3 | export interface DiffProps { |
| 4 | original?: string; |
| 5 | modified?: string; |
| 6 | diff?: string; |
| 7 | language?: string; |
| 8 | maxHeight?: number; |
| 9 | } |
| 10 | |
| 11 | // ── EDITOR SEAM (diff) ─────────────────────────────────────────────────────── |
| 12 | // before/after rendering for edit tools, mirroring CodeViewer's seam. Swap the |
| 13 | // lazily-imported module to upgrade: |
| 14 | // |
| 15 | // ./editors/HljsDiff current — highlight.js line diff (LCS) |
| 16 | // ./editors/MonacoDiff monaco DiffEditor via @monaco-editor/react |
| 17 | // ./editors/CodeMirrorMerge @codemirror/merge |
| 18 | // |
| 19 | // The replacement only has to honor DiffProps. See desktop/README.md. |
| 20 | const Impl = lazy(() => import("./editors/HljsDiff")); |
| 21 | |
| 22 | export function DiffView(props: DiffProps) { |
| 23 | return ( |
| 24 | <Suspense fallback={<pre className="code code--loading">{props.modified ?? props.diff ?? ""}</pre>}> |
| 25 | <Impl {...props} /> |
| 26 | </Suspense> |
| 27 | ); |
| 28 | } |
| 29 |