From 3bc74e284b6959ec90e8e61d447e3956c617ad32 Mon Sep 17 00:00:00 2001
From: Bobby Wang <bofei@mail.com>
Date: Thu, 15 Sep 2022 01:46:10 +0700
Subject: [PATCH] Fix: monoco editor randomly not initialise theme correctly in
 dark mode

---
 src/components/CodeEditor/CodeEditor.tsx      |  7 +++++++
 .../CodeEditor/useMonacoCustomizations.ts     | 19 -------------------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/components/CodeEditor/CodeEditor.tsx b/src/components/CodeEditor/CodeEditor.tsx
index 6c969203..20d835d9 100644
--- a/src/components/CodeEditor/CodeEditor.tsx
+++ b/src/components/CodeEditor/CodeEditor.tsx
@@ -12,6 +12,8 @@ import useMonacoCustomizations, {
 } from "./useMonacoCustomizations";
 import FullScreenButton from "@src/components/FullScreenButton";
 import { spreadSx } from "@src/utils/ui";
+import githubLightTheme from "@src/components/CodeEditor/github-light-default.json";
+import githubDarkTheme from "@src/components/CodeEditor/github-dark-default.json";
 
 export interface ICodeEditorProps
   extends Partial<EditorProps>,
@@ -89,6 +91,10 @@ export default function CodeEditor({
           value={initialEditorValue}
           loading={<CircularProgressOptical size={20} sx={{ m: 2 }} />}
           className="editor"
+          beforeMount={(monaco) => {
+            monaco.editor.defineTheme("github-light", githubLightTheme as any);
+            monaco.editor.defineTheme("github-dark", githubDarkTheme as any);
+          }}
           onMount={(editor) => {
             if (onFocus) editor.onDidFocusEditorWidget(onFocus);
             if (onBlur) editor.onDidBlurEditorWidget(onBlur);
@@ -105,6 +111,7 @@ export default function CodeEditor({
             automaticLayout: true,
             fixedOverflowWidgets: true,
             tabSize: 2,
+            theme: `github-${theme.palette.mode}`,
             ...props.options,
           }}
         />
diff --git a/src/components/CodeEditor/useMonacoCustomizations.ts b/src/components/CodeEditor/useMonacoCustomizations.ts
index 73b2bd53..13c05a20 100644
--- a/src/components/CodeEditor/useMonacoCustomizations.ts
+++ b/src/components/CodeEditor/useMonacoCustomizations.ts
@@ -71,25 +71,6 @@ export default function useMonacoCustomizations({
     };
   }, []);
 
-  // Initialize theme
-  useEffect(() => {
-    if (!monaco) {
-      // useMonaco returns a monaco instance but initialisation is done asynchronously
-      // dont execute the logic until the instance is initialised
-      return;
-    }
-
-    setTimeout(() => {
-      try {
-        monaco.editor.defineTheme("github-light", githubLightTheme as any);
-        monaco.editor.defineTheme("github-dark", githubDarkTheme as any);
-        monaco.editor.setTheme("github-" + theme.palette.mode);
-      } catch (error) {
-        console.error("Could not set Monaco theme: ", error);
-      }
-    });
-  }, [monaco, theme.palette.mode]);
-
   // Initialize external libs & TypeScript compiler options
   useEffect(() => {
     if (!monaco) return;