From 1b7521e6deb43820f87e8fa8d083cb36ac35a469 Mon Sep 17 00:00:00 2001
From: Aryan Khubchandani <76617460+AryanKhubchandani@users.noreply.github.com>
Date: Sat, 5 Aug 2023 17:17:23 +0530
Subject: [PATCH] feat: add markdown support in chat section (#262)

feat: add markdown support
---
 client/src/components/Chat.jsx | 11 ++++++++++-
 client/src/styles/chat.css     | 31 +++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Chat.jsx b/client/src/components/Chat.jsx
index ca293997..29354e0c 100644
--- a/client/src/components/Chat.jsx
+++ b/client/src/components/Chat.jsx
@@ -13,6 +13,7 @@ import { BiDotsVerticalRounded } from 'react-icons/bi';
 
 import { v4 as uuid } from 'uuid';
 import { debounce } from 'lodash';
+import MarkdownIt from 'markdown-it';
 
 import { useChat } from 'src/context/ChatContext';
 import { useAuth } from 'src/context/AuthContext';
@@ -72,6 +73,8 @@ const Chat = () => {
         return Boolean(getMessage(id));
     };
 
+    const md = new MarkdownIt();
+
     useEffect(() => {
         const newMessageHandler = (message) => {
             try {
@@ -264,6 +267,8 @@ const Chat = () => {
             return;
         }
 
+        message = md.render(message);
+
         const splitMessage = message.split(' ');
         for (const word of splitMessage) {
             if (listOfBadWordsNotAllowed.includes(word)) {
@@ -402,7 +407,11 @@ const Chat = () => {
                                                 'justify-between'
                                             }`}
                                         >
-                                            <p>{message}</p>
+                                            <p
+                                                dangerouslySetInnerHTML={{
+                                                    __html: message,
+                                                }}
+                                            ></p>
                                             {sender.toString() ===
                                                 senderId.toString() &&
                                                 status !== 'pending' && (
diff --git a/client/src/styles/chat.css b/client/src/styles/chat.css
index 40f530bc..76127d33 100644
--- a/client/src/styles/chat.css
+++ b/client/src/styles/chat.css
@@ -43,4 +43,35 @@
     .message-block .message .status {
         @apply px-[20px] text-[12px] flex gap-2 items-center;
     }
+
+    .message .content h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-size: revert !important;
+        font-weight: revert !important;
+    }
+
+    .message .content ul {
+        list-style-type: disc !important;
+        list-style-position: inside !important;
+    }
+    ol {
+        list-style: decimal !important;
+        list-style-position: inside !important;
+    }
+    ul ul,
+    ol ul {
+        list-style-type: circle !important;
+        list-style-position: inside !important;
+        margin-left: 15px !important;
+    }
+    ol ol,
+    ul ol {
+        list-style-type: lower-latin !important;
+        list-style-position: inside !important;
+        margin-left: 15px !important;
+    }
 }