fix(form/Editor): only use the bundled monaco editor (#3169)

Author: SkyeYoung

src/components/form/Editor.tsx

@@ -15,11 +15,8 @@
  * limitations under the License.
  */
 import { InputWrapper, type InputWrapperProps, Skeleton } from '@mantine/core';
-import { Editor, loader, type Monaco, useMonaco } from '@monaco-editor/react';
-import { clsx } from 'clsx';
-import { editor } 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 { Editor } from '@monaco-editor/react';
+import clsx from 'clsx';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   type FieldValues,
@@ -29,26 +26,13 @@ import {
 } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import { genControllerProps } from './util';
+import { monaco, setupMonacoEditor } from '@/utils/monaco';
 
-type SetupMonacoProps = {
-  monaco: Monaco;
-};
+import { genControllerProps } from './util';
 
-const setupMonaco = ({ monaco }: SetupMonacoProps) => {
-  window.MonacoEnvironment = {
-    getWorker(_, label) {
-      if (label === 'json') {
-        return new jsonWorker();
-      }
-      return new editorWorker();
-    },
-  };
-  loader.config({ monaco });
-  return loader.init();
-};
+setupMonacoEditor();
 
-const options: editor.IStandaloneEditorConstructionOptions = {
+const options: monaco.editor.IStandaloneEditorConstructionOptions = {
   minimap: { enabled: false },
   contextmenu: false,
   lineNumbersMinChars: 3,
@@ -102,11 +86,9 @@ export const FormItemEditor = <T extends FieldValues>(
     fieldState,
   } = useController<T>(enhancedControllerProps);
 
-  const monaco = useMonaco();
   const [internalLoading, setLoading] = useState(false);
 
   useEffect(() => {
-    if (!monaco) return;
     setLoading(true);
 
     const schemas = [];
@@ -125,7 +107,7 @@ export const FormItemEditor = <T extends FieldValues>(
     });
 
     setLoading(false);
-  }, [monaco, customSchema]);
+  }, [customSchema]);
 
   return (
     <InputWrapper
@@ -155,7 +137,6 @@ export const FormItemEditor = <T extends FieldValues>(
             restField.disabled && 'editor-wrapper--disabled'
           ),
         }}
-        beforeMount={(monaco) => setupMonaco({ monaco })}
         defaultValue={controllerProps.defaultValue}
         value={value}
         onChange={fOnChange}

src/utils/monaco.ts

@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import 'monaco-editor/esm/vs/editor/editor.all.js';
+import 'monaco-editor/esm/vs/language/json/monaco.contribution';
+
+import { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+
+export { monaco };
+
+export const setupMonacoEditor = () => {
+  self.MonacoEnvironment = {
+    getWorker(_, label) {
+      if (label === 'json') return new jsonWorker();
+      return new editorWorker();
+    },
+  };
+  loader.config({ monaco });
+  loader.init();
+};

vite.config.ts

@@ -63,6 +63,21 @@ export default defineConfig({
       },
     }),
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'react-vendor': ['react', 'react-dom'],
+          'monaco-editor-vendor': ['monaco-editor', '@monaco-editor/react'],
+          'antd-vendor': [
+            'antd',
+            '@ant-design/pro-components',
+            '@ant-design/v5-patch-for-react-19',
+          ],
+        },
+      },
+    },
+  },
   plugins: [
     tsconfigPaths(),
     UnpluginIcons({