feat: migrate from react-monaco-editor to @monaco-editor/react and update editor components (#5263)

* feat: migrate from react-monaco-editor to @monaco-editor/react and update editor components

* chore: add acknowledgments for contributors in update log

* feat: enhance frontend information editing component for improved performance

src/components/profile/editor-viewer.tsx

@@ -1,7 +1,8 @@
+import MonacoEditor from "@monaco-editor/react";
 import {
+  CloseFullscreenRounded,
   FormatPaintRounded,
   OpenInFullRounded,
-  CloseFullscreenRounded,
 } from "@mui/icons-material";
 import {
   Button,
@@ -22,7 +23,6 @@ import { configureMonacoYaml } from "monaco-yaml";
 import { nanoid } from "nanoid";
 import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import MonacoEditor from "react-monaco-editor";
 import pac from "types-pac/pac.d.ts?raw";
 
 import { showNotice } from "@/services/noticeService";
@@ -103,17 +103,15 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
     [initialData],
   );
 
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>(undefined);
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const prevData = useRef<string | undefined>("");
   const currData = useRef<string | undefined>("");
 
-  const editorWillMount = () => {
+  const beforeMount = () => {
     monacoInitialization(); // initialize monaco
   };
 
-  const editorDidMount = async (
-    editor: monaco.editor.IStandaloneCodeEditor,
-  ) => {
+  const onMount = async (editor: monaco.editor.IStandaloneCodeEditor) => {
     editorRef.current = editor;
 
     // retrieve initial data
@@ -177,12 +175,12 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
     return () => {
       unlistenResized.then((fn) => fn());
       editorRef.current?.dispose();
-      editorRef.current = undefined;
+      editorRef.current = null;
     };
   }, [editorResize]);
 
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="xl" fullWidth>
+    <Dialog open={open} onClose={handleClose} maxWidth="xl" fullWidth>
       <DialogTitle>{resolvedTitle}</DialogTitle>
 
       <DialogContent
@@ -218,8 +216,8 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
             fontLigatures: false, // 连字符
             smoothScrolling: true, // 平滑滚动
           }}
-          editorWillMount={editorWillMount}
-          editorDidMount={editorDidMount}
+          beforeMount={beforeMount}
+          onMount={onMount}
           onChange={handleChange}
         />
 

src/components/profile/groups-editor-viewer.tsx

@@ -1,19 +1,20 @@
 import {
   DndContext,
-  closestCenter,
+  DragEndEvent,
   KeyboardSensor,
   PointerSensor,
+  closestCenter,
   useSensor,
   useSensors,
-  DragEndEvent,
 } from "@dnd-kit/core";
 import {
   SortableContext,
   sortableKeyboardCoordinates,
 } from "@dnd-kit/sortable";
+import MonacoEditor from "@monaco-editor/react";
 import {
-  VerticalAlignTopRounded,
   VerticalAlignBottomRounded,
+  VerticalAlignTopRounded,
 } from "@mui/icons-material";
 import {
   Autocomplete,
@@ -32,8 +33,8 @@ import {
 } from "@mui/material";
 import { useLockFn } from "ahooks";
 import {
-  requestIdleCallback,
   cancelIdleCallback,
+  requestIdleCallback,
 } from "foxact/request-idle-callback";
 import yaml from "js-yaml";
 import {
@@ -45,7 +46,6 @@ import {
 } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import MonacoEditor from "react-monaco-editor";
 import { Virtuoso } from "react-virtuoso";
 
 import { Switch } from "@/components/base";
@@ -1000,7 +1000,7 @@ export const GroupsEditorViewer = (props: Props) => {
               fontLigatures: false, // 连字符
               smoothScrolling: true, // 平滑滚动
             }}
-            onChange={(value) => setCurrData(value)}
+            onChange={(value) => setCurrData(value ?? "")}
           />
         )}
       </DialogContent>

src/components/profile/proxies-editor-viewer.tsx

@@ -1,19 +1,20 @@
 import {
   DndContext,
-  closestCenter,
+  DragEndEvent,
   KeyboardSensor,
   PointerSensor,
+  closestCenter,
   useSensor,
   useSensors,
-  DragEndEvent,
 } from "@dnd-kit/core";
 import {
   SortableContext,
   sortableKeyboardCoordinates,
 } from "@dnd-kit/sortable";
+import MonacoEditor from "@monaco-editor/react";
 import {
-  VerticalAlignTopRounded,
   VerticalAlignBottomRounded,
+  VerticalAlignTopRounded,
 } from "@mui/icons-material";
 import {
   Box,
@@ -37,7 +38,6 @@ import {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import MonacoEditor from "react-monaco-editor";
 import { Virtuoso } from "react-virtuoso";
 
 import { ProxyItem } from "@/components/profile/proxy-item";
@@ -490,7 +490,7 @@ export const ProxiesEditorViewer = (props: Props) => {
               fontLigatures: false, // 连字符
               smoothScrolling: true, // 平滑滚动
             }}
-            onChange={(value) => setCurrData(value)}
+            onChange={(value) => setCurrData(value ?? "")}
           />
         )}
       </DialogContent>

src/components/profile/rules-editor-viewer.tsx

@@ -1,19 +1,20 @@
 import {
   DndContext,
-  closestCenter,
+  DragEndEvent,
   KeyboardSensor,
   PointerSensor,
+  closestCenter,
   useSensor,
   useSensors,
-  DragEndEvent,
 } from "@dnd-kit/core";
 import {
   SortableContext,
   sortableKeyboardCoordinates,
 } from "@dnd-kit/sortable";
+import MonacoEditor from "@monaco-editor/react";
 import {
-  VerticalAlignTopRounded,
   VerticalAlignBottomRounded,
+  VerticalAlignTopRounded,
 } from "@mui/icons-material";
 import {
   Autocomplete,
@@ -39,7 +40,6 @@ import {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import MonacoEditor from "react-monaco-editor";
 import { Virtuoso } from "react-virtuoso";
 
 import { Switch } from "@/components/base";
@@ -769,7 +769,7 @@ export const RulesEditorViewer = (props: Props) => {
               fontLigatures: false, // 连字符
               smoothScrolling: true, // 平滑滚动
             }}
-            onChange={(value) => setCurrData(value)}
+            onChange={(value) => setCurrData(value ?? "")}
           />
         )}
       </DialogContent>

src/components/setting/mods/dns-viewer.tsx

@@ -1,3 +1,4 @@
+import MonacoEditor from "@monaco-editor/react";
 import { RestartAltRounded } from "@mui/icons-material";
 import {
   Box,
@@ -25,7 +26,6 @@ import {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import MonacoEditor from "react-monaco-editor";
 
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { useClash } from "@/hooks/use-clash";
@@ -568,12 +568,12 @@ export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
   });
 
   // YAML编辑器内容变更处理
-  const handleYamlChange = (value: string) => {
+  const handleYamlChange = (value?: string) => {
     setYamlContent(value || "");
 
     // 允许YAML编辑后立即分析和更新表单值
     try {
-      const config = yaml.load(value) as any;
+      const config = yaml.load(value || "") as any;
       if (config && typeof config === "object") {
         setTimeout(() => {
           updateValuesFromConfig(config);