Fix: Ensure Custom Themes Are Applied in Monaco Editor Initialization

src/editors/MarkdownEditor.tsx

@@ -1,77 +1,68 @@
-import { lazy, Suspense, useMemo, useCallback, useEffect } from "react";
-import useAppStore from "../store/store";
-import { useMonaco } from "@monaco-editor/react";
+import { useCallback, useMemo } from 'react';
+import * as monaco from 'monaco-editor';
+import Editor from '@monaco-editor/react';
+import useAppStore from '../store/store';
 
-const MonacoEditor = lazy(() =>
-  import("@monaco-editor/react").then((mod) => ({ default: mod.Editor }))
-);
-
-export default function MarkdownEditor({
-  value,
-  onChange,
-}: {
+interface MarkdownEditorProps {
   value: string;
-  onChange?: (value: string | undefined) => void;
-}) {
+  onChange: (value: string) => void;
+}
+
+export default function MarkdownEditor({ value, onChange }: MarkdownEditorProps) {
   const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);
-  const monaco = useMonaco();
 
   const themeName = useMemo(
-    () => (backgroundColor ? "darkTheme" : "lightTheme"),
+    () => (backgroundColor ? 'darkTheme' : 'lightTheme'),
     [backgroundColor]
   );
 
-  useEffect(() => {
-    if (monaco) {
-      const defineTheme = (name: string, base: "vs" | "vs-dark") => {
-        monaco.editor.defineTheme(name, {
-          base,
-          inherit: true,
-          rules: [],
-          colors: {
-            "editor.background": backgroundColor,
-            "editor.foreground": textColor,
-            "editor.lineHighlightBorder": "#EDE8DC",
-          },
-        });
-      };
+  const handleEditorWillMount = useCallback((monaco: typeof import('monaco-editor')) => {
+    const defineTheme = (name: string, base: monaco.editor.BuiltinTheme) => {
+      monaco.editor.defineTheme(name, {
+        base,
+        inherit: true,
+        rules: [],
+        colors: {
+          'editor.background': backgroundColor,
+          'editor.foreground': textColor,
+          'editor.lineHighlightBorder': '#EDE8DC',
+        },
+      });
+    };
 
-      defineTheme("lightTheme", "vs");
-      defineTheme("darkTheme", "vs-dark");
+    defineTheme('lightTheme', 'vs');
+    defineTheme('darkTheme', 'vs-dark');
+  }, [backgroundColor, textColor]);
 
-      monaco.editor.setTheme(themeName);
-    }
-  }, [monaco, backgroundColor, textColor, themeName]);
-
-  const editorOptions = {
-    minimap: { enabled: false },
-    wordWrap: "on" as const,
-    automaticLayout: true,
-    scrollBeyondLastLine: false,
-  };
-
-  const options = useMemo(() => editorOptions, []);
+  const options = useMemo(
+    () => ({
+      minimap: { enabled: false },
+      wordWrap: 'on' as 'on',
+      automaticLayout: true,
+      scrollBeyondLastLine: false,
+    }),
+    []
+  );
 
   const handleChange = useCallback(
-    (val: string | undefined) => {
-      if (onChange) onChange(val);
+    (val?: string) => {
+      if (val !== undefined && onChange) onChange(val);
     },
     [onChange]
   );
 
   return (
     <div className="editorwrapper">
-      <Suspense fallback={<div>Loading Editor...</div>}>
-        <MonacoEditor
-          options={options}
-          language="markdown"
-          height="60vh"
-          value={value}
-          onChange={handleChange}
-          theme={themeName}
-        />
-      </Suspense>
+      <Editor
+        options= {options}
+        language="markdown"
+        height="60vh"
+        value={value}
+        onChange={handleChange}
+        beforeMount={handleEditorWillMount}
+        theme={themeName}
+      />
     </div>
   );
 }