From 81c5a21b8d2fd10e113db6d12c15834de20a0bb2 Mon Sep 17 00:00:00 2001
From: Yash_1124 <82636823+Yash-1511@users.noreply.github.com>
Date: Mon, 19 Feb 2024 12:37:45 +0530
Subject: [PATCH] FEAT: add image styling in markdown (#2441)

Co-authored-by: crazywoola <427733928@qq.com>
---
 web/app/components/base/markdown.tsx | 31 ++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index 5fab36fa31..fb0cf5bb44 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -143,6 +143,37 @@ export function Markdown(props: { content: string; className?: string }) {
                 </code>
               )
           },
+          img({ src, alt, ...props }) {
+            return (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={src}
+                alt={alt}
+                width={250}
+                height={250}
+                className="max-w-full h-auto align-middle border-none rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out mt-2 mb-2"
+                {...props}
+              />
+            )
+          },
+          p: (paragraph) => {
+            const { node }: any = paragraph
+            if (node.children[0].tagName === 'img') {
+              const image = node.children[0]
+
+              return (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={image.properties.src}
+                  width={250}
+                  height={250}
+                  className="max-w-full h-auto align-middle border-none rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out mt-2 mb-2"
+                  alt={image.properties.alt}
+                />
+              )
+            }
+            return <p>{paragraph.children}</p>
+          },
         }}
         linkTarget='_blank'
       >