diff options
Diffstat (limited to 'src/lib/Markdown/Markdown.tsx')
-rw-r--r-- | src/lib/Markdown/Markdown.tsx | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx new file mode 100644 index 0000000..a3ffc38 --- /dev/null +++ b/src/lib/Markdown/Markdown.tsx @@ -0,0 +1,57 @@ +import React from 'react'; + +import ContentSection from '../ContentSection/ContentSection'; + + +interface PropTypes { + data: string; +} + +interface RawLinesPropType { + rawLines: string[]; + level?: number; +} + +const header = (level: number): string => { + return `^#{${level}} .*$`; +}; + +const Content: React.FC<RawLinesPropType> = ({ rawLines }) => { + const plainText = rawLines.join(); + return <p> {plainText} </p>; +} + +const Level: React.FC<RawLinesPropType> = ({ rawLines, level = 0 }) => { + const name = rawLines[0].slice(level); + const contentSize = rawLines.findIndex(line => line.match(header(level + 1))); + + const rawContent = (contentSize > 0) ? rawLines.slice(1, contentSize) : rawLines.slice(1); + const rawChildren = rawLines.slice(contentSize); + + const childrenLineGroups = rawChildren.reduce((acc: any[], cur: string) => { + if (cur.match(header(level + 1))) acc.push([]); + if (acc.length) acc[acc.length - 1].push(cur); + return acc; + }, []); + const children = childrenLineGroups.map(lineGroup => <Level rawLines={lineGroup} level={level + 1}/>) + + return level ? ( + <ContentSection sectionName={name}> + <Content rawLines={rawContent} /> + {children} + </ContentSection> + ) : ( + <> + {children} + </> + ); +} + +const Markdown: React.FC<PropTypes> = ({ data }) => { + const rawLines = data.split('\n'); + return <Level rawLines={rawLines} /> +}; + + +export default Markdown; + |