trying other way of managing monaco editor

nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx

@@ -28,12 +28,12 @@ export default function EditAssignment({
   const { courseName } = useCourseContext();
   const { data: settings } = useLocalCourseSettingsQuery();
   const { data: assignment } = useAssignmentQuery(moduleName, assignmentName);
-  console.log("due date on edit page", assignment.dueAt);
   const updateAssignment = useUpdateAssignmentMutation();
 
   const [assignmentText, setAssignmentText] = useState(
     localAssignmentMarkdown.toMarkdown(assignment)
   );
+  console.log("assignment text render");
 
   const [error, setError] = useState("");
   const [showHelp, setShowHelp] = useState(false);

nextjs/src/app/globals.css

@@ -15,20 +15,6 @@
   @apply text-lg;
 }
 
-/* monaco editor */
-.monaco-editor-background,
-.monaco-editor .margin {
-  background-color: #020617 !important;
-  /* background-color: #18181b !important; */
-}
-.monaco-editor {
-  position: absolute !important;
-}
-
-.monaco-editor .mtk1 {
-  @apply text-slate-300;
-}
-
 h1 {
   @apply text-4xl font-bold my-1;
 }

nextjs/src/app/providers.tsx

@@ -16,7 +16,7 @@ export default function Providers({ children }: { children: ReactNode }) {
   return (
     <SuspenseAndErrorHandling>
       <QueryClientProvider client={queryClient}>
-        <ReactQueryDevtools initialIsOpen={false} />
+        {/* <ReactQueryDevtools initialIsOpen={false} /> */}
         {children}
       </QueryClientProvider>
     </SuspenseAndErrorHandling>

nextjs/src/components/editor/InnerMonacoEditor.tsx

@@ -2,7 +2,7 @@
 import React, { useRef, useEffect } from "react";
 import loader from "@monaco-editor/loader";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
-import * as monaco from "monaco-editor";
+// import * as monaco from "monaco-editor";
 
 // import * as editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 // import * as jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
@@ -28,7 +28,7 @@ import * as monaco from "monaco-editor";
 //   },
 // };
 
-loader.config({ monaco });
+// loader.config({ monaco });
 
 export default function InnerMonacoEditor({
   value,
@@ -43,6 +43,7 @@ export default function InnerMonacoEditor({
   useEffect(() => {
     if (divRef.current && !editorRef.current) {
       loader.init().then((monaco) => {
+        console.log("in init", monaco, divRef.current, editorRef.current);
         if (divRef.current && !editorRef.current) {
           const properties: editor.IStandaloneEditorConstructionOptions = {
             value: value,
@@ -64,10 +65,14 @@ export default function InnerMonacoEditor({
 
           editorRef.current = monaco.editor.create(divRef.current, properties);
           editorRef.current.onDidChangeModelContent((e) => {
+            console.log("in on change", onChange);
             onChange(editorRef.current?.getModel()?.getValue() ?? "");
           });
+        } else {
+          console.log("second render of init");
         }
       });
+    } else if (!divRef.current) {
     }
   }, [onChange, value]);
 
@@ -75,7 +80,7 @@ export default function InnerMonacoEditor({
     <div
       className="Editor"
       ref={divRef}
-      style={{ height: "100%", overflow: "hidden"}}
+      style={{ height: "100%", overflow: "hidden" }}
     ></div>
   );
 }

nextjs/src/components/editor/InnerMonacoEditorOther.tsx

@@ -0,0 +1,49 @@
+"use client";
+import React, { useRef } from "react";
+import { editor } from "monaco-editor/esm/vs/editor/editor.api";
+
+import Editor from "@monaco-editor/react";
+
+export default function InnerMonacoEditorOther({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (value: string) => void; // must be memoized
+}) {
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+
+  function handleEditorDidMount(editor: editor.IStandaloneCodeEditor) {
+    editorRef.current = editor;
+    editor.onDidChangeModelContent((e) => {
+      onChange(editorRef.current?.getModel()?.getValue() ?? "");
+    });
+  }
+
+  return (
+    <>
+      <Editor
+        height="100%"
+        options={{
+          value: value,
+          tabSize: 3,
+          minimap: {
+            enabled: false,
+          },
+          lineNumbers: "off",
+          wordWrap: "on",
+          automaticLayout: true,
+          fontFamily: "Roboto-mono",
+          fontSize: 16,
+          padding: {
+            top: 10,
+          },
+        }}
+        defaultLanguage="markdown"
+        theme="vs-dark"
+        defaultValue={value}
+        onMount={handleEditorDidMount}
+      />
+    </>
+  );
+}

nextjs/src/components/editor/MonacoEditor.css

@@ -0,0 +1,15 @@
+
+
+/* monaco editor */
+.monaco-editor-background,
+.monaco-editor .margin {
+  background-color: #020617 !important;
+  /* background-color: #18181b !important; */
+}
+.monaco-editor {
+  position: absolute !important;
+}
+
+.monaco-editor .mtk1 {
+  @apply text-slate-300;
+}

nextjs/src/components/editor/MonacoEditor.module.css

@@ -1,4 +0,0 @@
-.Editor {
-	width: 100vw;
-	height: 100vh;
-}

nextjs/src/components/editor/MonacoEditor.tsx

@@ -1,7 +1,9 @@
 "use client";
 import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+import "./MonacoEditor.css";
 
-const InnerMonacoEditor = dynamic(() => import("./InnerMonacoEditor"), {
+const InnerMonacoEditor = dynamic(() => import("./InnerMonacoEditorOther"), {
   ssr: false,
 });
 
@@ -9,5 +11,10 @@ export const MonacoEditor: React.FC<{
   value: string;
   onChange: (value: string) => void;
 }> = ({ value, onChange }) => {
-  return <InnerMonacoEditor value={value} onChange={onChange} />;
+  const [salt, setSalt] = useState(Date.now());
+  useEffect(() => {
+    console.log("onchange changed");
+    setSalt(Date.now());
+  }, [onChange]);
+  return <InnerMonacoEditor key={salt} value={value} onChange={onChange} />;
 };