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/CodeBlock.tsx | 13 ++++-- src/lib/Markdown/Content.tsx | 90 ----------------------------------- src/lib/Markdown/Heading.tsx | 33 +++++++++++++ src/lib/Markdown/Image.tsx | 12 +++++ src/lib/Markdown/InlineCode.tsx | 18 +++++++ src/lib/Markdown/Markdown.tsx | 27 +++++++++-- src/lib/Markdown/Section.tsx | 61 ------------------------ src/lib/Markdown/SyntacticSpan.tsx | 96 -------------------------------------- src/lib/Markdown/Text.tsx | 13 ------ 9 files changed, 94 insertions(+), 269 deletions(-) delete mode 100644 src/lib/Markdown/Content.tsx create mode 100644 src/lib/Markdown/Heading.tsx create mode 100644 src/lib/Markdown/Image.tsx create mode 100644 src/lib/Markdown/InlineCode.tsx delete mode 100644 src/lib/Markdown/Section.tsx delete mode 100644 src/lib/Markdown/SyntacticSpan.tsx delete mode 100644 src/lib/Markdown/Text.tsx (limited to 'src/lib') diff --git a/src/lib/Markdown/CodeBlock.tsx b/src/lib/Markdown/CodeBlock.tsx index 394458e..7431881 100644 --- a/src/lib/Markdown/CodeBlock.tsx +++ b/src/lib/Markdown/CodeBlock.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { Paper } from '@material-ui/core'; +import { Paper, makeStyles } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; -import { ParserPropTypes } from './types'; +interface PropTypes { + value: string; +} const useStyles = makeStyles(theme => ({ root: { @@ -14,11 +15,13 @@ const useStyles = makeStyles(theme => ({ }, })); -const CodeBlock: React.FC = ({ rawLines }) => { +const CodeBlock: React.FC = ({ value }) => { const classes = useStyles(); return ( - {rawLines.map(line => 
{line}
)} + 
+        {value}
+
); }; diff --git a/src/lib/Markdown/Content.tsx b/src/lib/Markdown/Content.tsx deleted file mode 100644 index 88409fa..0000000 --- a/src/lib/Markdown/Content.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; - -import CodeBlock from './CodeBlock'; -import Text from './Text'; -import { ParserPropTypes } from './types'; - - -const denotesCodeBlock = (line: string): boolean => { - return line.match(/^\s*```.*$/) !== null; -}; - -const denotesDottedList = (line: string): boolean => { - return line.match(/^ ?[-*] .*$/) !== null; -}; - -const denotesOpenHtml = (line: string): string => { - const regex = /<([^/\s]*)[^<]*[^/]>/g; - const match = regex.exec(line); - return match ? match[1] : ''; -}; - -const denotesClosingHtml = (line: string, tag: string): boolean => { - const regex = new RegExp(``); - return line.match(regex) !== null; -}; - -const denotesSelfClosingHtml = (line: string): string[] | null => { - const regex = /(<[^/\s]*[^<]*\/>)/g; - return line.match(regex); -}; - -const declaresNoLineBreak = (line: string): boolean => { - return line.match(/\\\|$/) !== null; -}; - -const Content: React.FC = ({ rawLines }) => { - if (!rawLines.length) return null; - - const line = rawLines.splice(0, 1)[0]; - - let buffer; - if (denotesCodeBlock(line)) { - const closeIndex = rawLines.findIndex(rawLine => denotesCodeBlock(rawLine)); - const codeBlockLines = rawLines.splice(0, closeIndex + 1).slice(0, closeIndex); - buffer = ; - } else if (denotesDottedList(line)) { - const closeIndex = rawLines.findIndex(rawLine => !denotesDottedList(rawLine)); - const dottedListLines = rawLines.splice(0, closeIndex).slice(0, closeIndex); - dottedListLines.unshift(line); - buffer =
    {dottedListLines.map(li =>
    • )}
; - } else if ((buffer = denotesOpenHtml(line))) { - const tag = buffer; - const closeIndex = denotesClosingHtml(line, tag) ? -1 : rawLines.findIndex( - rawLine => denotesClosingHtml(rawLine, tag), - ); - const htmlLines = rawLines.splice(0, closeIndex + 1); - htmlLines.unshift(line); - buffer =
; - } else if ((buffer = denotesSelfClosingHtml(line)) !== null) { - const match = buffer[0]; - const [before, after] = line.split(match); - buffer = ( - <> - -
- - - ); - } else if (declaresNoLineBreak(line)) { - const closeIndex = rawLines.findIndex(rawLine => !declaresNoLineBreak(rawLine)); - const lineBreakLines = rawLines.splice(0, closeIndex).map(rawLine => rawLine.slice(0, -2)); - lineBreakLines.unshift(line.slice(0, -2)); - lineBreakLines.push(rawLines.splice(0, 1)[0]); - buffer =

{lineBreakLines.map(lineBreakLine => )}

; - } else if (denotesClosingHtml(line, '')) { - buffer = null; - } else { - buffer =

; - } - - return ( - <> - { buffer } - - - ); -}; - -export default Content; - diff --git a/src/lib/Markdown/Heading.tsx b/src/lib/Markdown/Heading.tsx new file mode 100644 index 0000000..cc0b709 --- /dev/null +++ b/src/lib/Markdown/Heading.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Typography, Divider, makeStyles } from '@material-ui/core'; + +interface PropTypes { + level: number; +} + +type Variant = 'h3' | 'h4' | 'h5' | 'h6'; + +const useStyles = makeStyles(theme => ({ + root: { + padding: theme.spacing(2, 0, 1, 0), + }, +})); + +const Heading: React.FC = ({ children, level }) => { + const classes = useStyles(); + + let adjustedLevel = level + 2; // Make everything smaller + if (adjustedLevel > 6) adjustedLevel = 6; + + const variant: Variant = `h${adjustedLevel}` as Variant; + + return ( +
+ {children} + +
+ ); +}; + +export default Heading; + diff --git a/src/lib/Markdown/Image.tsx b/src/lib/Markdown/Image.tsx new file mode 100644 index 0000000..472d6f0 --- /dev/null +++ b/src/lib/Markdown/Image.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +interface PropTypes { + src: string; + alt: string; +} + +const Image: React.FC = ({ src, alt }) => { + return {alt}; +}; + +export default Image; diff --git a/src/lib/Markdown/InlineCode.tsx b/src/lib/Markdown/InlineCode.tsx new file mode 100644 index 0000000..c51f924 --- /dev/null +++ b/src/lib/Markdown/InlineCode.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + root: { + background: theme.palette.background.default, + borderRadius: theme.spacing(0.5), + padding: theme.spacing(0.5), + fontFamily: 'Monospace', + }, +})); + +const InlineCode: React.FC = ({ children }) => { + const classes = useStyles(); + return {children}; +}; + +export default InlineCode; 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} + + ); }; diff --git a/src/lib/Markdown/Section.tsx b/src/lib/Markdown/Section.tsx deleted file mode 100644 index fb2933d..0000000 --- a/src/lib/Markdown/Section.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import { Typography } from '@material-ui/core'; -import ContentSection from '../ContentSection/ContentSection'; -import Content from './Content'; -import { ParserPropTypes } from './types'; - -interface PropTypes extends ParserPropTypes { - level?: number; -} - -interface MapperPropTypes extends PropTypes { - SectionComponent: React.FC; -} - -const getHeaderLevel = (header: string): number => { - if (!header) return 0; - let level = 0; - while (header[level] === '#') level += 1; - return level; -}; - -const SectionMapper: React.FC = ({ rawLines, level = 0, SectionComponent }) => { - const children = rawLines - .reduce((sections: string[][], line: string) => { - if (line) { - if (getHeaderLevel(line) === level) sections.push([]); - if (sections.length) sections[sections.length - 1].push(line); - } - return sections; - }, []) - .map(sectionLines => ); - - return <>{children}; -}; - - -const Section: React.FC = ({ rawLines, level = 0 }) => { - const deeperLevelIndex = rawLines.findIndex(line => line.match(`^#{${level + 1},} .*$`)); - const rawContent = rawLines.splice(0, (deeperLevelIndex < 0) ? rawLines.length : deeperLevelIndex); - - if (!level) { - return ( - <> - - - - ); - } - - const sectionName = rawContent.splice(0, 1)[0].slice(level).trim(); - const deeperLevel = getHeaderLevel(rawLines[0]); - return ( - - - - - ); -}; - -export default Section; - diff --git a/src/lib/Markdown/SyntacticSpan.tsx b/src/lib/Markdown/SyntacticSpan.tsx deleted file mode 100644 index 11cc024..0000000 --- a/src/lib/Markdown/SyntacticSpan.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import { Link, makeStyles } from '@material-ui/core'; - -import { lib as emojiLib } from 'emojilib'; - -interface PropTypes { - span: string; -} - -interface RegexPair { - global: RegExp; - local: RegExp; -} - -interface Emoji { - name: string; - char: string; -} - -const enclosureRegex = (e: string): RegexPair => ({ - local: new RegExp(`${e}([^${e}]+)${e}`), - global: new RegExp(`(${e}[^${e}]+${e})`), -}); - -const regex: Record = { - conceal: { - global: /(!?\[.+?\]\(.+?\))(?!])/g, - local: /!?\[(.*\]?.*)\]\((.+?)\)/, - }, - rawLink: { - // eslint-disable-next-line max-len - global: /((?:(?:[A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)(?:(?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/, - local: /&^/, - }, - emoji: enclosureRegex(':'), - bold: enclosureRegex('\\*\\*'), - italic: enclosureRegex('\\*'), - code: enclosureRegex('`'), - strikeThrough: enclosureRegex('~~'), -}; - -const splitter = new RegExp(Object.values(regex).map(pair => pair.global.source).join('|')); - -const emojiList: Emoji[] = []; -Object.keys(emojiLib).forEach(name => emojiList.push({ name, char: emojiLib[name].char })); - -const useStyles = makeStyles(theme => ({ - code: { - background: theme.palette.background.default, - borderRadius: theme.spacing(0.5), - padding: theme.spacing(0.5), - fontFamily: 'Monospace', - }, - image: { - maxWidth: '100%', - maxHeight: '100%', - }, -})); - -const SyntacticSpan: React.FC = ({ span }) => { - const classes = useStyles(); - if (!span) return null; - - const matchConceal = regex.conceal.local.exec(span); - if (matchConceal) { - if (span[0] === '!') return {matchConceal[1]}; - return ; - } - - const matchEmoji = span.match(regex.emoji.local); - if (matchEmoji) { - const emoji = emojiList.find(e => e.name === matchEmoji[1]); - return {emoji ? emoji.char : span}; - } - - const matchCode = span.match(regex.code.local); - if (matchCode) return {matchCode[1]}; - - const matchBold = span.match(regex.bold.local); - if (matchBold) return {matchBold[1]}; - - const matchItalic = span.match(regex.italic.local); - if (matchItalic) return {matchItalic[1]}; - - const matchStrikeThrough = span.match(regex.strikeThrough.local); - if (matchStrikeThrough) return {matchStrikeThrough[1]}; - - if (span.match(regex.rawLink.global)) return {span}; - - return <>{span}; -}; - - -export { splitter }; -export default SyntacticSpan; - diff --git a/src/lib/Markdown/Text.tsx b/src/lib/Markdown/Text.tsx deleted file mode 100644 index be715fd..0000000 --- a/src/lib/Markdown/Text.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import SyntacticSpan, { splitter } from './SyntacticSpan'; - -interface PropTypes { - line: string; -} - -const Text: React.FC = ({ line }) => { - return <>{line.split(splitter).map(span => )}; -}; - -export default Text; - -- cgit v1.2.3