Files
supabase/apps/studio/components/ui/DiffViewer.tsx
T
Ivan VasilovandAlaister Young e4925a944c chore: Bump studio nextjs to v16 (#40792)
* Bump Nextjs to v16.

* Fix studio issues.

* move docs graphiql css import to layout

* update sentry

* add missing docs package and fix imports

* only update studio

* ignore next-env.d.ts

* update bundle analyzer

* middleware to proxy

* update lockfile

* remove --turbopack dev flag as it's the default

* Import only types from the monaco editor.

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2025-12-03 14:33:55 +01:00

49 lines
1.2 KiB
TypeScript

import { DiffEditor } from '@monaco-editor/react'
import type { editor as monacoEditor } from 'monaco-editor'
interface DiffViewerProps {
/** Original/left hand side content (optional) */
original?: string
/** Modified/right hand side content */
modified: string | undefined
/** Language identifier understood by Monaco */
language: string
/** Height for the editor container */
height?: string | number
/** Whether to render diffs side-by-side */
sideBySide?: boolean
}
// Centralised set of options so all diff editors look the same
const DEFAULT_OPTIONS: monacoEditor.IStandaloneDiffEditorConstructionOptions = {
readOnly: true,
renderSideBySide: false,
minimap: { enabled: false },
wordWrap: 'on',
lineNumbers: 'on',
folding: false,
padding: { top: 16, bottom: 16 },
lineNumbersMinChars: 3,
fontSize: 13,
scrollBeyondLastLine: false,
}
export const DiffViewer = ({
original = '',
modified = '',
language,
height = '100%',
sideBySide = false,
}: DiffViewerProps) => (
<DiffEditor
theme="supabase"
language={language}
height={height}
original={original}
modified={modified}
options={{ ...DEFAULT_OPTIONS, renderSideBySide: sideBySide }}
/>
)
export default DiffViewer