-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Monaco.vue
62 lines (56 loc) · 1.49 KB
/
Monaco.vue
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
<script setup lang="ts">
const props = defineProps<{
language: string
value: string
readOnly: boolean
}>()
const emit = defineEmits<(e: 'change', content: string) => void>()
const editorState = ref('loading')
const target = ref()
onMounted(async () => {
try {
const { useMonaco } = await import('./useMonacoEditor')
const { setContent } = useMonaco(target, {
language: props.language,
code: props.value,
readOnly: props.readOnly,
onChanged(content: string) {
emit('change', content)
},
onDidCreateEditor() {
editorState.value = 'ready'
}
})
watch(
() => props.value,
() => setContent(props.value)
)
emit('change', props.value)
} catch (_) {
editorState.value = 'error'
}
})
</script>
<template>
<div class="relative h-full w-full">
<div
v-if="editorState === 'loading'"
class="absolute left-0 top-0 h-full w-full flex justify-center items-center"
>
<Alert type="primary">
<span>Editor is loading...</span>
<Icon name="file-icons:sandbox" class="ml-2 inline" />
</Alert>
</div>
<div
v-else-if="editorState === 'error'"
class="absolute left-0 top-0 h-full w-full flex justify-center items-center"
>
<Alert type="warning">
<span>Error while loading editor!</span>
<Icon name="heroicons-outline:cog" class="inline ml-2" />
</Alert>
</div>
<div ref="target" class="h-full w-full" />
</div>
</template>