chore: 📄 use correct tags according to the semantic html

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",

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>
   );

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>
     );
   }
 

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>
   );
 };