src/lib/Markdown/Section.tsx


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

import React from 'react';
import ContentSection from '../ContentSection/ContentSection';
import { Typography } from '@material-ui/core';
import Content from './Content';
import { ParserPropTypes } from './types';

interface PropTypes extends ParserPropTypes {
  level?: number;
}

const getHeaderLevel = (header: string): number => {
  if (!header) return 0;
  let level = 0;
  while(header[level] === '#') level++;
  return level;
}

const ChildrenSections: React.FC<PropTypes> = ({ rawLines, level = 0 }) => {
  const childrenSectionLines = rawLines.reduce((sections: string[][], line: string) => {
    if (line) {
      if (getHeaderLevel(line) === level) sections.push([]);
      if (sections.length) sections[sections.length - 1].push(line);
    }
    return sections;
  }, []);
  const children = childrenSectionLines.map(sectionLines => <Section rawLines={sectionLines} level={level}/>);
  return <> {children} </>;
}

const Section: React.FC<PropTypes> = ({ rawLines, level = 0 }) => {
  const deeperLevelIndex = rawLines.findIndex(line => line.match(`^#{${level + 1},} .*$`));
  const rawContent = rawLines.splice(0, (deeperLevelIndex < 0) ? rawLines.length : deeperLevelIndex);

  if (!level) return (
    <>
      <Typography> <Content rawLines={rawContent} /> </Typography>
      <ChildrenSections rawLines={rawLines} level={getHeaderLevel(rawLines[0])}/>
    </>
  )

  const sectionName = rawContent.splice(0, 1)[0].slice(level).trim();
  const deeperLevel = getHeaderLevel(rawLines[0]);
  return (
    <ContentSection sectionName={sectionName} level={level}>
      <Content rawLines={rawContent} />
      <ChildrenSections rawLines={rawLines} level={deeperLevel} />
    </ContentSection>
  );
}

export default Section;