feat: Optimize Monaco editor loading (#12401)

Author: zhengkunwang223

agent/app/service/agents_channels.go

@@ -511,8 +511,6 @@ func setFeishuPluginEnabled(conf map[string]interface{}, enabled bool) {
 	entries := ensureChildMap(plugins, "entries")
 	lark := ensureChildMap(entries, "openclaw-lark")
 	lark["enabled"] = enabled
-	legacy := ensureChildMap(entries, "feishu")
-	legacy["enabled"] = false
 }
 
 func extractTelegramConfig(conf map[string]interface{}) dto.AgentTelegramConfig {

frontend/src/utils/monaco.ts

@@ -0,0 +1,32 @@
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.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 tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+
+let initialized = false;
+
+export function setupMonacoEnvironment() {
+    if (initialized) {
+        return;
+    }
+    initialized = true;
+
+    self.MonacoEnvironment = {
+        getWorker(_: string, 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 (['typescript', 'javascript'].includes(label)) {
+                return new tsWorker();
+            }
+            return new EditorWorker();
+        },
+    };
+}

frontend/src/views/app-store/installed/upgrade/diff/index.vue

@@ -20,8 +20,11 @@
 
 <script setup lang="ts">
 import { nextTick, ref } from 'vue';
+import { setupMonacoEnvironment } from '@/utils/monaco';
 import * as monaco from 'monaco-editor';
 
+setupMonacoEnvironment();
+
 const open = ref(false);
 const newContent = ref('');
 const oldContent = ref('');

frontend/src/views/host/file-management/code-editor/index.vue

@@ -389,14 +389,10 @@
 import { batchCheckFiles, createFile, getFileContent, getFilesTree, saveFileContent } from '@/api/modules/files';
 import i18n from '@/lang';
 import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message';
+import { setupMonacoEnvironment } from '@/utils/monaco';
 import * as monaco from 'monaco-editor';
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import { Languages } from '@/global/mimetype';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.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 tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 
 import type { TabPaneName } from 'element-plus';
 import { ElMessageBox, ElTreeV2 } from 'element-plus';
@@ -412,24 +408,7 @@ import noUpdateImage from '@/assets/images/no_update_app.svg';
 
 let editor: monaco.editor.IStandaloneCodeEditor | undefined;
 
-self.MonacoEnvironment = {
-    getWorker(workerId, label) {
-        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 (['typescript', 'javascript'].includes(label)) {
-            return new tsWorker();
-        }
-        return new EditorWorker();
-    },
-};
-
+setupMonacoEnvironment();
 interface EditProps {
     language: string;
     content: string;