diff options
Diffstat (limited to 'src/lib')
-rw-r--r-- | src/lib/Markdown/Content.tsx | 3 | ||||
-rw-r--r-- | src/lib/Markdown/SyntacticSpan.tsx (renamed from src/lib/Markdown/InlineSyntax.tsx) | 31 | ||||
-rw-r--r-- | src/lib/Markdown/Text.tsx | 11 |
3 files changed, 25 insertions, 20 deletions
diff --git a/src/lib/Markdown/Content.tsx b/src/lib/Markdown/Content.tsx index e27b63f..caac91c 100644 --- a/src/lib/Markdown/Content.tsx +++ b/src/lib/Markdown/Content.tsx @@ -2,7 +2,6 @@ import React from 'react'; import CodeBlock from './CodeBlock'; import Text from './Text'; -import InlineSyntax from './InlineSyntax'; import { ParserPropTypes } from './types'; @@ -44,7 +43,7 @@ const Content: React.FC<ParserPropTypes> = ({ rawLines }) => { const closeIndex = rawLines.findIndex(line => !denotesDottedList(line)); const dottedListLines = rawLines.splice(0, closeIndex).slice(0, closeIndex); dottedListLines.unshift(line); - buffer = <ul>{dottedListLines.map(li => <li><InlineSyntax line={li} /></li>)}</ul>; + buffer = <ul>{dottedListLines.map(li => <li><Text line={li.slice(2)} /></li>)}</ul>; } else if (denotesOpenHtml(line)) { const tag = denotesOpenHtml(line); const closeIndex = rawLines.findIndex(line => denotesClosingHtml(line, tag)); diff --git a/src/lib/Markdown/InlineSyntax.tsx b/src/lib/Markdown/SyntacticSpan.tsx index 53cdaf0..299bf87 100644 --- a/src/lib/Markdown/InlineSyntax.tsx +++ b/src/lib/Markdown/SyntacticSpan.tsx @@ -2,7 +2,10 @@ import React from 'react'; import { Link, makeStyles } from '@material-ui/core'; import { lib as emojiLib } from 'emojilib'; -import { InlineParserPropTypes } from './types'; + +interface PropTypes { + span: string; +} interface RegexPair { global: RegExp; @@ -54,40 +57,40 @@ const useStyles = makeStyles(theme => ({ }, })); -const InlineSyntax: React.FC<InlineParserPropTypes> = ({ line }) => { +const SyntacticSpan: React.FC<PropTypes> = ({ span }) => { const classes = useStyles(); - if (!line) return null; + if (!span) return null; - const matchConceal = regex.conceal.local.exec(line); + const matchConceal = regex.conceal.local.exec(span); if (matchConceal) { - if (line[0] === '!') return <img src={matchConceal[2]} alt={matchConceal[1]} className={classes.image} />; + if (span[0] === '!') return <img src={matchConceal[2]} alt={matchConceal[1]} className={classes.image} />; return <Link href={matchConceal[2]}>{matchConceal[1]}</Link>; } - const matchEmoji = line.match(regex.emoji.local); + const matchEmoji = span.match(regex.emoji.local); if (matchEmoji) { const emoji = emojiList.find(emoji => emoji.name === matchEmoji[1]); - return <span>{emoji ? emoji.char : line}</span>; + return <span>{emoji ? emoji.char : span}</span>; } - const matchCode = line.match(regex.code.local); + const matchCode = span.match(regex.code.local); if (matchCode) return <span className={classes.code}>{matchCode[1]}</span>; - const matchBold = line.match(regex.bold.local); + const matchBold = span.match(regex.bold.local); if (matchBold) return <b>{matchBold[1]}</b>; - const matchItalic = line.match(regex.italic.local); + const matchItalic = span.match(regex.italic.local); if (matchItalic) return <i>{matchItalic[1]}</i>; - const matchStrikeThrough = line.match(regex.strikeThrough.local); + const matchStrikeThrough = span.match(regex.strikeThrough.local); if (matchStrikeThrough) return <span style={{textDecoration: 'line-through' }}>{matchStrikeThrough[1]}</span>; - if (line.match(regex.rawLink.global)) return <Link href={line}>{line}</Link>; + if (span.match(regex.rawLink.global)) return <Link href={span}>{span}</Link>; - return <>{line}</>; + return <>{span}</>; } export { splitter }; -export default InlineSyntax; +export default SyntacticSpan; diff --git a/src/lib/Markdown/Text.tsx b/src/lib/Markdown/Text.tsx index b989476..e287dee 100644 --- a/src/lib/Markdown/Text.tsx +++ b/src/lib/Markdown/Text.tsx @@ -1,9 +1,12 @@ import React from 'react'; -import { InlineParserPropTypes } from './types'; -import InlineSyntax, { splitter } from './InlineSyntax'; +import SyntacticSpan, { splitter } from './SyntacticSpan'; -const Text: React.FC<InlineParserPropTypes> = ({ line }) => { - return <>{line.split(splitter).map(span => <InlineSyntax line={span} />)}</>; +interface PropTypes { + line: string; +} + +const Text: React.FC<PropTypes> = ({ line }) => { + return <>{line.split(splitter).map(span => <SyntacticSpan span={span} />)}</>; } export default Text; |