Merge branch 'develop' of https://github.com/rowyio/rowy into develop

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,
           }}
         />

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;

src/constants/externalLinks.ts

@@ -28,7 +28,7 @@ export const EXTERNAL_LINKS = {
 const WIKI_PATHS = {
   setup: "/setup/install",
   setupFirebaseProject: "/setup/firebase-project",
-  setupRoles: "/setup/roles",
+  setupRoles: "/how-to/roles",
   setupUpdate: "/setup/update",
 
   howTo: "/category/quickstart-guide",