mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-28 17:55:15 +02:00
769146fbd3
Iterates on https://github.com/Unleash/unleash/pull/5762 While on the previous PR we would always open markdown links on a new tab, we still want to navigate on the same tab when a relative link is specified. This adds a new `Markdown` common component with this logic by default, which should make things a lot simpler and easier to maintain. The logic that was followed is similar to the existing internal/external links logic in our banners.
25 lines
701 B
TypeScript
25 lines
701 B
TypeScript
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<HTMLAnchorElement>) => {
|
|
const navigate = useNavigate();
|
|
|
|
if (href.startsWith('/'))
|
|
return <Link onClick={() => navigate(href)}>{children}</Link>;
|
|
|
|
return (
|
|
<Link href={href} target='_blank' rel='noreferrer'>
|
|
{children}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export const Markdown = (props: ComponentProps<typeof ReactMarkdown>) => (
|
|
<ReactMarkdown components={{ a: LinkRenderer }} {...props} />
|
|
);
|