From bdcc2edb38fb0e57604fa12d25b2a4b478261e18 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 4 Apr 2020 22:05:40 +0300 Subject: refactor: structurize Markdown component :recycle: --- src/lib/Markdown/Section.tsx | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/lib/Markdown/Section.tsx (limited to 'src/lib/Markdown/Section.tsx') diff --git a/src/lib/Markdown/Section.tsx b/src/lib/Markdown/Section.tsx new file mode 100644 index 0000000..c902379 --- /dev/null +++ b/src/lib/Markdown/Section.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import ContentSection from '../ContentSection/ContentSection'; +import Content from './Content'; +import { ParserPropTypes } from './types'; + +interface PropTypes extends ParserPropTypes { + level?: number; +} + +const matchHeaderLevel = (line: string, level: number): boolean => { + return line.match(`^#{${level}} .*$`) !== null; +} + +const Section: React.FC = ({ rawLines, level = 0 }) => { + const sectionName = rawLines.splice(0, 1)[0].slice(level).trim(); + const contentSize = rawLines.findIndex(line => matchHeaderLevel(line, level + 1)); + const rawContent = rawLines.splice(0, (contentSize < 0) ? rawLines.length : contentSize); + + const childrenSectionLines = rawLines.reduce((sections: string[][], line: string) => { + if (matchHeaderLevel(line, level + 1)) sections.push([]); + if (sections.length) sections[sections.length - 1].push(line); + return sections; + }, []); + const children = childrenSectionLines.map(sectionLines =>
) + + return level ? ( + + + {children} + + ) : ( + <> + {children} + + ); +} + +export default Section; + -- cgit v1.2.3 From 0389a542776f8f7fc3bc71a54b0aca7179f6fed3 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 5 Apr 2020 07:44:13 +0300 Subject: refactor: improve Markdown/Section :zap: --- src/lib/Markdown/Section.tsx | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) (limited to 'src/lib/Markdown/Section.tsx') diff --git a/src/lib/Markdown/Section.tsx b/src/lib/Markdown/Section.tsx index c902379..5ae4a10 100644 --- a/src/lib/Markdown/Section.tsx +++ b/src/lib/Markdown/Section.tsx @@ -11,27 +11,33 @@ const matchHeaderLevel = (line: string, level: number): boolean => { return line.match(`^#{${level}} .*$`) !== null; } -const Section: React.FC = ({ rawLines, level = 0 }) => { - const sectionName = rawLines.splice(0, 1)[0].slice(level).trim(); - const contentSize = rawLines.findIndex(line => matchHeaderLevel(line, level + 1)); - const rawContent = rawLines.splice(0, (contentSize < 0) ? rawLines.length : contentSize); - +const ChildrenSections: React.FC = ({ rawLines, level = 1 }) => { const childrenSectionLines = rawLines.reduce((sections: string[][], line: string) => { - if (matchHeaderLevel(line, level + 1)) sections.push([]); + if (matchHeaderLevel(line, level)) sections.push([]); if (sections.length) sections[sections.length - 1].push(line); return sections; }, []); - const children = childrenSectionLines.map(sectionLines =>
) + const children = childrenSectionLines.map(sectionLines =>
); + return <> {children} ; +} + +const Section: React.FC = ({ rawLines, level = 0 }) => { + if (!level) { + const beforeMarkdown = rawLines.splice(0, rawLines.findIndex(line => line.match(/^#.+$/g))); + console.log(`This content was found in original .md file but will not be shown: ${beforeMarkdown.join()}`); + while(rawLines[0][level + 1] === '#') level++; + return ; + } + + const sectionName = rawLines.splice(0, 1)[0].slice(level).trim(); + const contentSize = rawLines.findIndex(line => matchHeaderLevel(line, level + 1)); + const rawContent = rawLines.splice(0, (contentSize < 0) ? rawLines.length : contentSize); - return level ? ( - + return ( + - {children} + - ) : ( - <> - {children} - ); } -- cgit v1.2.3 From bc8e9919925d9d7ee640e8091aebe9596f9e89eb Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 5 Apr 2020 11:06:56 +0300 Subject: refactor: refine Section component --- src/lib/Markdown/Section.tsx | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) (limited to 'src/lib/Markdown/Section.tsx') diff --git a/src/lib/Markdown/Section.tsx b/src/lib/Markdown/Section.tsx index 5ae4a10..5ce8954 100644 --- a/src/lib/Markdown/Section.tsx +++ b/src/lib/Markdown/Section.tsx @@ -7,14 +7,19 @@ interface PropTypes extends ParserPropTypes { level?: number; } -const matchHeaderLevel = (line: string, level: number): boolean => { - return line.match(`^#{${level}} .*$`) !== null; +const getHeaderLevel = (header: string): number => { + if (!header) return 0; + let level = 0; + while(header[level] === '#') level++; + return level; } -const ChildrenSections: React.FC = ({ rawLines, level = 1 }) => { +const ChildrenSections: React.FC = ({ rawLines, level = 0 }) => { const childrenSectionLines = rawLines.reduce((sections: string[][], line: string) => { - if (matchHeaderLevel(line, level)) sections.push([]); - if (sections.length) sections[sections.length - 1].push(line); + if (line) { + if (getHeaderLevel(line) === level) sections.push([]); + if (sections.length) sections[sections.length - 1].push(line); + } return sections; }, []); const children = childrenSectionLines.map(sectionLines =>
); @@ -22,21 +27,17 @@ const ChildrenSections: React.FC = ({ rawLines, level = 1 }) => { } const Section: React.FC = ({ rawLines, level = 0 }) => { - if (!level) { - const beforeMarkdown = rawLines.splice(0, rawLines.findIndex(line => line.match(/^#.+$/g))); - console.log(`This content was found in original .md file but will not be shown: ${beforeMarkdown.join()}`); - while(rawLines[0][level + 1] === '#') level++; - return ; - } + const deeperLevelIndex = rawLines.findIndex(line => line.match(`^#{${level + 1},} .*$`)); + const rawContent = rawLines.splice(0, (deeperLevelIndex < 0) ? rawLines.length : deeperLevelIndex); - const sectionName = rawLines.splice(0, 1)[0].slice(level).trim(); - const contentSize = rawLines.findIndex(line => matchHeaderLevel(line, level + 1)); - const rawContent = rawLines.splice(0, (contentSize < 0) ? rawLines.length : contentSize); + if (!level) return ; + const sectionName = rawContent.splice(0, 1)[0].slice(level).trim(); + const deeperLevel = getHeaderLevel(rawLines[0]); return ( - + ); } -- cgit v1.2.3