aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Markdown/Paragraph.tsx
diff options
context:
space:
mode:
authoreug-vs <eug-vs@keemail.me>2020-04-05 01:01:30 +0300
committereug-vs <eug-vs@keemail.me>2020-04-05 01:01:30 +0300
commita35cdfebf2d8c53c77900fee0826d4a967290e5d (patch)
tree1000c1408ae4d67e9a01ec2586deb3d34a968bc3 /src/lib/Markdown/Paragraph.tsx
parent0dad2f90bc79bdaa909184c618da5c0473972e0c (diff)
downloadreact-benzin-a35cdfebf2d8c53c77900fee0826d4a967290e5d.tar.gz
feat: add Paragraph component
Diffstat (limited to 'src/lib/Markdown/Paragraph.tsx')
-rw-r--r--src/lib/Markdown/Paragraph.tsx67
1 files changed, 67 insertions, 0 deletions
diff --git a/src/lib/Markdown/Paragraph.tsx b/src/lib/Markdown/Paragraph.tsx
new file mode 100644
index 0000000..f433cf5
--- /dev/null
+++ b/src/lib/Markdown/Paragraph.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+interface PropTypes {
+ data: string;
+}
+
+interface Closures {
+ [key: string]: string;
+}
+
+interface Patterns {
+ [key: string]: RegExp;
+}
+
+interface Styles {
+ [key: string]: React.CSSProperties;
+}
+
+
+const captureInside = (closure: string): any => {
+ return new RegExp(closure + '([^' + closure + ']+)' + closure);
+}
+const capture = (closure: string): any => {
+ return new RegExp('(' + closure + '[^' + closure + ']+' + closure + ')');
+}
+
+const closures: Closures = {
+ inlineCode: '`',
+ bold: '\\*\\*',
+};
+
+const styles: Styles = {
+ inlineCode: { background: '#444444', padding: '4px' },
+ bold: { fontWeight: 'bold' },
+};
+const patterns: Patterns = {};
+
+
+Object.keys(closures).forEach((key: string): void => {
+ patterns[key] = capture(closures[key]);
+});
+
+const matcher = new RegExp(Object.values(patterns).map(regex => regex.source).join('|'));
+
+Object.keys(closures).forEach((key: string): void => {
+ patterns[key] = captureInside(closures[key]);
+});
+
+
+const SyntaxSpan: React.FC<PropTypes> = ({ data }) => {
+ if (!data) return null;
+ for (let key in styles) {
+ const match = data.match(patterns[key]);
+ if (match) return <span style={styles[key]}>{match[1]}</span>;
+ };
+ return <>{data}</>;
+}
+
+const Paragraph: React.FC<PropTypes> = ({ data }) => {
+ let result;
+ result = data.split(matcher);
+ result = result.map(span => <SyntaxSpan data={span} />);
+ return <p> {result} </p>;
+}
+
+export default Paragraph;
+