aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Markdown/Markdown.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/Markdown/Markdown.tsx')
-rw-r--r--src/lib/Markdown/Markdown.tsx27
1 files changed, 23 insertions, 4 deletions
diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx
index cfcf117..01923f9 100644
--- a/src/lib/Markdown/Markdown.tsx
+++ b/src/lib/Markdown/Markdown.tsx
@@ -1,7 +1,12 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
+import ReactMarkdown from 'react-markdown';
+import { Link, Typography } from '@material-ui/core';
-import Section from './Section';
+import CodeBlock from './CodeBlock';
+import InlineCode from './InlineCode';
+import Heading from './Heading';
+import Image from './Image';
interface PropTypes {
data?: string;
@@ -12,10 +17,18 @@ const resolveUrls = (line: string, baseUrl: string): string => line.replace(
/src="(?!http)(.*)"[\s>]/,
(match, url) => `src="${baseUrl}/${url}?sanitize=true"`,
).replace(
- /\[(.*\]?.*)\]\((?!http)(.+?)\)/,
+ /\[(.*\]?.*)\]\((?!http)(.+?)\)/g,
(match, text, url) => `[${text}](${baseUrl}/${url})`,
);
+const renderers = {
+ heading: Heading,
+ inlineCode: InlineCode,
+ code: CodeBlock,
+ link: Link,
+ image: Image,
+};
+
const Markdown: React.FC<PropTypes> = ({ data, url }) => {
const [markdown, setMarkdown] = useState<string>(data || '');
@@ -26,8 +39,14 @@ const Markdown: React.FC<PropTypes> = ({ data, url }) => {
}, [data, url]);
const baseUrl = url?.slice(0, url.lastIndexOf('/')) || '';
- const lines = markdown.split(/\r?\n/).map(line => resolveUrls(line, baseUrl));
- return <Section rawLines={lines} />;
+
+ const sanitized = resolveUrls(markdown, baseUrl);
+
+ return (
+ <Typography>
+ <ReactMarkdown renderers={renderers} allowDangerousHtml>{sanitized}</ReactMarkdown>
+ </Typography>
+ );
};