fix: editor init error

package.json

@@ -24,7 +24,6 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@juggle/resize-observer": "^3.4.0",
-    "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.15.20",
     "@mui/lab": "5.0.0-alpha.149",
     "@mui/material": "^5.15.20",
@@ -48,6 +47,7 @@
     "react-hook-form": "^7.52.0",
     "react-i18next": "^13.5.0",
     "react-markdown": "^9.0.1",
+    "react-monaco-editor": "^0.55.0",
     "react-router-dom": "^6.23.1",
     "react-transition-group": "^4.4.5",
     "react-virtuoso": "^4.7.11",

pnpm-lock.yaml

@@ -25,9 +25,6 @@ importers:
       "@juggle/resize-observer":
         specifier: ^3.4.0
         version: 3.4.0
-      "@monaco-editor/react":
-        specifier: ^4.6.0
-        version: 4.6.0(monaco-editor@0.49.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       "@mui/icons-material":
         specifier: ^5.15.20
         version: 5.15.20(@mui/material@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
@@ -97,6 +94,9 @@ importers:
       react-markdown:
         specifier: ^9.0.1
         version: 9.0.1(@types/react@18.3.3)(react@18.3.1)
+      react-monaco-editor:
+        specifier: ^0.55.0
+        version: 0.55.0(@types/react@18.3.3)(monaco-editor@0.49.0)(react@18.3.1)
       react-router-dom:
         specifier: ^6.23.1
         version: 6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1546,24 +1546,6 @@ packages:
         integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==,
       }
 
-  "@monaco-editor/loader@1.4.0":
-    resolution:
-      {
-        integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==,
-      }
-    peerDependencies:
-      monaco-editor: ">= 0.21.0 < 1"
-
-  "@monaco-editor/react@4.6.0":
-    resolution:
-      {
-        integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==,
-      }
-    peerDependencies:
-      monaco-editor: ">= 0.25.0 < 1"
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   "@mui/base@5.0.0-beta.20":
     resolution:
       {
@@ -3863,6 +3845,16 @@ packages:
       "@types/react": ">=18"
       react: ">=18"
 
+  react-monaco-editor@0.55.0:
+    resolution:
+      {
+        integrity: sha512-GdEP0Q3Rn1dczfKEEyY08Nes5plWwIYU4sWRBQO0+jsQWQsKMHKCC6+hPRwR7G/4aA3V/iU9jSmWPzVJYMVFSQ==,
+      }
+    peerDependencies:
+      "@types/react": ">=16 <= 18"
+      monaco-editor: ^0.44.0
+      react: ">=16 <= 18"
+
   react-refresh@0.14.2:
     resolution:
       {
@@ -4106,12 +4098,6 @@ packages:
         integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==,
       }
 
-  state-local@1.0.7:
-    resolution:
-      {
-        integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==,
-      }
-
   stringify-entities@4.0.4:
     resolution:
       {
@@ -5539,18 +5525,6 @@ snapshots:
 
   "@juggle/resize-observer@3.4.0": {}
 
-  "@monaco-editor/loader@1.4.0(monaco-editor@0.49.0)":
-    dependencies:
-      monaco-editor: 0.49.0
-      state-local: 1.0.7
-
-  "@monaco-editor/react@4.6.0(monaco-editor@0.49.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
-    dependencies:
-      "@monaco-editor/loader": 1.4.0(monaco-editor@0.49.0)
-      monaco-editor: 0.49.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   "@mui/base@5.0.0-beta.20(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)":
     dependencies:
       "@babel/runtime": 7.24.7
@@ -7026,6 +7000,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  react-monaco-editor@0.55.0(@types/react@18.3.3)(monaco-editor@0.49.0)(react@18.3.1):
+    dependencies:
+      "@types/react": 18.3.3
+      monaco-editor: 0.49.0
+      prop-types: 15.8.1
+      react: 18.3.1
+
   react-refresh@0.14.2: {}
 
   react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -7182,8 +7163,6 @@ snapshots:
 
   space-separated-tokens@2.0.2: {}
 
-  state-local@1.0.7: {}
-
   stringify-entities@4.0.4:
     dependencies:
       character-entities-html4: 2.1.0

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

@@ -20,8 +20,7 @@ import { useThemeMode } from "@/services/states";
 import { readProfileFile, saveProfileFile } from "@/services/cmds";
 import { Notice, Switch } from "@/components/base";
 import getSystem from "@/utils/get-system";
-
-import Editor from "@monaco-editor/react";
+import MonacoEditor from "react-monaco-editor";
 
 interface Props {
   profileUid: string;
@@ -339,7 +338,7 @@ export const RulesEditorViewer = (props: Props) => {
             marginLeft: "10px",
           }}
         >
-          <Editor
+          <MonacoEditor
             language="yaml"
             theme={themeMode === "light" ? "vs" : "vs-dark"}
             height="100%"