[UI]: Consolidate Render Mark Down Component with ToolTip

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}

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

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