diff options
Diffstat (limited to 'src/lib/Markdown/Content.tsx')
-rw-r--r-- | src/lib/Markdown/Content.tsx | 30 |
1 files changed, 23 insertions, 7 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 ( |