diff --git a/src/custom/Markdown/index.tsx b/src/custom/Markdown/index.tsx index 92cbb5fd2..cc0c8ee9b 100644 --- a/src/custom/Markdown/index.tsx +++ b/src/custom/Markdown/index.tsx @@ -2,6 +2,7 @@ import ReactMarkdown from 'react-markdown'; import rehypeRaw from 'rehype-raw'; import remarkGfm from 'remark-gfm'; import { + BasicAnchorMarkdown, StyledMarkdown, StyledMarkdownBlockquote, StyledMarkdownH1, @@ -97,3 +98,27 @@ export const RenderMarkdownTooltip: React.FC = ({ content } ); }; + +// Markdown support for notifications markdown content +export const BasicMarkdown: React.FC = ({ content }) => { + return ( + ( + { + window.open(props.href, '_blank'); + e.stopPropagation(); + }} + as="a" + > + {props.children} + + ) + }} + > + {content} + + ); +}; diff --git a/src/custom/Markdown/style.tsx b/src/custom/Markdown/style.tsx index aab1940ce..9c54d8e1d 100644 --- a/src/custom/Markdown/style.tsx +++ b/src/custom/Markdown/style.tsx @@ -10,6 +10,15 @@ export const StyledMarkdown = styled('a')(({ theme }) => ({ cursor: 'pointer' })); +// anchor style for notifications markdown content +export const BasicAnchorMarkdown = styled('a')(() => ({ + textDecoration: 'none', + '&:hover': { + textDecoration: 'underline' + }, + cursor: 'pointer' +})); + export const StyledMarkdownP = styled('p')(({ theme }) => ({ color: theme.palette.text.default, marginBlock: '0px', diff --git a/src/custom/index.tsx b/src/custom/index.tsx index 9a9ddd655..1fc4eea32 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -31,7 +31,7 @@ import { useWindowDimensions } from './Helpers/Dimension'; import { useNotificationHandler } from './Helpers/Notification'; import { ColView, updateVisibleColumns } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx'; import { LearningCard } from './LearningCard'; -import { RenderMarkdown } from './Markdown'; +import { BasicMarkdown, RenderMarkdown } from './Markdown'; import { ModalCard } from './ModalCard'; import PopperListener, { IPopperListener } from './PopperListener'; import PromptComponent from './Prompt'; @@ -108,7 +108,7 @@ export { // Markdown export { StyledMarkdown } from './Markdown/style'; -export { RenderMarkdown }; +export { BasicMarkdown, RenderMarkdown }; // Stepper export { CustomizedStepper, useStepper } from './Stepper';