working and configured monaco editor

nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx

@@ -1,6 +1,8 @@
 "use client";
 import { MonacoEditor } from "@/components/editor/MonacoEditor";
 import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
+import { quizMarkdownUtils } from "@/models/local/quiz/utils/quizMarkdownUtils";
+import { useState } from "react";
 
 export default function EditQuiz({
   moduleName,
@@ -10,17 +12,13 @@ export default function EditQuiz({
   moduleName: string;
 }) {
   const { data: quiz } = useQuizQuery(moduleName, quizName);
+  const [quizText, setQuizText] = useState(quizMarkdownUtils.toMarkdown(quiz));
+  // console.log(quizText);
 
   return (
     <div>
       {quiz.name}
-
-      <MonacoEditor
-        value={""}
-        onChange={function (value: string): void {
-          throw new Error("Function not implemented.");
-        }}
-      />
+      <MonacoEditor value={quizText} onChange={setQuizText} />
     </div>
   );
 }

nextjs/src/components/editor/InnerMonacoEditor.tsx

@@ -2,60 +2,57 @@
 import React, { useRef, useEffect } from "react";
 // import * as monaco from "monaco-editor";
 import Editor, { Monaco } from "@monaco-editor/react";
-// @ts-ignore
-// self.MonacoEnvironment = {
-// 	getWorkerUrl: function (_moduleId: any, label: string) {
-// 		if (label === 'json') {
-// 			return './json.worker.bundle.js';
-// 		}
-// 		if (label === 'css' || label === 'scss' || label === 'less') {
-// 			return './css.worker.bundle.js';
-// 		}
-// 		if (label === 'html' || label === 'handlebars' || label === 'razor') {
-// 			return './html.worker.bundle.js';
-// 		}
-// 		if (label === 'typescript' || label === 'javascript') {
-// 			return './ts.worker.bundle.js';
-// 		}
-// 		return './editor.worker.bundle.js';
-// 	}
-// };
+import loader from "@monaco-editor/loader";
+import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 
 export default function InnerMonacoEditor({
   value,
   onChange,
 }: {
   value: string;
-  onChange: (value: string) => void;
+  onChange: (value: string) => void; // must be memoized
 }) {
-  console.log("monaco editor");
- 
-  const monacoRef = useRef(null);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const divRef = useRef<HTMLDivElement>(null);
 
-  function handleEditorWillMount(monaco: Monaco) {
-    // here is the monaco instance
-    // do something before editor is mounted
-    monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
-  }
+  // const monacoRef = useRef<Monaco | null>(null);
 
-  function handleEditorDidMount(editor: Monaco, monaco: Monaco) {
-    // here is another way to get monaco instance
-    // you can also store it in `useRef` for further usage
-    monacoRef.current = monaco;
-  }
+  useEffect(() => {
+    if (divRef.current && !editorRef.current) {
+      loader.init().then((monaco) => {
+        if (divRef.current && !editorRef.current) {
+          const properties: editor.IStandaloneEditorConstructionOptions = {
+            value: value,
+            language: "markdown",
+            tabSize: 2,
+            theme: "vs-dark",
+            minimap: {
+              enabled: false,
+            },
+            lineNumbers: "off",
+            wordWrap: "on",
+            automaticLayout: true,
+            fontFamily: "Roboto-mono",
+            fontSize: 16,
+            padding: {
+              top: 10,
+            },
+          };
+
+          editorRef.current = monaco.editor.create(divRef.current, properties);
+          editorRef.current.onDidChangeModelContent((e) => {
+            onChange(editorRef.current?.getModel()?.getValue() ?? "");
+          });
+        }
+      });
+    }
+  }, [onChange, value]);
   return (
-    // <div
-    //   className="Editor"
-    //   ref={divEl}
-    //   style={{ height: "500px", width: "100%" }}
-    // ></div>
-    <Editor
-      height="90vh"
-      defaultLanguage="markdown"
-      theme="vs-dark"
-      
-      defaultValue="// some comment"
-      onChange={(value) => console.log(value)}
-    />
+    <div
+      id="myMonacoEditor"
+      className="Editor"
+      ref={divRef}
+      style={{ height: "500px", width: "100%" }}
+    ></div>
   );
 }