From 5f3938f049cc5d37092d09d9268034ba334155fa Mon Sep 17 00:00:00 2001
From: Shivam Gaur <shivamgaur8527@gmail.com>
Date: Sat, 27 Jul 2024 18:36:46 +0530
Subject: [PATCH] Fixed: Manage Broadcast Cards (HTML Content Rendering)

---
 frontend/package.json                             |  1 +
 .../Broadcast/ManageBroadcasts/Card/Card.jsx      | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index e481ae99..0ebaf13a 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx
index 6233701e..dac54e7a 100644
--- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx
+++ b/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>