aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--webui/src/components/Content/AnchorTag.tsx38
-rw-r--r--webui/src/components/Content/index.tsx2
2 files changed, 40 insertions, 0 deletions
diff --git a/webui/src/components/Content/AnchorTag.tsx b/webui/src/components/Content/AnchorTag.tsx
new file mode 100644
index 00000000..47d5e2fa
--- /dev/null
+++ b/webui/src/components/Content/AnchorTag.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+ tag: {
+ color: theme.palette.text.secondary,
+ },
+}));
+
+const AnchorTag = ({ children, href }: React.HTMLProps<HTMLAnchorElement>) => {
+ const classes = useStyles();
+ const origin = window.location.origin;
+ const destination = href === undefined ? '' : href;
+ const isInternalLink =
+ destination.startsWith('/') || destination.startsWith(origin);
+ const internalDestination = destination.replace(origin, '');
+ const internalLink = (
+ <Link className={classes.tag} to={internalDestination}>
+ {children}
+ </Link>
+ );
+ const externalLink = (
+ <a
+ className={classes.tag}
+ href={destination}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ {children}
+ </a>
+ );
+
+ return isInternalLink ? internalLink : externalLink;
+};
+
+export default AnchorTag;
diff --git a/webui/src/components/Content/index.tsx b/webui/src/components/Content/index.tsx
index 809ae818..e4018809 100644
--- a/webui/src/components/Content/index.tsx
+++ b/webui/src/components/Content/index.tsx
@@ -5,6 +5,7 @@ import parse from 'remark-parse';
import remark2react from 'remark-react';
import unified from 'unified';
+import AnchorTag from './AnchorTag';
import BlockQuoteTag from './BlockQuoteTag';
import ImageTag from './ImageTag';
import PreTag from './PreTag';
@@ -19,6 +20,7 @@ const Content: React.FC<Props> = ({ markdown }: Props) => {
remarkReactComponents: {
img: ImageTag,
pre: PreTag,
+ a: AnchorTag,
blockquote: BlockQuoteTag,
},
})