konnosDiffEditor.tsx53 lines · main
| 1 | import { DiffEditor as BaseDiffEditor } from '@monaco-editor/react' |
| 2 | import type { editor as monacoEditor } from 'monaco-editor' |
| 3 | |
| 4 | interface DiffViewerProps { |
| 5 | /** Original/left hand side content (optional) */ |
| 6 | original?: string |
| 7 | /** Modified/right hand side content */ |
| 8 | modified: string | undefined |
| 9 | /** Language identifier understood by Monaco */ |
| 10 | language?: string |
| 11 | /** Height for the editor container */ |
| 12 | height?: string | number |
| 13 | /** Diff Editor Options */ |
| 14 | options?: monacoEditor.IStandaloneDiffEditorConstructionOptions |
| 15 | onMount?: (editor: monacoEditor.IStandaloneDiffEditor) => void |
| 16 | } |
| 17 | |
| 18 | // Centralised set of options so all diff editors look the same |
| 19 | const DEFAULT_OPTIONS: monacoEditor.IStandaloneDiffEditorConstructionOptions = { |
| 20 | fontSize: 13, |
| 21 | minimap: { enabled: false }, |
| 22 | wordWrap: 'on', |
| 23 | lineNumbers: 'on', |
| 24 | folding: false, |
| 25 | lineNumbersMinChars: 3, |
| 26 | scrollBeyondLastLine: false, |
| 27 | renderSideBySide: false, |
| 28 | padding: { top: 4 }, |
| 29 | } |
| 30 | |
| 31 | export const DiffEditor = ({ |
| 32 | original = '', |
| 33 | modified = '', |
| 34 | language = 'pgsql', |
| 35 | height = '100%', |
| 36 | options, |
| 37 | onMount, |
| 38 | }: DiffViewerProps) => ( |
| 39 | <BaseDiffEditor |
| 40 | // [Joshen] These ones are meant to solve a UI issue that seems to only be happening locally |
| 41 | // Happens when you use the inline assistant in the SQL Editor and accept the suggestion |
| 42 | // Error: TextModel got disposed before DiffEditorWidget model got reset |
| 43 | keepCurrentOriginalModel |
| 44 | keepCurrentModifiedModel |
| 45 | theme="briven" |
| 46 | language={language} |
| 47 | height={height} |
| 48 | original={original} |
| 49 | modified={modified} |
| 50 | options={{ ...DEFAULT_OPTIONS, ...options }} |
| 51 | onMount={onMount} |
| 52 | /> |
| 53 | ) |