blob: 8d9343719adc50346373cae6a8f78455398c65b3 (
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
import React, { useState } from 'react';
import axios from 'axios';
import ContentSection from '../ContentSection/ContentSection';
interface PropTypes {
data?: string;
url?: string;
}
interface RawLinesPropType {
rawLines: string[];
level?: number;
}
const header = (level: number): string => {
return `^#{${level}} .*$`;
}
const CodeBlock: React.FC<{ rawLines: String[]}> = ({ rawLines }) => {
return (
<p style={{background: '#444444'}}>
{rawLines.map(line => <> {line} <br/> </>)}
</p>
);
}
const Content: React.FC<RawLinesPropType> = ({ rawLines }) => {
if (!rawLines.length) return <></>;
const line = rawLines[0];
const otherLines = rawLines.slice(1);
if (line.slice(0, 3) === '```') {
const closeIndex = otherLines.findIndex(line => line.slice(0, 3) === '```');
console.log({ line, otherLines, closeIndex });
return (
<>
<CodeBlock rawLines={otherLines.slice(0, closeIndex)} />
<Content rawLines={otherLines.slice(closeIndex + 1)} />
</>
)
}
return (
<>
<p> {line} </p>
<Content rawLines={rawLines.slice(1)} />
</>
)
}
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: string[][], 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, url }) => {
const [markdown, setMarkdown] = useState<string>(data || '');
if (url) axios.get(url).then(response => setMarkdown(response.data));
return <Level rawLines={markdown.split('\n')} />
};
export default Markdown;
|
