From a35cdfebf2d8c53c77900fee0826d4a967290e5d Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 5 Apr 2020 01:01:30 +0300 Subject: feat: add Paragraph component --- src/lib/Markdown/Paragraph.tsx | 67 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 src/lib/Markdown/Paragraph.tsx (limited to 'src/lib/Markdown/Paragraph.tsx') 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 = ({ data }) => { + if (!data) return null; + for (let key in styles) { + const match = data.match(patterns[key]); + if (match) return {match[1]}; + }; + return <>{data}; +} + +const Paragraph: React.FC = ({ data }) => { + let result; + result = data.split(matcher); + result = result.map(span => ); + return

{result}

; +} + +export default Paragraph; + -- cgit v1.2.3