feat: sanitize question description and wrap pre tag

frontend/src/components/room/description.tsx

@@ -3,6 +3,7 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Card } from "../ui/card";
 import { TypographyH2, TypographySmall } from "../ui/typography";
+import sanitizeHtml from "sanitize-html";
 
 type DescriptionProps = {
   question: Question;
@@ -17,6 +18,8 @@ export default function Description({
   onSwapQuestionClick,
   hasRoom = true,
 }: DescriptionProps) {
+  const cleanDescription = sanitizeHtml(question.description)
+
   return (
     <Card
       className={`m-2 ml-0 px-6 h-full ${className} overflow-y-auto overflow-x-wrap pb-4`}
@@ -46,7 +49,7 @@ export default function Description({
       <div className="py-6">
         <TypographySmall>
           <div
-            dangerouslySetInnerHTML={{ __html: question.description }}
+            dangerouslySetInnerHTML={{ __html: cleanDescription }}
             className="w-[40vw] overflow-x-auto"
           ></div>
         </TypographySmall>

frontend/src/styles/globals.scss

@@ -373,3 +373,16 @@ html {
         box-sizing: inherit;
     }
 }
+
+pre {
+    white-space: pre-wrap;
+    /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;
+    /* Mozilla, since 1999 */
+    white-space: -pre-wrap;
+    /* Opera 4-6 */
+    white-space: -o-pre-wrap;
+    /* Opera 7 */
+    word-wrap: break-word;
+    /* Internet Explorer 5.5+ */
+}

services/question-service/src/routes/index.ts

@@ -4,7 +4,6 @@ import sanitizeHtml from "sanitize-html";
 import { MongoClient, ObjectId, ServerApiVersion } from "mongodb";
 import { NewQuestion, isDifficulty } from "../models/new_question.model";
 import { Question } from "../models/question.model";
-import { kebabToProperCase } from "./utils";
 
 export const router = express.Router();