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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
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: {
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 }));
console.log({emojiList})
const useStyles = makeStyles(theme => ({
code: {
background: theme.palette.background.default,
borderRadius: theme.spacing(.5),
padding: theme.spacing(.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]}>{matchConceal[1]}</Link>;
}
const matchEmoji = span.match(regex.emoji.local);
if (matchEmoji) {
const emoji = emojiList.find(emoji => emoji.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;
|
