parsing and errors

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

@@ -1,8 +1,12 @@
 "use client";
 import { MonacoEditor } from "@/components/editor/MonacoEditor";
-import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
+import {
+  useQuizQuery,
+  useUpdateQuizMutation,
+} from "@/hooks/localCourse/quizHooks";
 import { quizMarkdownUtils } from "@/models/local/quiz/utils/quizMarkdownUtils";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import QuizPreview from "./QuizPreview";
 
 export default function EditQuiz({
   moduleName,
@@ -12,13 +16,47 @@ export default function EditQuiz({
   moduleName: string;
 }) {
   const { data: quiz } = useQuizQuery(moduleName, quizName);
+  const updateQuizMutation = useUpdateQuizMutation();
   const [quizText, setQuizText] = useState(quizMarkdownUtils.toMarkdown(quiz));
+  const [error, setError] = useState("");
   // console.log(quizText);
 
+  useEffect(() => {
+    const delay = 500;
+    const handler = setTimeout(() => {
+      if (quizMarkdownUtils.toMarkdown(quiz) !== quizText) {
+        // handle when parsing does not work
+        try {
+          const updatedQuiz = quizMarkdownUtils.parseMarkdown(quizText);
+          updateQuizMutation.mutate({
+            quiz: updatedQuiz,
+            moduleName,
+            quizName,
+          });
+        } catch (e: any) {
+          setError(e.toString());
+        }
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [moduleName, quiz, quizName, quizText, updateQuizMutation]);
+
   return (
-    <div>
+    <div className="h-full flex flex-col">
       {quiz.name}
-      <MonacoEditor value={quizText} onChange={setQuizText} />
+      <div className="columns-2 min-h-0 flex-1">
+        <MonacoEditor value={quizText} onChange={setQuizText} />
+        <div>
+          <div className="text-red-300">
+
+          {error && error}
+          </div>
+          <QuizPreview quiz={quiz} />
+        </div>
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,10 @@
+import { LocalQuiz } from "@/models/local/quiz/localQuiz";
+
+export default function QuizPreview({quiz}: {quiz: LocalQuiz}) {
+  return (
+    <div>
+
+      <div>{quiz.description}</div>
+    </div>
+  )
+}

nextjs/src/app/globals.css

@@ -9,3 +9,8 @@
     text-wrap: balance;
   }
 }
+
+/* monaco editor */
+.monaco-editor-background, .monaco-editor .margin {
+  background-color:  black !important;
+}

nextjs/src/components/editor/InnerMonacoEditor.tsx

@@ -15,8 +15,6 @@ export default function InnerMonacoEditor({
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const divRef = useRef<HTMLDivElement>(null);
 
-  // const monacoRef = useRef<Monaco | null>(null);
-
   useEffect(() => {
     if (divRef.current && !editorRef.current) {
       loader.init().then((monaco) => {
@@ -47,12 +45,13 @@ export default function InnerMonacoEditor({
       });
     }
   }, [onChange, value]);
+
   return (
     <div
       id="myMonacoEditor"
       className="Editor"
       ref={divRef}
-      style={{ height: "500px", width: "100%" }}
+      style={{ height: "100%", overflow: "hidden" }}
     ></div>
   );
 }