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

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>