77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
<template>
|
|
<div ref="container" class="monaco-host" />
|
|
</template>
|
|
|
|
<script>
|
|
import * as monaco from 'monaco-editor';
|
|
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
|
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
|
|
|
|
// Configure Monaco web workers once (Vite bundles each ?worker as its own chunk).
|
|
if (!window.__mixedassetsMonacoEnv) {
|
|
self.MonacoEnvironment = {
|
|
getWorker(_workerId, label) {
|
|
return label === 'json' ? new jsonWorker() : new editorWorker();
|
|
}
|
|
};
|
|
window.__mixedassetsMonacoEnv = true;
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
modelValue: { type: String, default: '' },
|
|
readOnly: { type: Boolean, default: false },
|
|
theme: { type: String, default: 'vs-dark' }
|
|
},
|
|
emits: ['update:modelValue'],
|
|
mounted() {
|
|
this.editor = monaco.editor.create(this.$refs.container, {
|
|
value: this.modelValue,
|
|
language: 'json',
|
|
theme: this.theme,
|
|
automaticLayout: true,
|
|
minimap: { enabled: false },
|
|
fontSize: 13,
|
|
tabSize: 2,
|
|
scrollBeyondLastLine: false,
|
|
readOnly: this.readOnly,
|
|
formatOnPaste: true,
|
|
fixedOverflowWidgets: true
|
|
});
|
|
this.editor.onDidChangeModelContent(() => {
|
|
const value = this.editor.getValue();
|
|
if (value !== this.modelValue) this.$emit('update:modelValue', value);
|
|
});
|
|
},
|
|
beforeUnmount() {
|
|
this.editor?.dispose();
|
|
},
|
|
watch: {
|
|
modelValue(value) {
|
|
if (this.editor && value !== this.editor.getValue()) this.editor.setValue(value || '');
|
|
},
|
|
readOnly(value) {
|
|
this.editor?.updateOptions({ readOnly: value });
|
|
},
|
|
theme(value) {
|
|
monaco.editor.setTheme(value);
|
|
}
|
|
},
|
|
methods: {
|
|
format() {
|
|
this.editor?.getAction('editor.action.formatDocument')?.run();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.monaco-host {
|
|
width: 100%;
|
|
height: 540px;
|
|
border: 1px solid rgba(128, 128, 128, 0.3);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|