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' ? : title} + title={ + typeof title === 'string' ? : title + } placement={placement} arrow onClick={onClick} 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 = ({ content }) => { +export const RenderMarkdown: React.FC = ({ content, isTooltip = false }) => { return ( {props.children}, + p: ({ ...props }) => + isTooltip ? ( + {props.children} + ) : ( + {props.children} + ), a: ({ ...props }) => ( { - 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} @@ -60,40 +71,3 @@ export const RenderMarkdown: React.FC = ({ content }) => { ); }; - -export const RenderMarkdownTooltip: React.FC = ({ content }) => { - return ( - {props.children}, - a: ({ ...props }) => ( - { - window.open(props.href, '_blank'); - e.stopPropagation(); - }} - as="a" - > - {props.children} - - ), - h1: ({ ...props }) => {props.children}, - h2: ({ ...props }) => {props.children}, - h3: ({ ...props }) => {props.children}, - h4: ({ ...props }) => {props.children}, - h5: ({ ...props }) => {props.children}, - h6: ({ ...props }) => {props.children}, - blockquote: ({ ...props }) => ( - {props.children} - ), - ul: ({ ...props }) => {props.children}, - li: ({ ...props }) => {props.children}, - th: ({ ...props }) => {props.children}, - td: ({ ...props }) => {props.children} - }} - > - {content} - - ); -}; 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 = ({ type = 'note', title, content }) => { {title} - + );