From a55d95832c95e8ac63ea8b539c7b7e4cc66274e4 Mon Sep 17 00:00:00 2001
From: Senthil Athiban <senthilathiban0@gmail.com>
Date: Mon, 12 Aug 2024 20:13:25 +0530
Subject: [PATCH 1/2] feat(markdown): add tooltip prop

Signed-off-by: Senthil Athiban <senthilathiban0@gmail.com>
---
 src/custom/CustomTooltip/customTooltip.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
index 8668767f..f1d741d5 100644
--- a/src/custom/CustomTooltip/customTooltip.tsx
+++ b/src/custom/CustomTooltip/customTooltip.tsx
@@ -1,7 +1,7 @@
 import { Tooltip, type TooltipProps } from '@mui/material';
 import React from 'react';
 import { CHARCOAL, WHITE } from '../../theme';
-import { RenderMarkdownTooltip } from '../Markdown';
+import { RenderMarkdown } from '../Markdown';
 
 type CustomTooltipProps = {
   title: string | React.ReactNode | JSX.Element;
@@ -44,7 +44,9 @@ function CustomTooltip({
           }
         }
       }}
-      title={typeof title === 'string' ? <RenderMarkdownTooltip content={title} /> : title}
+      title={
+        typeof title === 'string' ? <RenderMarkdown content={title} isTooltip={true} /> : title
+      }
       placement={placement}
       arrow
       onClick={onClick}

From 8e3c12f5e69cb099a364727008c3fb03f4962d21 Mon Sep 17 00:00:00 2001
From: Senthil Athiban <senthilathiban0@gmail.com>
Date: Mon, 12 Aug 2024 20:14:04 +0530
Subject: [PATCH 2/2] refactor(comp): replace renderMarkDownToolTip with
 renderMarkDown

Signed-off-by: Senthil Athiban <senthilathiban0@gmail.com>
---
 src/custom/Markdown/index.tsx | 56 ++++++++++-------------------------
 src/custom/Note/Note.tsx      |  4 +--
 2 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/src/custom/Markdown/index.tsx b/src/custom/Markdown/index.tsx
index 92cbb5fd..232d2355 100644
--- a/src/custom/Markdown/index.tsx
+++ b/src/custom/Markdown/index.tsx
@@ -20,22 +20,33 @@ import {
 } from './style';
 export interface RenderMarkdownProps {
   content: string;
+  isTooltip?: boolean;
 }
 
-export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
+export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content, isTooltip = false }) => {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
       rehypePlugins={[rehypeRaw]}
       components={{
-        p: ({ ...props }) => <StyledMarkdownP>{props.children}</StyledMarkdownP>,
+        p: ({ ...props }) =>
+          isTooltip ? (
+            <StyledMarkdownTooltipP>{props.children}</StyledMarkdownTooltipP>
+          ) : (
+            <StyledMarkdownP>{props.children}</StyledMarkdownP>
+          ),
         a: ({ ...props }) => (
           <StyledMarkdown
             onClick={(e) => {
-              e.preventDefault();
-              window.open(props.href, '_blank');
+              if (props.href) {
+                window.open(props.href, '_blank');
+              }
+              if (isTooltip) {
+                e.stopPropagation();
+              }
             }}
             href={props.href}
+            as={isTooltip ? 'a' : undefined}
           >
             {props.children}
           </StyledMarkdown>
@@ -60,40 +71,3 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
     </ReactMarkdown>
   );
 };
-
-export const RenderMarkdownTooltip: React.FC<RenderMarkdownProps> = ({ content }) => {
-  return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      components={{
-        p: ({ ...props }) => <StyledMarkdownTooltipP>{props.children}</StyledMarkdownTooltipP>,
-        a: ({ ...props }) => (
-          <StyledMarkdown
-            onClick={(e) => {
-              window.open(props.href, '_blank');
-              e.stopPropagation();
-            }}
-            as="a"
-          >
-            {props.children}
-          </StyledMarkdown>
-        ),
-        h1: ({ ...props }) => <StyledMarkdownH1>{props.children}</StyledMarkdownH1>,
-        h2: ({ ...props }) => <StyledMarkdownH2>{props.children}</StyledMarkdownH2>,
-        h3: ({ ...props }) => <StyledMarkdownH3>{props.children}</StyledMarkdownH3>,
-        h4: ({ ...props }) => <StyledMarkdownH4>{props.children}</StyledMarkdownH4>,
-        h5: ({ ...props }) => <StyledMarkdownH5>{props.children}</StyledMarkdownH5>,
-        h6: ({ ...props }) => <StyledMarkdownH6>{props.children}</StyledMarkdownH6>,
-        blockquote: ({ ...props }) => (
-          <StyledMarkdownBlockquote>{props.children}</StyledMarkdownBlockquote>
-        ),
-        ul: ({ ...props }) => <StyledMarkdownUl>{props.children}</StyledMarkdownUl>,
-        li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
-        th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
-        td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>
-      }}
-    >
-      {content}
-    </ReactMarkdown>
-  );
-};
diff --git a/src/custom/Note/Note.tsx b/src/custom/Note/Note.tsx
index e9ac9ebd..effb7bf2 100644
--- a/src/custom/Note/Note.tsx
+++ b/src/custom/Note/Note.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@mui/material';
 import { FC } from 'react';
-import { RenderMarkdownTooltip } from '../Markdown';
+import { RenderMarkdown } from '../Markdown';
 
 interface AlertProps {
   type?: 'success' | 'warning' | 'note';
@@ -42,7 +42,7 @@ const Note: FC<AlertProps> = ({ type = 'note', title, content }) => {
     <NoteWrapper type={type}>
       <NoteHeading type={type}>{title}</NoteHeading>
       <NoteContent>
-        <RenderMarkdownTooltip content={content} />
+        <RenderMarkdown content={content} isTooltip={true} />
       </NoteContent>
     </NoteWrapper>
   );