Updated A LOT

src/components/MonacoJsonEditor.vue

@@ -0,0 +1,76 @@
+<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>