From f5c21698a09d9214f57ce6dab2595f3d61e1ff11 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 7 Jan 2021 13:22:21 +0300 Subject: feat!: use react-markdown --- src/lib/Markdown/Markdown.tsx | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) (limited to 'src/lib/Markdown/Markdown.tsx') 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 = ({ data, url }) => { const [markdown, setMarkdown] = useState(data || ''); @@ -26,8 +39,14 @@ const Markdown: React.FC = ({ data, url }) => { }, [data, url]); const baseUrl = url?.slice(0, url.lastIndexOf('/')) || ''; - const lines = markdown.split(/\r?\n/).map(line => resolveUrls(line, baseUrl)); - return
; + + const sanitized = resolveUrls(markdown, baseUrl); + + return ( + + {sanitized} + + ); }; -- cgit v1.2.3