Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix: monoco editor randomly not initialise theme correctly in dark mode

Browse Source
This commit is contained in:
Bobby Wang
2022-09-15 01:46:10 +07:00
parent 0e98aff815
commit 3bc74e284b
2 changed files with 7 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/CodeEditor/CodeEditor.tsx
View File

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

19
src/components/CodeEditor/useMonacoCustomizations.ts
View File

@@ -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;