feat: 更换编辑器

docs/.vitepress/components/Playground/index.vue

@@ -6,10 +6,11 @@
 </template>
 
 <script setup>
-import { ref, shallowRef, watch, onMounted } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
 import { createRuleManager } from '@any-reader/core/browser';
 import { decodeHash, encodeHash } from '../../utils/hash';
 
@@ -62,12 +63,7 @@ watch([inputText], () => {
   }
 });
 
-const extensions = [javascript()];
-
-const view = shallowRef();
-const handleReady = (payload) => {
-  view.value = payload.view;
-};
+const extensions = [javascript(), oneDark];
 
 function exec() {
   eval(inputText.value);

docs/package.json

@@ -11,12 +11,15 @@
   "devDependencies": {
     "@any-reader/core": "workspace:^",
     "@any-reader/rule-utils": "workspace:^",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@shikijs/vitepress-twoslash": "^1.18.0",
+    "@vueuse/core": "^11.1.0",
+    "codemirror": "^6.0.1",
     "js-base64": "^3.7.7",
     "mermaid": "^11.2.1",
     "vitepress": "^1.3.4",
     "vitepress-plugin-mermaid": "^2.0.16",
-    "@vueuse/core": "^11.1.0",
     "vue-codemirror": "^6.1.1"
   }
 }

packages/web/package.json

@@ -42,6 +42,8 @@
     "@any-reader/core": "workspace:^",
     "@any-reader/rule-utils": "workspace:^",
     "@any-reader/shared": "workspace:^",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@v-c/utils": "^0.0.26",
     "@vscode/codicons": "^0.0.36",
     "@vscode/webview-ui-toolkit": "^1.4.0",
@@ -50,14 +52,14 @@
     "axios": "^1.7.7",
     "bcryptjs": "^2.4.3",
     "blueimp-md5": "^2.19.0",
+    "codemirror": "^6.0.1",
     "dplayer": "^1.27.1",
     "easy-post-message": "^0.1.0",
     "electron-localshortcut": "^3.2.1",
     "electron-updater": "^6.3.4",
     "file-saver": "^2.0.5",
     "hls.js": "^1.5.15",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "0.52.0",
     "nprogress": "^0.2.0",
     "p-limit": "^6.1.0",
     "p-queue": "^8.0.1",

packages/web/src/pages/pc/rule-info/JsonEditor/index.vue

@@ -1,47 +1,15 @@
 <template>
   <div class="flex-1 overflow-auto">
-    <div ref="monacoEl" class="h-full w-full"></div>
+    <codemirror v-model="modelValue" class="h-full w-full" :autofocus="true" :extensions="extensions" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { monaco } from '@/utils/monaco';
-import type { editor as Editor } from 'monaco-editor';
+import { Codemirror } from 'vue-codemirror';
+import { json } from '@codemirror/lang-json';
+import { oneDark } from '@codemirror/theme-one-dark';
 
-const modelValue = defineModel<string>();
-let lastValue = '';
-
-const monacoEl = ref<HTMLElement>();
-let editor!: Editor.IStandaloneCodeEditor;
-
-onMounted(() => {
-  editor = monaco.editor.create(monacoEl.value!, {
-    value: modelValue.value,
-    language: 'json',
-    theme: 'vs-dark',
-    automaticLayout: true,
-    minimap: {
-      enabled: false
-    }
-  });
-  // configure the JSON language support with schemas and schema associations
-  // monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-  //   validate: true
-  // });
-  editor.onDidChangeModelContent(() => {
-    const value = editor.getValue();
-    if (modelValue.value !== value) {
-      lastValue = value;
-      modelValue.value = value;
-    }
-  });
-});
+const extensions = [json(), oneDark];
 
-watch(modelValue, (value) => {
-  if (value !== lastValue) editor?.setValue(value as string);
-});
-
-onUnmounted(() => {
-  editor?.dispose();
-});
+const modelValue = defineModel<string>();
 </script>

packages/web/vite.config.mts

@@ -47,7 +47,7 @@ export default defineConfig(({ mode, command }) => {
       rollupOptions: {
         output: {
           manualChunks: (id) => {
-            const vendors = ['monaco-editor', 'ant-design-vue', 'hls.js'];
+            const vendors = ['ant-design-vue', 'hls.js'];
             for (const vendor of vendors) {
               if (id.includes(vendor)) {
                 return vendor;