From d97f845a881901332ba2412c36be8747b50d796e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
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<PropTypes> = ({ 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 (
- <>
- <Typography variant={variant}>{sectionName}</Typography>
- <Divider variant={isMobile ? 'fullWidth' : 'middle'} />
- <Typography component="div" className={classes.content}>
- {children}
- </Typography>
- </>
- );
-};
-
-
-export default ContentSection;
--
cgit v1.2.3
From fb6a805f7285a88e485fed52211f0d4631c1e860 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
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(<Markdown data={data}/>, document.getElementById(\'root\'));
+import Markdown from 'react-benzin';
+const data = '# Header\nHello, *world!*';
+ReactDOM.render(<Markdown data={data}/>, document.getElementById('root'));
```
`$tryButton`
--
cgit v1.2.3
From fa16b78695099fe28d233edc8cb6fce67e5e2648 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
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 = <Markdown url={url} />;
if (page === 'custom') primaryWindowContent = <CustomPage />;
else if (page === 'live preview') {
- primaryWindowContent = <Markdown data={livePreviewData || '# Start typing in the right window!'} />;
+ primaryWindowContent = <Markdown source={livePreviewData || '# Start typing in the right window!'} />;
}
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<string, any>;
@@ -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<string, any>): React.FC => ({ children }) => {
+ if (typeof children === 'string' && children?.startsWith('$')) {
+ const symbol = children.slice(1);
+ return context[symbol] || null;
+ }
+ return <InlineCode>{children}</InlineCode>;
+};
+
+const Markdown: React.FC<PropTypes> = ({
+ children,
+ url,
+ source,
+ context = {},
+}) => {
+ const [markdown, setMarkdown] = useState<string>(source || '');
-const Markdown: React.FC<PropTypes> = ({ data, url, context = {} }) => {
- const [markdown, setMarkdown] = useState<string>(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 <InlineCode>{children}</InlineCode>;
- };
-
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 <eug-vs@keemail.me>
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<string, any>;
+ // 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<PropTypes> = ({
url,
source,
context = {},
+ plugins = [],
}) => {
const [markdown, setMarkdown] = useState<string>(source || '');
@@ -69,7 +72,7 @@ const Markdown: React.FC<PropTypes> = ({
<ReactMarkdown
source={sanitized}
renderers={renderers}
- plugins={[emoji]}
+ plugins={[emoji, ...plugins]}
allowDangerousHtml
/>
</Typography>
--
cgit v1.2.3