From eee96f01e29ddb8b95e9429c4e584fe6e7e7faec Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 8 Feb 2020 15:31:14 +0300 Subject: feat: implement initial markdown component --- src/lib/Markdown/Markdown.tsx | 57 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/lib/Markdown/Markdown.tsx (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx new file mode 100644 index 0000000..a3ffc38 --- /dev/null +++ b/src/lib/Markdown/Markdown.tsx @@ -0,0 +1,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 = ({ rawLines }) => { + const plainText = rawLines.join(); + return

{plainText}

; +} + +const Level: React.FC = ({ 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 => ) + + return level ? ( + + + {children} + + ) : ( + <> + {children} + + ); +} + +const Markdown: React.FC = ({ data }) => { + const rawLines = data.split('\n'); + return +}; + + +export default Markdown; + -- cgit v1.2.3 From a2877c2844825853b8913a07a40f814fc03ac999 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Apr 2020 03:30:16 +0300 Subject: feat: support Markdown by url --- src/lib/Markdown/Markdown.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index a3ffc38..944ac86 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -1,10 +1,12 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; import ContentSection from '../ContentSection/ContentSection'; interface PropTypes { - data: string; + data?: string; + url?: string; } interface RawLinesPropType { @@ -14,7 +16,7 @@ interface RawLinesPropType { const header = (level: number): string => { return `^#{${level}} .*$`; -}; +} const Content: React.FC = ({ rawLines }) => { const plainText = rawLines.join(); @@ -47,9 +49,10 @@ const Level: React.FC = ({ rawLines, level = 0 }) => { ); } -const Markdown: React.FC = ({ data }) => { - const rawLines = data.split('\n'); - return +const Markdown: React.FC = ({ data, url }) => { + const [markdown, setMarkdown] = useState(data || ''); + if (url) axios.get(url).then(response => setMarkdown(response.data)); + return }; -- cgit v1.2.3 From e491abb55723ab20a36ead83320e40627cca8e06 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Apr 2020 03:37:31 +0300 Subject: fix: correct linting errors :rotating_light: --- src/lib/Markdown/Markdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 944ac86..b3119f1 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import axios from 'axios'; import ContentSection from '../ContentSection/ContentSection'; @@ -30,7 +30,7 @@ const Level: React.FC = ({ rawLines, level = 0 }) => { const rawContent = (contentSize > 0) ? rawLines.slice(1, contentSize) : rawLines.slice(1); const rawChildren = rawLines.slice(contentSize); - const childrenLineGroups = rawChildren.reduce((acc: any[], cur: string) => { + 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; -- cgit v1.2.3 From badd3517cd11a68d70fa6ba7cdb1e5afaaf79310 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Apr 2020 03:49:26 +0300 Subject: feat: add linebreaks --- src/lib/Markdown/Markdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index b3119f1..332d08c 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -19,7 +19,7 @@ const header = (level: number): string => { } const Content: React.FC = ({ rawLines }) => { - const plainText = rawLines.join(); + const plainText = rawLines.map(line =>

{line}

); return

{plainText}

; } -- cgit v1.2.3 From 464b5fbef2f58cbcd134b7200c5f7c2f904202a0 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 4 Apr 2020 20:43:00 +0300 Subject: feat: parse CodeBlocks --- src/lib/Markdown/Markdown.tsx | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 332d08c..8d93437 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -18,9 +18,35 @@ const header = (level: number): string => { return `^#{${level}} .*$`; } +const CodeBlock: React.FC<{ rawLines: String[]}> = ({ rawLines }) => { + return ( +

+ {rawLines.map(line => <> {line}
)} +

+ ); +} + + const Content: React.FC = ({ rawLines }) => { - const plainText = rawLines.map(line =>

{line}

); - return

{plainText}

; + 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 ( + <> + + + + ) + } + return ( + <> +

{line}

+ + + ) } const Level: React.FC = ({ rawLines, level = 0 }) => { -- cgit v1.2.3 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/Markdown.tsx | 71 ++----------------------------------------- 1 file changed, 2 insertions(+), 69 deletions(-) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index 8d93437..aee96e9 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -1,84 +1,17 @@ import React, { useState } from 'react'; import axios from 'axios'; -import ContentSection from '../ContentSection/ContentSection'; - +import Section from './Section'; 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 ( -

- {rawLines.map(line => <> {line}
)} -

- ); -} - - -const Content: React.FC = ({ 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 ( - <> - - - - ) - } - return ( - <> -

{line}

- - - ) -} - -const Level: React.FC = ({ 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 => ) - - return level ? ( - - - {children} - - ) : ( - <> - {children} - - ); -} - const Markdown: React.FC = ({ data, url }) => { const [markdown, setMarkdown] = useState(data || ''); if (url) axios.get(url).then(response => setMarkdown(response.data)); - return + return
}; -- cgit v1.2.3 From 5abf2d02bd4d11097b2650861195cf605e42bbf7 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 5 Apr 2020 16:32:44 +0300 Subject: fix: update markdown on hook --- src/lib/Markdown/Markdown.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'src/lib/Markdown/Markdown.tsx') diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx index aee96e9..09ad54a 100644 --- a/src/lib/Markdown/Markdown.tsx +++ b/src/lib/Markdown/Markdown.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Section from './Section'; @@ -10,6 +10,11 @@ interface PropTypes { const Markdown: React.FC = ({ data, url }) => { const [markdown, setMarkdown] = useState(data || ''); + + useEffect(() => { + if (!url) setMarkdown(data || ''); + }, [data, url]); + if (url) axios.get(url).then(response => setMarkdown(response.data)); return
}; -- cgit v1.2.3