added catches around markdown to html, might throw exception if image error

src/app/course/[courseName]/calendar/day/getStatus.tsx

@@ -104,15 +104,22 @@ export const getStatus = ({
         ),
       };
 
-    const htmlIsSame = htmlIsCloseEnough(
-      markdownToHTMLSafe(assignment.description, settings),
-      canvasAssignment.description
-    );
-    if (!htmlIsSame)
+    try {
+      const htmlIsSame = htmlIsCloseEnough(
+        markdownToHTMLSafe(assignment.description, settings),
+        canvasAssignment.description
+      );
+      if (!htmlIsSame)
+        return {
+          status: "incomplete",
+          message: "Canvas description is different",
+        };
+    } catch (exception) {
       return {
         status: "incomplete",
-        message: "Canvas description is different",
+        message: "Error parsing markdown " + exception,
       };
+    }
   }
 
   return { status: "published", message: "" };

src/app/course/[courseName]/lecture/[lectureDay]/LecturePreview.tsx

@@ -1,3 +1,5 @@
+import MarkdownDisplay from "@/components/MarkdownDisplay";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { Lecture } from "@/models/local/lecture";
 import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
@@ -8,15 +10,12 @@ export default function LecturePreview({ lecture }: { lecture: Lecture }) {
     <>
       <section className="border-b-slate-700 border-b-4">
         <div className="text-center font-extrabold">{lecture.name}</div>
-        <div className="text-center font-bold text-slate-400">{lecture.date}</div>
+        <div className="text-center font-bold text-slate-400">
+          {lecture.date}
+        </div>
       </section>
       <section>
-        <div
-          className="markdownPreview "
-          dangerouslySetInnerHTML={{
-            __html: markdownToHTMLSafe(lecture.content, settings),
-          }}
-        ></div>
+        <MarkdownDisplay markdown={lecture.content} />
       </section>
     </>
   );

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

@@ -1,4 +1,5 @@
 import ClientOnly from "@/components/ClientOnly";
+import MarkdownDisplay from "@/components/MarkdownDisplay";
 import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { LocalAssignment } from "@/models/local/assignment/localAssignment";
@@ -18,7 +19,6 @@ export default function AssignmentPreview({
     (sum, cur) => (rubricItemIsExtraCredit(cur) ? sum + cur.points : sum),
     0
   );
-  const htmlPreview = markdownToHTMLSafe(assignment.description, settings);
   return (
     <div className="h-full overflow-y-auto">
       <section>
@@ -59,12 +59,13 @@ export default function AssignmentPreview({
       <hr />
       <br />
       <section>
-        <div
+        <MarkdownDisplay markdown={assignment.description} />
+        {/* <div
           className="markdownPreview"
           dangerouslySetInnerHTML={{
             __html: htmlPreview,
           }}
-        ></div>
+        ></div> */}
       </section>
       <hr />
       <section>

src/app/course/[courseName]/modules/[moduleName]/page/[pageName]/PagePreview.tsx

@@ -1,16 +1,11 @@
+import MarkdownDisplay from "@/components/MarkdownDisplay";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { LocalCoursePage } from "@/models/local/page/localCoursePage";
 import { markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
 import React from "react";
 
 export default function PagePreview({ page }: { page: LocalCoursePage }) {
-  const [settings] = useLocalCourseSettingsQuery();
   return (
-    <div
-      className="markdownPreview"
-      dangerouslySetInnerHTML={{
-        __html: markdownToHTMLSafe(page.text, settings),
-      }}
-    ></div>
+    <MarkdownDisplay markdown={page.text} />
   );
 }

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

@@ -1,4 +1,5 @@
 import CheckIcon from "@/components/icons/CheckIcon";
+import MarkdownDisplay from "@/components/MarkdownDisplay";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
 import { useQuizQuery } from "@/hooks/localCourse/quizHooks";
 import {
@@ -53,12 +54,7 @@ export default function QuizPreview({
         <div className="text-end">Assignment Group Name</div>
         <div>{quiz.localAssignmentGroupName}</div>
       </div>
-      <div
-        className="p-3 markdownPreview"
-        dangerouslySetInnerHTML={{
-          __html: markdownToHTMLSafe(quiz.description, settings),
-        }}
-      ></div>
+      <MarkdownDisplay markdown={quiz.description} className="p-3" />
       <div className="p-3 rounded-md bg-slate-950 m-5 flex flex-col gap-3">
         {quiz.questions.map((question, i) => (
           <QuizQuestionPreview key={i} question={question} />
@@ -88,13 +84,7 @@ function QuizQuestionPreview({ question }: { question: LocalQuizQuestion }) {
           {question.points} {question.points === 1 ? " Point" : " Points"}
         </div>
       </div>
-
-      <div
-        className="ms-4 mb-2 markdownPreview"
-        dangerouslySetInnerHTML={{
-          __html: markdownToHTMLSafe(question.text, settings),
-        }}
-      ></div>
+      <MarkdownDisplay markdown={question.text} className="ms-4 mb-2" />
       {question.questionType === QuestionType.MATCHING && (
         <div>
           {question.answers.map((answer) => (
@@ -134,12 +124,7 @@ function QuizQuestionPreview({ question }: { question: LocalQuizQuestion }) {
                   <div></div>
                 )}
               </div>
-              <div
-                className="markdownQuizAnswerPreview"
-                dangerouslySetInnerHTML={{
-                  __html: markdownToHTMLSafe(answer.text, settings),
-                }}
-              />
+              <MarkdownDisplay markdown={answer.text} className="markdownQuizAnswerPreview" />
             </div>
           ))}
         </div>