feat: add md support for question description

CS3219-AY2324S1 · Nov 10, 2023 · c7db5f2 · c7db5f2
1 parent 6fd9547
commit c7db5f2
Show file tree

Hide file tree

Showing 3 changed files with 584 additions and 8 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -48,7 +48,9 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
+    "react-markdown": "^9.0.0",
     "react-syntax-highlighter": "^15.5.0",
+    "rehype-raw": "^7.0.0",
     "sanitize-html": "^2.11.0",
     "sass": "^1.69.0",
     "socket.io-client": "^4.7.2",

diff --git a/frontend/src/components/room/description.tsx b/frontend/src/components/room/description.tsx
@@ -4,6 +4,8 @@ import { Button } from "../ui/button";
 import { Card } from "../ui/card";
 import { TypographyH2, TypographySmall } from "../ui/typography";
 import sanitizeHtml from "sanitize-html";
+import Markdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
 
 type DescriptionProps = {
   question: Question;
@@ -52,10 +54,9 @@ export default function Description({
       </div>
       <div className="py-6">
         <TypographySmall>
-          <div
-            dangerouslySetInnerHTML={{ __html: cleanDescription }}
-            className="w-[40vw] overflow-x-auto"
-          ></div>
+          <div className="w-[40vw] overflow-x-auto">
+            <Markdown rehypePlugins={[rehypeRaw]}>{cleanDescription}</Markdown>
+          </div>
           <br />
           { testCases.length > 0 && (
           <div>