1- import { lazy , Suspense , useMemo , useCallback } from "react" ;
1+ import { lazy , Suspense , useMemo , useCallback , useEffect } from "react" ;
22import useAppStore from "../store/store" ;
3+ import { useMonaco } from "@monaco-editor/react" ;
34
45const MonacoEditor = lazy ( ( ) =>
56 import ( "@monaco-editor/react" ) . then ( ( mod ) => ( { default : mod . Editor } ) )
@@ -13,12 +14,36 @@ export default function MarkdownEditor({
1314 onChange ?: ( value : string | undefined ) => void ;
1415} ) {
1516 const backgroundColor = useAppStore ( ( state ) => state . backgroundColor ) ;
17+ const textColor = useAppStore ( ( state ) => state . textColor ) ;
18+ const monaco = useMonaco ( ) ;
1619
1720 const themeName = useMemo (
1821 ( ) => ( backgroundColor ? "darkTheme" : "lightTheme" ) ,
1922 [ backgroundColor ]
2023 ) ;
2124
25+ useEffect ( ( ) => {
26+ if ( monaco ) {
27+ const defineTheme = ( name : string , base : "vs" | "vs-dark" ) => {
28+ monaco . editor . defineTheme ( name , {
29+ base,
30+ inherit : true ,
31+ rules : [ ] ,
32+ colors : {
33+ "editor.background" : backgroundColor ,
34+ "editor.foreground" : textColor ,
35+ "editor.lineHighlightBorder" : "#EDE8DC" ,
36+ } ,
37+ } ) ;
38+ } ;
39+
40+ defineTheme ( "lightTheme" , "vs" ) ;
41+ defineTheme ( "darkTheme" , "vs-dark" ) ;
42+
43+ monaco . editor . setTheme ( themeName ) ;
44+ }
45+ } , [ monaco , backgroundColor , textColor , themeName ] ) ;
46+
2247 const editorOptions = {
2348 minimap : { enabled : false } ,
2449 wordWrap : "on" as const ,
0 commit comments