🍀 Fixed: Manage Broadcast Cards (HTML Content Rendering) (#1077)

frontend/package.json

@@ -12,6 +12,7 @@
     "axios": "^0.26.1",
     "bootstrap": "^4.5.3",
     "bootstrap-social": "^5.1.1",
+    "dompurify": "^3.1.6",
     "font-awesome": "^4.7.0",
     "joi-browser": "^13.4.0",
     "jwt-decode": "^3.1.2",

frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx

@@ -6,6 +6,7 @@ import { IconButton } from "@material-ui/core";
 import { useSelector } from "react-redux";
 import { SimpleToast } from "../../../../../../components/util/Toast";
 import style from "./card.module.scss";
+import DOMPurify from "dompurify";
 import {
   UpdateBoardCast,
   deleteBoardcast,
@@ -83,6 +84,13 @@ export function Card(props) {
     "December",
   ];
 
+  const sanitizedContent = DOMPurify.sanitize(props.project.content);
+
+  const truncatedContent =
+    sanitizedContent.length > 400
+      ? sanitizedContent.substring(0, 400) + "..."
+      : sanitizedContent;
+
   return (
     <div id={props.id} className={style["card-container"]}>
       <Modals theme={dark} open={open} handleClose={handleClose} data={data} />
@@ -97,9 +105,10 @@ export function Card(props) {
         >
           <div className={style["clickable-card"]}>
             <div className={style["card-title"]}>{props.project.title}</div>
-            <div className={style["card-content"]}>
-              {props.project.content.substring(0, 400)}...
-            </div>
+            <div
+              className={style["card-content"]}
+              dangerouslySetInnerHTML={{ __html: truncatedContent }}
+            />
             <div className={style["card-date"]}>
               {months[date.getMonth()]},{date.getFullYear()}
             </div>