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 From 4ad1f101101771350b253762c5b02d57df6f4ddd Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 9 Jan 2021 16:06:48 +0300 Subject: feat: use remark-gemoji --- src/lib/Markdown/Markdown.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 01923f9..955aeda 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -1,7 +1,8 @@ import React, { useState, useEffect } from 'react'; +import { Link, Typography } from '@material-ui/core'; import axios from 'axios'; import ReactMarkdown from 'react-markdown'; -import { Link, Typography } from '@material-ui/core'; +import emoji from 'remark-gemoji'; import CodeBlock from './CodeBlock'; import InlineCode from './InlineCode'; @@ -44,7 +45,13 @@ const Markdown: React.FC = ({ data, url }) => { return ( - {sanitized} + + {sanitized} + ); }; -- cgit v1.2.3 From 53e41901558319e6063fdcbca4f6150101c57f10 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 11 Jan 2021 22:29:03 +0300 Subject: feat: allow passing variable context --- src/lib/Markdown/Markdown.tsx | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 955aeda..9bc05a0 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -12,6 +12,7 @@ import Image from './Image'; interface PropTypes { data?: string; url?: string; + context?: any; } const resolveUrls = (line: string, baseUrl: string): string => line.replace( @@ -22,15 +23,8 @@ const resolveUrls = (line: string, baseUrl: string): string => line.replace( (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: React.FC = ({ data, url, context = {} }) => { const [markdown, setMarkdown] = useState(data || ''); if (url) axios.get(url).then(response => setMarkdown(response.data)); @@ -43,15 +37,26 @@ const Markdown: React.FC = ({ data, url }) => { const sanitized = resolveUrls(markdown, baseUrl); + const renderers = { + heading: Heading, + inlineCode: InlineCode, + link: Link, + image: Image, + code: ({ language, value }: any) => { + if (language === 'react') return context[value] || null; + return CodeBlock({ value }); + }, + }; + + return ( - {sanitized} - + /> ); }; -- cgit v1.2.3 From e3253a726d4bb71825e392cbde89d05bb3146dc1 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 11 Jan 2021 22:40:43 +0300 Subject: feat: use inline syntax for context --- src/lib/Markdown/Markdown.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 9bc05a0..c91bc14 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -12,7 +12,7 @@ import Image from './Image'; interface PropTypes { data?: string; url?: string; - context?: any; + context?: Record; } const resolveUrls = (line: string, baseUrl: string): string => line.replace( @@ -34,21 +34,24 @@ const Markdown: React.FC = ({ data, url, context = {} }) => { }, [data, url]); const baseUrl = url?.slice(0, url.lastIndexOf('/')) || ''; - const sanitized = resolveUrls(markdown, baseUrl); + const WrappedInlineCode: React.FC = ({ children }) => { + if (typeof children === 'string' && children?.startsWith('$')) { + const symbol = children.slice(1); + return context[symbol] || null; + } + return {children}; + }; + const renderers = { heading: Heading, - inlineCode: InlineCode, + code: CodeBlock, link: Link, image: Image, - code: ({ language, value }: any) => { - if (language === 'react') return context[value] || null; - return CodeBlock({ value }); - }, + inlineCode: WrappedInlineCode, }; - return ( Date: Mon, 11 Jan 2021 23:15:00 +0300 Subject: fix: resolve eslint errors --- src/lib/Markdown/Markdown.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index c91bc14..4fa6a9a 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -12,6 +12,7 @@ import Image from './Image'; interface PropTypes { data?: string; url?: string; + // eslint-disable-next-line @typescript-eslint/no-explicit-any context?: Record; } -- cgit v1.2.3