diff options
author | eug-vs <eug-vs@keemail.me> | 2021-01-07 13:22:21 +0300 |
---|---|---|
committer | eug-vs <eug-vs@keemail.me> | 2021-01-07 15:17:43 +0300 |
commit | f5c21698a09d9214f57ce6dab2595f3d61e1ff11 (patch) | |
tree | 900b605f147a5a024377b42be16a6f677a10a387 /src/lib/Markdown/SyntacticSpan.tsx | |
parent | afa7e4abe02959798665949193d832907d97153a (diff) | |
download | react-benzin-f5c21698a09d9214f57ce6dab2595f3d61e1ff11.tar.gz |
feat!: use react-markdown
Diffstat (limited to 'src/lib/Markdown/SyntacticSpan.tsx')
-rw-r--r-- | src/lib/Markdown/SyntacticSpan.tsx | 96 |
1 files changed, 0 insertions, 96 deletions
diff --git a/src/lib/Markdown/SyntacticSpan.tsx b/src/lib/Markdown/SyntacticSpan.tsx deleted file mode 100644 index 11cc024..0000000 --- a/src/lib/Markdown/SyntacticSpan.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import { Link, makeStyles } from '@material-ui/core'; - -import { lib as emojiLib } from 'emojilib'; - -interface PropTypes { - span: string; -} - -interface RegexPair { - global: RegExp; - local: RegExp; -} - -interface Emoji { - name: string; - char: string; -} - -const enclosureRegex = (e: string): RegexPair => ({ - local: new RegExp(`${e}([^${e}]+)${e}`), - global: new RegExp(`(${e}[^${e}]+${e})`), -}); - -const regex: Record<string, RegexPair> = { - conceal: { - global: /(!?\[.+?\]\(.+?\))(?!])/g, - local: /!?\[(.*\]?.*)\]\((.+?)\)/, - }, - rawLink: { - // eslint-disable-next-line max-len - global: /((?:(?:[A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)(?:(?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/, - local: /&^/, - }, - emoji: enclosureRegex(':'), - bold: enclosureRegex('\\*\\*'), - italic: enclosureRegex('\\*'), - code: enclosureRegex('`'), - strikeThrough: enclosureRegex('~~'), -}; - -const splitter = new RegExp(Object.values(regex).map(pair => pair.global.source).join('|')); - -const emojiList: Emoji[] = []; -Object.keys(emojiLib).forEach(name => emojiList.push({ name, char: emojiLib[name].char })); - -const useStyles = makeStyles(theme => ({ - code: { - background: theme.palette.background.default, - borderRadius: theme.spacing(0.5), - padding: theme.spacing(0.5), - fontFamily: 'Monospace', - }, - image: { - maxWidth: '100%', - maxHeight: '100%', - }, -})); - -const SyntacticSpan: React.FC<PropTypes> = ({ span }) => { - const classes = useStyles(); - if (!span) return null; - - const matchConceal = regex.conceal.local.exec(span); - if (matchConceal) { - if (span[0] === '!') return <img src={matchConceal[2]} alt={matchConceal[1]} className={classes.image} />; - return <Link href={matchConceal[2]}><SyntacticSpan span={matchConceal[1]} /></Link>; - } - - const matchEmoji = span.match(regex.emoji.local); - if (matchEmoji) { - const emoji = emojiList.find(e => e.name === matchEmoji[1]); - return <span>{emoji ? emoji.char : span}</span>; - } - - const matchCode = span.match(regex.code.local); - if (matchCode) return <span className={classes.code}>{matchCode[1]}</span>; - - const matchBold = span.match(regex.bold.local); - if (matchBold) return <b>{matchBold[1]}</b>; - - const matchItalic = span.match(regex.italic.local); - if (matchItalic) return <i>{matchItalic[1]}</i>; - - const matchStrikeThrough = span.match(regex.strikeThrough.local); - if (matchStrikeThrough) return <span style={{ textDecoration: 'line-through' }}>{matchStrikeThrough[1]}</span>; - - if (span.match(regex.rawLink.global)) return <Link href={span}>{span}</Link>; - - return <>{span}</>; -}; - - -export { splitter }; -export default SyntacticSpan; - |