Add parsing of html question descriptions

Author: szelongq

frontend/package-lock.json

@@ -16,6 +16,8 @@
     "axios": "^1.5.1",
     "dotenv": "^16.3.1",
     "firebase": "^10.4.0",
+    "html-entities": "^2.4.0",
+    "htmr": "^1.0.2",
     "https-browserify": "^1.0.0",
     "js-sha256": "^0.10.1",
     "monaco-editor": "^0.44.0",

frontend/package.json

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 import { Paper, Typography, Divider, CardMedia } from "@mui/material";
 import { useData } from "../data/data.context";
+import htmr from "htmr";
+import {decode} from "html-entities";
+import {parseHtmlDescription} from "../utils/utils";
 
 function CollabProblemSolverLeft({
   questionNumber,
@@ -43,10 +46,8 @@ function CollabProblemSolverLeft({
         {question.title}
       </Typography>
       <Divider sx={{ marginBottom: 2, marginTop: 5 }} />
-      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: "18px" }}>
-        {question.description.split("\\n").map((s, key) => {
-          return <p key={key}>{s}</p>;
-        })}
+      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: "18px", overflowX: 'auto' }}>
+        {parseHtmlDescription(question.description)}
       </Typography>
       <Divider sx={{ marginBottom: 10 }} />
       <Typography variant="h6" gutterBottom sx={{ fontSize: "18px" }}>

frontend/src/components/CollabProblemSolverLeft.tsx

@@ -8,6 +8,9 @@ import {
   CardMedia,
 } from '@mui/material';
 import { useData } from '../data/data.context';
+import parse from 'html-react-parser';
+import {decode} from "html-entities";
+import {parseHtmlDescription} from "../utils/utils";
 // import { ClosedCaptionDisabledSharp } from '@mui/icons-material';
 
 const ProblemSolverLeft = () => {
@@ -45,10 +48,8 @@ const ProblemSolverLeft = () => {
         {question.title}
       </Typography>
       <Divider sx={{ marginBottom: 2, marginTop: 5 }} />
-      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: '18px' }}>
-        {question.description.split("\\n").map((s, key) => {
-          return <p key={key}>{s}</p>;
-        })}
+      <Typography variant="body1" sx={{ marginBottom: 2, fontSize: '18px', overflowX: 'auto' }}>
+        {parseHtmlDescription(question.description)}
       </Typography>
       <Divider sx={{ marginBottom: 10 }} />
       <Typography variant="h6" gutterBottom sx={{ fontSize: '18px' }}>

frontend/src/components/ProblemSolverLeft.tsx

@@ -5,6 +5,7 @@ import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
 import {Box} from "@mui/material";
 import QuestionForm from "./QuestionForm";
+import {parseHtmlDescription} from "../../utils/utils";
 
 interface EditQuestionPreviewProps {
     question: Question;
@@ -47,10 +48,8 @@ const EditQuestionTab: React.FC<EditQuestionPreviewProps> = ({question, onEdit,
                         <Typography variant="h5" gutterBottom component="div">
                             {question.title}
                         </Typography>
-                        <Typography variant="body2" gutterBottom component="div" sx={{ whiteSpace: 'pre-line'}}>
-                            {question.description.split("\\n").map((s, key) => {
-                                return <p key={key}>{s}</p>;
-                            })}
+                        <Typography variant="body2" gutterBottom component="div">
+                            {parseHtmlDescription(question.description)}
                         </Typography>
                         <br />
                         {question.constraints.length > 0 &&

frontend/src/components/Questions/EditQuestionTab.tsx

@@ -20,6 +20,7 @@ import {
   Typography,
 } from "@mui/material";
 import { useData } from "../../data/data.context";
+import {parseHtmlDescription} from "../../utils/utils";
 
 interface Question {
   id: string;
@@ -202,7 +203,7 @@ const InterviewQuestionsTable: React.FC = () => {
                 <b>Difficulty:</b> {selectedQuestion.difficulty}
               </Typography>
               <Typography variant="body2" style={{ padding: "5px" }}>
-                <b>Description</b>: {selectedQuestion.description}
+                <b>Description</b>: {parseHtmlDescription(selectedQuestion.description)}
               </Typography>
             </DialogContent>
             <DialogActions>

frontend/src/components/Questions/QuestionsTable.tsx

@@ -0,0 +1,10 @@
+import {decode} from "html-entities";
+import htmr from "htmr";
+import {ReactNode} from "react";
+
+export function parseHtmlDescription(description: string): ReactNode {
+  // Decode escaped HTML characters and add text wrap to pre tags in the question description
+  let decodedDescription = decode(description)
+    .replace(/<pre>/g, "<pre style=\"white-space: pre-wrap;\">");
+  return htmr(decodedDescription);
+}