chore: integrate monaco editor

Author: zeevenn

.npmrc

@@ -1 +1,2 @@
-registry=https://registry.npmmirror.com
+registry=https://registry.npmmirror.com
+ignore-workspace-root-check=true

apps/web/src/main.ts

@@ -3,6 +3,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { setupComponents } from './utils/setup-components'
 
+import './userWorker'
+
 import 'vue-sonner/style.css'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/xq-light.css'

apps/web/src/userWorker.ts

@@ -0,0 +1,27 @@
+import * as monaco from 'monaco-editor'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+// @ts-expect-error
+globalThis.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === `json`) {
+      return new JsonWorker()
+    }
+    if (label === `css` || label === `scss` || label === `less`) {
+      return new CssWorker()
+    }
+    if (label === `html` || label === `handlebars` || label === `razor`) {
+      return new HtmlWorker()
+    }
+    if (label === `typescript` || label === `javascript`) {
+      return new TsWorker()
+    }
+    return new EditorWorker()
+  },
+}
+
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)

eslint.config.mjs

@@ -13,5 +13,6 @@ export default antfu({
     'no-console': `off`,
     'no-debugger': `off`,
     'ts/no-namespace': `off`,
+    'ts/ban-ts-comment': `off`,
   },
 })

package.json

@@ -23,6 +23,9 @@
     "postinstall": "simple-git-hooks",
     "inspector": "pnpx node-modules-inspector"
   },
+  "dependencies": {
+    "monaco-editor": "^0.53.0"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "5.4.1",
     "@types/node": "^24.5.2",