diff options
Diffstat (limited to 'src/lib/Markdown/Content.tsx')
-rw-r--r-- | src/lib/Markdown/Content.tsx | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/src/lib/Markdown/Content.tsx b/src/lib/Markdown/Content.tsx new file mode 100644 index 0000000..aaea100 --- /dev/null +++ b/src/lib/Markdown/Content.tsx @@ -0,0 +1,77 @@ +import React from 'react'; + +import CodeBlock from './CodeBlock'; +import Text from './Text'; +import { ParserPropTypes } from './types'; + + +const denotesCodeBlock = (line: string): boolean => { + return line.match(/^```.*$/) !== null; +} + +const denotesDottedList = (line: string): boolean => { + return line.match(/^ ?- .*$/) !== null; +} + +const denotesOpenHtml= (line: string): string => { + const regex = /<([^/\s]*)[^<]*[^/]>/g; + const match = regex.exec(line); + return match ? match[1] : ''; +} + +const denotesClosingHtml= (line: string, tag: string): boolean => { + const regex = new RegExp(`</${tag}[^<]*>`); + return line.match(regex) !== null; +} + +const denotesSelfClosingHtml = (line: string): string[] | null => { + const regex = /(<[^/\s]*[^<]*\/>)/g; + return line.match(regex); +} + +const Content: React.FC<ParserPropTypes> = ({ rawLines }) => { + if (!rawLines.length) return null; + + const line = rawLines.splice(0, 1)[0]; + + let buffer; + if (denotesCodeBlock(line)) { + const closeIndex = rawLines.findIndex(line => denotesCodeBlock(line)); + const codeBlockLines = rawLines.splice(0, closeIndex + 1).slice(0, closeIndex); + buffer = <CodeBlock rawLines={codeBlockLines} /> + } else if (denotesDottedList(line)) { + const closeIndex = rawLines.findIndex(line => !denotesDottedList(line)); + const dottedListLines = rawLines.splice(0, closeIndex).slice(0, closeIndex); + dottedListLines.unshift(line); + buffer = <ul>{dottedListLines.map(li => <li><Text line={li.slice(2)} /></li>)}</ul>; + } else if ((buffer = denotesOpenHtml(line))) { + const tag = buffer; + 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 ((buffer = denotesSelfClosingHtml(line)) !== null) { + const match = buffer[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 = <p><Text line={line} /></p> + } + + return ( + <> + { buffer } + <Content rawLines={rawLines} /> + </> + ); +} + +export default Content; + |