1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<script setup lang="ts">
import * as monaco from 'monaco-editor';
import { useStyleStore } from '@/stores/style.store';
const props = withDefaults(defineProps<{ options?: monaco.editor.IDiffEditorOptions }>(), { options: () => ({}) });
const { options } = toRefs(props);
const editorContainer = ref<HTMLElement | null>(null);
let editor: monaco.editor.IStandaloneDiffEditor | null = null;
monaco.editor.defineTheme('it-tools-dark', {
base: 'vs-dark',
inherit: true,
rules: [],
colors: {
'editor.background': '#00000000',
},
});
monaco.editor.defineTheme('it-tools-light', {
base: 'vs',
inherit: true,
rules: [],
colors: {
'editor.background': '#00000000',
},
});
const styleStore = useStyleStore();
watch(
() => styleStore.isDarkTheme,
isDarkTheme => monaco.editor.setTheme(isDarkTheme ? 'it-tools-dark' : 'it-tools-light'),
{ immediate: true },
);
watch(
() => options.value,
options => editor?.updateOptions(options),
{ immediate: true, deep: true },
);
useResizeObserver(editorContainer, () => {
editor?.layout();
});
onMounted(() => {
if (!editorContainer.value) {
return;
}
editor = monaco.editor.createDiffEditor(editorContainer.value, {
originalEditable: true,
minimap: {
enabled: false,
},
});
editor.setModel({
original: monaco.editor.createModel('original text', 'txt'),
modified: monaco.editor.createModel('modified text', 'txt'),
});
});
</script>
<template>
<div ref="editorContainer" h-600px />
</template>
|
