From d97f845a881901332ba2412c36be8747b50d796e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 14 Jan 2021 19:42:20 +0300 Subject: feat!: remove ContentSection --- src/lib/ContentSection/ContentSection.tsx | 51 ------------------------------- 1 file changed, 51 deletions(-) delete mode 100644 src/lib/ContentSection/ContentSection.tsx diff --git a/src/lib/ContentSection/ContentSection.tsx b/src/lib/ContentSection/ContentSection.tsx deleted file mode 100644 index f18684c..0000000 --- a/src/lib/ContentSection/ContentSection.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; - -import { - Typography, - Divider, - makeStyles, - useMediaQuery, - Theme, -} from '@material-ui/core'; - - -interface PropTypes { - sectionName: string; - level?: number; -} - -const useStyles = makeStyles(theme => ({ - content: { - [theme.breakpoints.up('md')]: { - padding: theme.spacing(2, 2, 1, 3), - }, - [theme.breakpoints.down('sm')]: { - padding: theme.spacing(2, 0), - }, - marginBottom: theme.spacing(1), - }, -})); - -const ContentSection: React.FC = ({ sectionName, children, level = 0 }) => { - const classes = useStyles(); - const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm')); - - let adjustedLevel = level + 2; // Make everything smaller - if (adjustedLevel > 6) adjustedLevel = 6; - - type Variant = 'h3' | 'h4' | 'h5' | 'h6'; - const variant: Variant = `h${adjustedLevel}` as Variant; - - return ( - <> - {sectionName} - - - {children} - - - ); -}; - - -export default ContentSection; -- cgit v1.2.3 From fb6a805f7285a88e485fed52211f0d4631c1e860 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 14 Jan 2021 19:50:33 +0300 Subject: fix: remove unnecessary escape sequences --- src/demo/content.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/demo/content.md b/src/demo/content.md index 41607a9..01d848f 100644 --- a/src/demo/content.md +++ b/src/demo/content.md @@ -4,9 +4,9 @@ Switch between tabs on the header to explore other markdown templates. :recycle: Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen: ## How do I use this feature? ``` -import Markdown from \'react-benzin\'; -const data = \'# Header\\nHello, *world!*\'; -ReactDOM.render(, document.getElementById(\'root\')); +import Markdown from 'react-benzin'; +const data = '# Header\nHello, *world!*'; +ReactDOM.render(, document.getElementById('root')); ``` `$tryButton` -- cgit v1.2.3 From fa16b78695099fe28d233edc8cb6fce67e5e2648 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 14 Jan 2021 19:51:16 +0300 Subject: refactor: rename data -> source prop --- src/index.tsx | 2 +- src/lib/Markdown/Markdown.tsx | 41 ++++++++++++++++++++++++++--------------- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index aa786ac..e37e7aa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -133,7 +133,7 @@ const App: React.FC = () => { let primaryWindowContent = ; if (page === 'custom') primaryWindowContent = ; else if (page === 'live preview') { - primaryWindowContent = ; + primaryWindowContent = ; } const tryButton = ( diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 4fa6a9a..32732ec 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -10,7 +10,7 @@ import Heading from './Heading'; import Image from './Image'; interface PropTypes { - data?: string; + source?: string; url?: string; // eslint-disable-next-line @typescript-eslint/no-explicit-any context?: Record; @@ -24,33 +24,44 @@ const resolveUrls = (line: string, baseUrl: string): string => line.replace( (match, text, url) => `[${text}](${baseUrl}/${url})`, ); +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const WrappedInlineCode = (context: Record): React.FC => ({ children }) => { + if (typeof children === 'string' && children?.startsWith('$')) { + const symbol = children.slice(1); + return context[symbol] || null; + } + return {children}; +}; + +const Markdown: React.FC = ({ + children, + url, + source, + context = {}, +}) => { + const [markdown, setMarkdown] = useState(source || ''); -const Markdown: React.FC = ({ data, url, context = {} }) => { - const [markdown, setMarkdown] = useState(data || ''); + useEffect(() => { + if (url) axios.get(url).then(response => setMarkdown(response.data)); + }, [url]); - if (url) axios.get(url).then(response => setMarkdown(response.data)); + useEffect(() => { + if (source) setMarkdown(source); + }, [source]); useEffect(() => { - if (!url) setMarkdown(data || ''); - }, [data, url]); + if (children && typeof children === 'string') setMarkdown(children); + }, [children]); 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, code: CodeBlock, link: Link, image: Image, - inlineCode: WrappedInlineCode, + inlineCode: WrappedInlineCode(context), }; return ( -- cgit v1.2.3 From ce028df672325e2efaef2f9dbee05701328b0924 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 14 Jan 2021 19:54:17 +0300 Subject: feat: allow passing plugins to Markdown --- src/lib/Markdown/Markdown.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 32732ec..c0389dc 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -14,6 +14,8 @@ interface PropTypes { url?: string; // eslint-disable-next-line @typescript-eslint/no-explicit-any context?: Record; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + plugins?: any[] } const resolveUrls = (line: string, baseUrl: string): string => line.replace( @@ -38,6 +40,7 @@ const Markdown: React.FC = ({ url, source, context = {}, + plugins = [], }) => { const [markdown, setMarkdown] = useState(source || ''); @@ -69,7 +72,7 @@ const Markdown: React.FC = ({ -- cgit v1.2.3