Files
windmill/frontend/src/lib/components/DiffEditor.svelte
T
2023-10-07 11:35:13 +02:00

89 lines
2.5 KiB
Svelte

<script lang="ts">
import { BROWSER } from 'esm-env'
import { onMount } from 'svelte'
// import 'monaco-editor/esm/vs/editor/edcore.main'
import { editor as meditor } from 'monaco-editor'
// import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
// import 'monaco-editor/esm/vs/basic-languages/go/go.contribution'
// import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
// import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
// import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
// import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
const SIDE_BY_SIDE_MIN_WIDTH = 700
export let automaticLayout = true
export let fixedOverflowWidgets = true
let diffEditor: meditor.IStandaloneDiffEditor | undefined
let diffDivEl: HTMLDivElement | null = null
let editorWidth: number = SIDE_BY_SIDE_MIN_WIDTH
function loadDiffEditor() {
// diffEditor = meditor.createDiffEditor(diffDivEl!, {
// automaticLayout,
// renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH,
// originalEditable: false,
// minimap: {
// enabled: false
// },
// fixedOverflowWidgets,
// scrollBeyondLastLine: false,
// lineDecorationsWidth: 15,
// lineNumbersMinChars: 2,
// autoDetectHighContrast: true,
// scrollbar: { alwaysConsumeMouseWheel: false }
// })
}
export function setupModel(
lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'javascript' | 'powershell'
) {
diffEditor?.setModel({
original: meditor.createModel('', lang),
modified: meditor.createModel('', lang)
})
}
export function setOriginal(code: string) {
diffEditor?.getModel()?.original?.setValue(code)
}
export function getOriginal(): string {
return diffEditor?.getModel()?.original.getValue() ?? ''
}
export function setModified(code: string) {
diffEditor?.getModel()?.modified?.setValue(code)
}
export function getModified(): string {
return diffEditor?.getModel()?.modified.getValue() ?? ''
}
export function show(): void {
diffDivEl?.classList.remove('hidden')
}
export function hide(): void {
diffDivEl?.classList.add('hidden')
}
function onWidthChange(editorWidth: number) {
diffEditor?.updateOptions({ renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH })
}
$: onWidthChange(editorWidth)
onMount(() => {
if (BROWSER) {
loadDiffEditor()
return () => {
diffEditor?.dispose()
}
}
})
</script>
<div bind:this={diffDivEl} class="{$$props.class} editor" bind:clientWidth={editorWidth} />