diff --git a/frontend/src/component/banners/Banner/Banner.tsx b/frontend/src/component/banners/Banner/Banner.tsx index 205a6268cb..9d79187e03 100644 --- a/frontend/src/component/banners/Banner/Banner.tsx +++ b/frontend/src/component/banners/Banner/Banner.tsx @@ -9,7 +9,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { useNavigate } from 'react-router-dom'; import { BannerDialog } from './BannerDialog/BannerDialog'; import { useState } from 'react'; -import ReactMarkdown from 'react-markdown'; +import { Markdown } from 'component/common/Markdown/Markdown'; import { BannerVariant, IBanner } from 'interfaces/banner'; import { Sticky } from 'component/common/Sticky/Sticky'; @@ -84,7 +84,7 @@ export const Banner = ({ banner, inline, maxHeight }: IBannerProps) => { - {message} + {message} ({ +const StyledMarkdown = styled(Markdown)(({ theme }) => ({ 'h1, h2, h3': { margin: theme.spacing(2, 0), }, @@ -30,9 +30,7 @@ export const BannerDialog = ({ setOpen(false); }} > - - {children} - + {children} ); }; diff --git a/frontend/src/component/common/Markdown/Markdown.tsx b/frontend/src/component/common/Markdown/Markdown.tsx new file mode 100644 index 0000000000..e2e4d96415 --- /dev/null +++ b/frontend/src/component/common/Markdown/Markdown.tsx @@ -0,0 +1,24 @@ +import { Link } from '@mui/material'; +import { AnchorHTMLAttributes, ComponentProps } from 'react'; +import ReactMarkdown from 'react-markdown'; +import { useNavigate } from 'react-router-dom'; + +const LinkRenderer = ({ + href = '', + children, +}: AnchorHTMLAttributes) => { + const navigate = useNavigate(); + + if (href.startsWith('/')) + return navigate(href)}>{children}; + + return ( + + {children} + + ); +}; + +export const Markdown = (props: ComponentProps) => ( + +); diff --git a/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx b/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx index 0a73adf5bd..069811d6ec 100644 --- a/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx +++ b/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx @@ -3,7 +3,7 @@ import { VFC } from 'react'; import { StyledRaisedSection } from '../IntegrationForm/IntegrationForm.styles'; import { Typography, styled } from '@mui/material'; import { IntegrationIcon } from '../IntegrationList/IntegrationIcon/IntegrationIcon'; -import ReactMarkdown from 'react-markdown'; +import { Markdown } from 'component/common/Markdown/Markdown'; const StyledHowDoesItWorkSection = styled(StyledRaisedSection)(({ theme }) => ({ fontSize: theme.fontSizes.smallBody, @@ -34,9 +34,7 @@ export const IntegrationHowToSection: VFC = ({ > {title} - - {provider!.howTo || ''} - + {provider!.howTo || ''} ); };