From 7efb1d79083b3c16fffbbeddaf932edbf519513b Mon Sep 17 00:00:00 2001
From: aooiuu <aooiu@qq.com>
Date: Sun, 22 Sep 2024 18:52:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=8D=A2=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Playground/index.vue           | 10 ++---
 docs/package.json                             |  5 ++-
 packages/web/package.json                     |  4 +-
 .../pages/pc/rule-info/JsonEditor/index.vue   | 44 +++----------------
 packages/web/src/utils/monaco.ts              | 18 --------
 packages/web/vite.config.mts                  |  2 +-
 pnpm-lock.yaml                                | 36 +++++++++++----
 7 files changed, 45 insertions(+), 74 deletions(-)
 delete mode 100644 packages/web/src/utils/monaco.ts

diff --git a/docs/.vitepress/components/Playground/index.vue b/docs/.vitepress/components/Playground/index.vue
index 6706ec23..f15a21f8 100644
--- a/docs/.vitepress/components/Playground/index.vue
+++ b/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);
diff --git a/docs/package.json b/docs/package.json
index 3041439a..9cdc0a97 100644
--- a/docs/package.json
+++ b/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"
   }
 }
diff --git a/packages/web/package.json b/packages/web/package.json
index 8fa56ef8..83a835ff 100644
--- a/packages/web/package.json
+++ b/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,6 +52,7 @@
     "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",
@@ -57,7 +60,6 @@
     "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",
diff --git a/packages/web/src/pages/pc/rule-info/JsonEditor/index.vue b/packages/web/src/pages/pc/rule-info/JsonEditor/index.vue
index 387e7946..9aa05e4a 100644
--- a/packages/web/src/pages/pc/rule-info/JsonEditor/index.vue
+++ b/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>
diff --git a/packages/web/src/utils/monaco.ts b/packages/web/src/utils/monaco.ts
deleted file mode 100644
index bf6432f0..00000000
--- a/packages/web/src/utils/monaco.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-
-import 'monaco-editor/esm/vs/language/json/monaco.contribution';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-
-// @ts-ignore
-self.MonacoEnvironment = {
-  getWorker(_: any, label: string) {
-    if (label === 'json') {
-      return new jsonWorker();
-    }
-    return new editorWorker();
-  }
-};
-
-export { monaco };
diff --git a/packages/web/vite.config.mts b/packages/web/vite.config.mts
index f50bcd50..357be909 100644
--- a/packages/web/vite.config.mts
+++ b/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;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f55fc752..dce12e57 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -117,12 +117,21 @@ importers:
       '@any-reader/rule-utils':
         specifier: workspace:^
         version: link:../packages/rule-utils
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.2
+        version: 6.2.2
+      '@codemirror/theme-one-dark':
+        specifier: ^6.1.2
+        version: 6.1.2
       '@shikijs/vitepress-twoslash':
         specifier: ^1.18.0
         version: 1.18.0(typescript@5.5.4)
       '@vueuse/core':
         specifier: ^11.1.0
         version: 11.1.0(vue@3.5.3(typescript@5.5.4))
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1(@lezer/common@1.2.1)
       js-base64:
         specifier: ^3.7.7
         version: 3.7.7
@@ -556,6 +565,12 @@ importers:
       '@any-reader/shared':
         specifier: workspace:^
         version: link:../shared
+      '@codemirror/lang-json':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@codemirror/theme-one-dark':
+        specifier: ^6.1.2
+        version: 6.1.2
       '@v-c/utils':
         specifier: ^0.0.26
         version: 0.0.26(typescript@5.5.4)
@@ -580,6 +595,9 @@ importers:
       blueimp-md5:
         specifier: ^2.19.0
         version: 2.19.0
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1(@lezer/common@1.2.1)
       dplayer:
         specifier: ^1.27.1
         version: 1.27.1
@@ -601,9 +619,6 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
-      monaco-editor:
-        specifier: 0.52.0
-        version: 0.52.0
       nprogress:
         specifier: ^0.2.0
         version: 0.2.0
@@ -996,6 +1011,9 @@ packages:
   '@codemirror/state@6.4.1':
     resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
 
+  '@codemirror/theme-one-dark@6.1.2':
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+
   '@codemirror/view@6.33.0':
     resolution: {integrity: sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==}
 
@@ -5420,9 +5438,6 @@ packages:
     resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
     hasBin: true
 
-  monaco-editor@0.52.0:
-    resolution: {integrity: sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==}
-
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -8099,6 +8114,13 @@ snapshots:
 
   '@codemirror/state@6.4.1': {}
 
+  '@codemirror/theme-one-dark@6.1.2':
+    dependencies:
+      '@codemirror/language': 6.10.3
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.33.0
+      '@lezer/highlight': 1.2.1
+
   '@codemirror/view@6.33.0':
     dependencies:
       '@codemirror/state': 6.4.1
@@ -13515,8 +13537,6 @@ snapshots:
     dependencies:
       commander: 12.1.0
 
-  monaco-editor@0.52.0: {}
-
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}