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