feat: Monaco editor for StringEditor

- Install monaco-editor + @guolao/vue-monaco-editor
- main.ts: loader.config + MonacoEnvironment worker setup
- StringEditor.vue: replace textarea with Monaco editor
- JSON syntax highlighting, folding, word wrap
- Read-only mode when not editing, auto-detect JSON
- Theme follows app theme (vs-dark/vs)
- Font size follows app settings

src/main.ts

@@ -4,9 +4,24 @@ import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { loader } from '@guolao/vue-monaco-editor'
+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'
 import App from './App.vue'
 import './styles/global.css'
 
+// Monaco worker setup for Vite
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === 'json') return new jsonWorker()
+    return new editorWorker()
+  },
+}
+
+// Use local monaco-editor
+loader.config({ monaco })
+
 const app = createApp(App)
 app.use(createPinia())
 app.use(ElementPlus, { size: 'small' })