refactor(web): change diff editor to monaco-editor-react (#1802)

* fix(web): change diff editor to monaco-editor-react

* fix(web): fix running methods & change editor cdn

* fix: change cdn

web/src/App.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { BrowserRouter, useRoutes } from "react-router-dom";
 import { ChakraProvider } from "@chakra-ui/react";
 import { css, Global } from "@emotion/react";
+import { loader } from "@monaco-editor/react";
 import { wrapUseRoutes } from "@sentry/react";
 import * as Sentry from "@sentry/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -45,6 +46,10 @@ const queryClient = new QueryClient({
   },
 });
 
+loader.config({
+  paths: { vs: "https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.43.0/min/vs" },
+});
+
 function APP() {
   const { i18n } = useTranslation();
 

web/src/components/Editor/CommonDiffEditor.tsx

@@ -1,47 +1,35 @@
-import { useEffect, useRef } from "react";
 import { useColorMode } from "@chakra-ui/react";
-import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import { DiffEditor } from "@monaco-editor/react";
 
 import { COLOR_MODE } from "@/constants";
 
-function CommonDiffEditor(props: { original: string; modified: string }) {
+export default function CommonDiffEditor(props: { original: string; modified: string }) {
   const { original, modified } = props;
-
-  const editorRef = useRef<monaco.editor.IDiffEditor | null>();
-
-  const monacoEl = useRef(null);
-
   const { colorMode } = useColorMode();
 
-  useEffect(() => {
-    if (monacoEl && !editorRef.current) {
-      editorRef.current = monaco.editor.createDiffEditor(monacoEl.current!, {
-        readOnly: true,
-        automaticLayout: true,
-        minimap: {
-          enabled: false,
-        },
-        renderOverviewRuler: false,
-        fontSize: 14,
-        scrollBeyondLastLine: false,
-        scrollbar: {
-          verticalScrollbarSize: 4,
-          horizontalScrollbarSize: 6,
-          alwaysConsumeMouseWheel: false,
-        },
-        theme: colorMode === COLOR_MODE.dark ? "lafEditorThemeDark" : "lafEditorTheme",
-      });
-
-      editorRef.current.setModel({
-        original: monaco.editor.createModel(original, "typescript"),
-        modified: monaco.editor.createModel(modified, "typescript"),
-      });
-    }
-
-    return () => {};
-  }, [colorMode, modified, original]);
-
-  return <div className=" border-t" style={{ height: "70vh", width: "100%" }} ref={monacoEl}></div>;
+  const options = {
+    readOnly: true,
+    automaticLayout: true,
+    minimap: {
+      enabled: false,
+    },
+    renderOverviewRuler: false,
+    fontSize: 14,
+    scrollBeyondLastLine: false,
+    scrollbar: {
+      verticalScrollbarSize: 4,
+      horizontalScrollbarSize: 6,
+      alwaysConsumeMouseWheel: false,
+    },
+  };
+  return (
+    <DiffEditor
+      original={original}
+      modified={modified}
+      height={"70vh"}
+      options={options}
+      language="typescript"
+      theme={colorMode === COLOR_MODE.dark ? "vs-dark" : "vs"}
+    />
+  );
 }
-
-export default CommonDiffEditor;

web/src/pages/app/functions/mods/DebugPanel/index.tsx

@@ -102,10 +102,17 @@ export default function DebugPanel(props: { containerRef: any }) {
   ];
 
   useEffect(() => {
-    if (currentFunction?.methods) {
-      setRunningMethod(currentFunction.params?.runningMethod || currentFunction.methods[0]);
+    const lastRunningMethod = currentFunction.params?.runningMethod;
+    if (
+      currentFunction?.methods &&
+      lastRunningMethod &&
+      currentFunction.methods.includes(lastRunningMethod)
+    ) {
+      setRunningMethod(lastRunningMethod);
+    } else if (currentFunction?.methods) {
+      setRunningMethod(currentFunction.methods[0]);
     }
-  }, [setRunningMethod, currentFunction]);
+  }, [currentFunction]);
 
   useEffect(() => {
     setBodyParams(currentFunction?.params?.bodyParams);

web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx

@@ -119,6 +119,7 @@ const CreateModal = (props: {
       setCurrentFunction({ ...currentFunction, name: data.name });
     } else if (isEdit && functionItem.name === data.name) {
       res = await updateFunctionMutation.mutateAsync(data);
+      setCurrentFunction({ ...currentFunction, ...data });
     } else {
       res = await createFunctionMutation.mutateAsync(data);
     }