blob: a3ffc38984e417f6d524f7f0c0e646c8bc2d2ead (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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;
|
