fix(web): fix editor theme override & init with value (#1795)

labring · Jan 9, 2024 · b127a0b · b127a0b
1 parent 9d86105
commit b127a0b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 63 deletions.
diff --git a/web/src/components/Editor/ENVCodeEditor.tsx b/web/src/components/Editor/ENVCodeEditor.tsx
@@ -12,7 +12,6 @@ function ENVCodeEditor(props: {
   onChange?: (value: string | undefined) => void;
 }) {
   const { value, onChange, height = "100%", colorMode = COLOR_MODE.light } = props;
-
   const options = {
     lineNumbers: "off" as LineNumbersType,
     guides: {
@@ -41,8 +40,8 @@ function ENVCodeEditor(props: {
       value={value}
       options={options}
       onChange={onChange}
-      language={languageId}
-      theme={colorMode === COLOR_MODE.dark ? "dotenvDarkTheme" : "dotenvTheme"}
+      defaultLanguage={languageId}
+      theme={colorMode === COLOR_MODE.dark ? "vs-dark" : "vs"}
       beforeMount={(monaco) => {
         monaco.languages.register({
           id: languageId,
@@ -59,36 +58,6 @@ function ENVCodeEditor(props: {
             ],
           },
         });
-
-        monaco.editor.defineTheme("dotenvTheme", {
-          base: "vs",
-          inherit: true,
-          colors: {
-            "editor.background": "#ffffff00",
-            "editorLineNumber.foreground": "#aaa",
-            "editorOverviewRuler.border": "#ffffff00",
-            "editor.lineHighlightBackground": "#F7F8FA",
-            "scrollbarSlider.background": "#E8EAEC",
-            "editorIndentGuide.activeBackground": "#ddd",
-            "editorIndentGuide.background": "#eee",
-          },
-          rules: [
-            { token: "key", foreground: "953800" },
-            { token: "value", foreground: "2E4C7E" },
-            { token: "operator", foreground: "CF212E" },
-            { token: "comment", foreground: "0A3069" },
-          ],
-        });
-
-        monaco?.editor.defineTheme("dotenvDarkTheme", {
-          base: "vs-dark",
-          inherit: true,
-          rules: [],
-          colors: {
-            "editor.foreground": "#ffffff",
-            "editor.background": "#202631",
-          },
-        });
       }}
     />
   );

diff --git a/web/src/components/Editor/FunctionEditor.tsx b/web/src/components/Editor/FunctionEditor.tsx
@@ -34,8 +34,9 @@ function FunctionEditor(props: {
   path: string;
   colorMode?: string;
   fontSize?: number;
+  value?: string;
 }) {
-  const { onChange, path, className, colorMode = COLOR_MODE.light, fontSize = 14 } = props;
+  const { onChange, path, className, colorMode = COLOR_MODE.light, fontSize = 14, value } = props;
 
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>();
   const subscriptionRef = useRef<monaco.IDisposable | undefined>(undefined);
@@ -155,8 +156,8 @@ function FunctionEditor(props: {
             lineNumbersMinChars: 4,
             fontSize: fontSize,
             theme: colorMode === COLOR_MODE.dark ? "vs-dark" : "vs",
-            fontWeight: "400",
             scrollBeyondLastLine: false,
+            value: value,
           });
         });
     }

diff --git a/web/src/components/Editor/JSONEditor.tsx b/web/src/components/Editor/JSONEditor.tsx
@@ -40,33 +40,7 @@ function JSONEditor(props: {
       value={value}
       options={options}
       onChange={onChange}
-      theme={colorMode === COLOR_MODE.dark ? "JSONEditorThemeDark" : "JSONEditorTheme"}
-      beforeMount={(monaco) => {
-        monaco?.editor.defineTheme("JSONEditorTheme", {
-          base: "vs",
-          inherit: true,
-          rules: [],
-          colors: {
-            "editor.background": "#ffffff00",
-            "editorLineNumber.foreground": "#aaa",
-            "editorOverviewRuler.border": "#ffffff00",
-            "editor.lineHighlightBackground": "#F7F8FA",
-            "scrollbarSlider.background": "#E8EAEC",
-            "editorIndentGuide.activeBackground": "#ddd",
-            "editorIndentGuide.background": "#eee",
-          },
-        });
-
-        monaco?.editor.defineTheme("JSONEditorThemeDark", {
-          base: "vs-dark",
-          inherit: true,
-          rules: [],
-          colors: {
-            "editor.foreground": "#ffffff",
-            "editor.background": "#202631",
-          },
-        });
-      }}
+      theme={colorMode === COLOR_MODE.dark ? "vs-dark" : "vs"}
     />
   );
 }

diff --git a/web/src/components/Editor/index.css b/web/src/components/Editor/index.css
@@ -13,3 +13,31 @@
 [data-theme="dark"] .monaco-editor {
   --vscode-editor-background: #202631 !important;
 }
+
+.monaco-editor .mtk5 {
+  color: #00f !important;
+}
+
+.monaco-editor .mtk4 {
+  color: #008000 !important;
+}
+
+.monaco-editor .mtk11 {
+  color: #a31515 !important;
+}
+
+[data-theme="dark"] .monaco-editor .mtk5 {
+  color: #569cd6 !important;
+}
+
+[data-theme="dark"] .monaco-editor .mtk4 {
+  color: #6a9955 !important;
+}
+
+[data-theme="dark"] .monaco-editor .mtk11 {
+  color: #ce9178 !important;
+}
+
+[data-theme="dark"] .monaco-editor .mtk1 {
+  color: #d4d4d4 !important;
+}
diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
@@ -44,6 +44,7 @@ function EditorPanel() {
       <div className={functionListQuery.data?.data?.length !== 0 ? "h-full" : "hidden"}>
         {commonSettings.useLSP && isLSPEffective ? (
           <FunctionEditor
+            value={functionCache.getCache(currentFunction!._id, currentFunction!.source?.code)}
             colorMode={colorMode}
             className="h-full flex-grow"
             path={`${RUNTIMES_PATH}/${currentFunction?.name}.ts`}

diff --git a/web/src/pages/app/setting/SysSetting/AppEnvList/index.tsx b/web/src/pages/app/setting/SysSetting/AppEnvList/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, ButtonGroup, Switch } from "@chakra-ui/react";
+import { Button, ButtonGroup, Switch, useColorMode } from "@chakra-ui/react";
 import { Center, Spinner } from "@chakra-ui/react";
 
 import EditableTable from "@/components/EditableTable";
@@ -21,6 +21,7 @@ const AppEnvList = (props: { onClose?: () => {} }) => {
   const globalStore = useGlobalStore();
   const { t } = useTranslation();
   const [isEditorMode, setIsEditorMode] = useState(false);
+  const { colorMode } = useColorMode();
 
   useEffect(() => {
     let newEnv = pureEnv
@@ -66,6 +67,7 @@ const AppEnvList = (props: { onClose?: () => {} }) => {
                     onChange={(value) => {
                       setPureEnv(value || "");
                     }}
+                    colorMode={colorMode}
                   />
                 </div>
               ) : (