blob: b3119f14ca9df599f1265df295d7ef23bfbe1136 (
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
|
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 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: 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;
|
