feat: Paragraph -> Text, parse selfClosingHtml

3 files changed, 33 insertions, 19 deletions

diff --git a/src/lib/Markdown/Content.tsx b/src/lib/Markdown/Content.tsx
index 1f0fcfc..e27b63f 100644
--- a/src/lib/Markdown/Content.tsx
+++ b/src/lib/Markdown/Content.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import CodeBlock from './CodeBlock';
-import Paragraph from './Paragraph';
+import Text from './Text';
 import InlineSyntax from './InlineSyntax';
 import { ParserPropTypes } from './types';
 
@@ -14,17 +14,22 @@ const denotesDottedList = (line: string): boolean => {
   return line.match(/^ ?- .*$/) !== null;
 }
 
-const denotesOpenHtmlTag = (line: string): string => {
+const denotesOpenHtml= (line: string): string => {
   const regex = /<([^/\s]*)[^<]*[^/]>/g;
   const match = regex.exec(line);
   return match ? match[1] : '';
 }
 
-const denotesClosingHtmlTag = (line: string, tag: string): boolean => {
+const denotesClosingHtml= (line: string, tag: string): boolean => {
   const regex = new RegExp(`</${tag}[^<]*>`);
   return line.match(regex) !== null;
 }
 
+const denotesSelfClosingHtml = (line: string): any => {
+  const regex = /(<[^/\s]*[^<]*\/>)/g;
+  return line.match(regex);
+}
+
 const Content: React.FC<ParserPropTypes> = ({ rawLines }) => {
   if (!rawLines.length) return null;
 
@@ -40,14 +45,25 @@ const Content: React.FC<ParserPropTypes> = ({ rawLines }) => {
     const dottedListLines = rawLines.splice(0, closeIndex).slice(0, closeIndex);
     dottedListLines.unshift(line);
     buffer = <ul>{dottedListLines.map(li => <li><InlineSyntax line={li} /></li>)}</ul>;
-  } else if (denotesOpenHtmlTag(line)) {
-    const tag = denotesOpenHtmlTag(line);
-    const closeIndex = rawLines.findIndex(line => denotesClosingHtmlTag(line, tag));
+  } else if (denotesOpenHtml(line)) {
+    const tag = denotesOpenHtml(line);
+    const closeIndex = rawLines.findIndex(line => denotesClosingHtml(line, tag));
     const htmlLines = rawLines.splice(0, closeIndex + 1).slice(0, closeIndex);
     htmlLines.unshift(line);
     buffer = <div dangerouslySetInnerHTML={{ __html: htmlLines.join('\n') }}></div>;
+  } else if (denotesSelfClosingHtml(line) !== null) {
+    const match = denotesSelfClosingHtml(line)[0];
+    const [before, after] = line.split(match);
+    console.log({ line, match, before, after});
+    buffer = (
+      <>
+        <Text line={before} />
+        <div dangerouslySetInnerHTML={{ __html: match }}></div>
+        <Text line={after} />
+      </>
+    );
   } else {
-    buffer = <Paragraph line={line} />
+    buffer = <p><Text line={line} /></p>
   }
 
   return (
diff --git a/src/lib/Markdown/Paragraph.tsx b/src/lib/Markdown/Paragraph.tsx
deleted file mode 100644
index f46199e..0000000
--- a/src/lib/Markdown/Paragraph.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { InlineParserPropTypes } from './types';
-import InlineSyntax, { splitter } from './InlineSyntax';
-
-const Paragraph: React.FC<InlineParserPropTypes> = ({ line }) => {
-  const result = line.split(splitter).map(span => <InlineSyntax line={span} />);
-  return <p> {result} </p>;
-}
-
-export default Paragraph;
-
-
diff --git a/src/lib/Markdown/Text.tsx b/src/lib/Markdown/Text.tsx
new file mode 100644
index 0000000..b989476
--- /dev/null
+++ b/src/lib/Markdown/Text.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { InlineParserPropTypes } from './types';
+import InlineSyntax, { splitter } from './InlineSyntax';
+
+const Text: React.FC<InlineParserPropTypes> = ({ line }) => {
+  return <>{line.split(splitter).map(span => <InlineSyntax line={span} />)}</>;
+}
+
+export default Text;
+