Merge pull request #628 from sudhanshutech/fix/onclick

Fix onClick func for `a` tag for tooltips
layer5io · May 22, 2024 · 929c5f4 · 929c5f4
2 parents 4920e9b + 5c92b56
commit 929c5f4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/custom/Markdown/index.tsx b/src/custom/Markdown/index.tsx
@@ -26,7 +26,17 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
       remarkPlugins={[remarkGfm]}
       components={{
         p: ({ ...props }) => <StyledMarkdownP>{props.children}</StyledMarkdownP>,
-        a: ({ ...props }) => <StyledMarkdown>{props.children}</StyledMarkdown>,
+        a: ({ ...props }) => (
+          <StyledMarkdown
+            onClick={(e) => {
+              e.preventDefault();
+              window.open(props.href, '_blank');
+            }}
+            href={props.href}
+          >
+            {props.children}
+          </StyledMarkdown>
+        ),
         h1: ({ ...props }) => <StyledMarkdownH1>{props.children}</StyledMarkdownH1>,
         h2: ({ ...props }) => <StyledMarkdownH2>{props.children}</StyledMarkdownH2>,
         h3: ({ ...props }) => <StyledMarkdownH3>{props.children}</StyledMarkdownH3>,
@@ -53,7 +63,17 @@ export const RenderMarkdownTooltip: React.FC<RenderMarkdownProps> = ({ content }
       remarkPlugins={[remarkGfm]}
       components={{
         p: ({ ...props }) => <StyledMarkdownTooltipP>{props.children}</StyledMarkdownTooltipP>,
-        a: ({ ...props }) => <StyledMarkdown>{props.children}</StyledMarkdown>,
+        a: ({ ...props }) => (
+          <StyledMarkdown
+            onClick={(e) => {
+              e.preventDefault();
+              window.open(props.href, '_blank');
+            }}
+            href={props.href}
+          >
+            {props.children}
+          </StyledMarkdown>
+        ),
         h1: ({ ...props }) => <StyledMarkdownH1>{props.children}</StyledMarkdownH1>,
         h2: ({ ...props }) => <StyledMarkdownH2>{props.children}</StyledMarkdownH2>,
         h3: ({ ...props }) => <StyledMarkdownH3>{props.children}</StyledMarkdownH3>,

diff --git a/src/custom/Markdown/style.tsx b/src/custom/Markdown/style.tsx
@@ -6,7 +6,8 @@ export const StyledMarkdown = styled('a')(({ theme }) => ({
   textDecoration: 'none',
   '&:hover': {
     textDecoration: 'underline'
-  }
+  },
+  cursor: 'pointer'
 }));
 
 export const StyledMarkdownP = styled('p')(({ theme }) => ({