feat: add Paragraph component

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;
+