From 1fd303e4aa88bbe494b64ab7c260171cd1ea0a13 Mon Sep 17 00:00:00 2001
From: themashcodee <codeemash@gmail.com>
Date: Sat, 24 Aug 2024 20:24:51 +0530
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=93=84=20use=20correct=20tags=20?=
 =?UTF-8?q?according=20to=20the=20semantic=20html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                     |  2 +-
 src/components/blocks/context.tsx                | 10 +++-------
 src/components/blocks/rich_text/rich_text.tsx    |  8 ++++----
 src/utils/markdown_parser/elements/paragraph.tsx |  4 ++--
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index ffb05a1..46c265f 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
diff --git a/src/components/blocks/context.tsx b/src/components/blocks/context.tsx
index cba819c..25bdaa7 100644
--- a/src/components/blocks/context.tsx
+++ b/src/components/blocks/context.tsx
@@ -17,17 +17,13 @@ export const Context = (props: ContextProps) => {
       {elements.slice(0, 10).map((element, i) => {
         if (element.type !== "image") {
           return (
-            <span className="text-black-secondary text-small pr-3 flex items-center" key={i}>
+            <div className="text-black-secondary text-small pr-3 flex items-center" key={i}>
               <TextObject data={element} />
-            </span>
+            </div>
           );
         }
 
-        return (
-          <span key={i}>
-            <ImageElement inside="context" data={element} />
-          </span>
-        );
+        return <ImageElement key={i} inside="context" data={element} />;
       })}
     </div>
   );
diff --git a/src/components/blocks/rich_text/rich_text.tsx b/src/components/blocks/rich_text/rich_text.tsx
index b024da6..01a70a9 100644
--- a/src/components/blocks/rich_text/rich_text.tsx
+++ b/src/components/blocks/rich_text/rich_text.tsx
@@ -115,11 +115,11 @@ const Element = (props: ElementProps) => {
       <blockquote className="flex gap-2 slack_blocks_to_jsx__rich_text_quote_element">
         {border === 1 && <div className="w-1 rounded bg-gray-primary self-stretch"></div>}
 
-        <div>
+        <p>
           {elements.map((el, i) => {
             return <RichTextSectionElement key={`${el.type}__${i}`} element={el} />;
           })}
-        </div>
+        </p>
       </blockquote>
     );
   }
@@ -128,11 +128,11 @@ const Element = (props: ElementProps) => {
     const { elements } = element;
 
     return (
-      <div className="inline-block slack_blocks_to_jsx__rich_text_section_element">
+      <p className="inline-block slack_blocks_to_jsx__rich_text_section_element">
         {elements.map((el, i) => {
           return <RichTextSectionElement key={`${el.type}__${i}`} element={el} />;
         })}
-      </div>
+      </p>
     );
   }
 
diff --git a/src/utils/markdown_parser/elements/paragraph.tsx b/src/utils/markdown_parser/elements/paragraph.tsx
index a33a0ab..55317e7 100644
--- a/src/utils/markdown_parser/elements/paragraph.tsx
+++ b/src/utils/markdown_parser/elements/paragraph.tsx
@@ -22,7 +22,7 @@ export const Paragraph = (props: Props) => {
   const { element } = props;
 
   return (
-    <>
+    <p>
       {element.children.map((subelement, i) => {
         if (subelement.type === "text") return <Text key={i} element={subelement} />;
         if (subelement.type === "emphasis") return <Emphasis key={i} element={subelement} />;
@@ -43,6 +43,6 @@ export const Paragraph = (props: Props) => {
 
         return null;
       })}
-    </>
+    </p>
   );
 };