diff options
author | Eugene Sokolov <eug-vs@keemail.me> | 2020-04-06 17:47:20 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-04-06 17:47:20 +0300 |
commit | 62df0ff96fc9ab832212d223150862c7667d9ffc (patch) | |
tree | 9159c443e970ea2a0819edffbe2fe5cc101c1001 /src/lib/Markdown/Content.tsx | |
parent | a72027d21154ba94e26d6b96092afc9704b8288c (diff) | |
parent | 400330fe5ebd6951a97f07b6147b3af6113e034f (diff) | |
download | react-benzin-3.1.0.tar.gz |
Merge pull request #8 from eug-vs/developv3.1.0
Markdown parser
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; + |