feat: add markdown support in chat section (#262)

feat: add markdown support
Dun-sin · Aug 5, 2023 · 1b7521e · 1b7521e
1 parent 963db33
commit 1b7521e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git 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
@@ -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;
+    }
 }