From 1a00cd504ff60f1749327ebc3896a4641d28670e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 5 Apr 2020 16:31:28 +0300
Subject: feat: install emojilib, beautify inline code
---
package-lock.json | 5 +++++
package.json | 1 +
src/lib/Markdown/CodeBlock.tsx | 1 +
src/lib/Markdown/InlineSyntax.tsx | 29 +++++++++++++++++++++--------
4 files changed, 28 insertions(+), 8 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 4bde2bb..0379211 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4792,6 +4792,11 @@
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true
},
+ "emojilib": {
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.4.0.tgz",
+ "integrity": "sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw=="
+ },
"emojis-list": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
diff --git a/package.json b/package.json
index d1d2e04..a4dc5bd 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"dependencies": {
"@material-ui/core": "^4.9.0",
"axios": "^0.19.2",
+ "emojilib": "^2.4.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-virtualized-auto-sizer": "^1.0.2",
diff --git a/src/lib/Markdown/CodeBlock.tsx b/src/lib/Markdown/CodeBlock.tsx
index cbb3078..c4478eb 100644
--- a/src/lib/Markdown/CodeBlock.tsx
+++ b/src/lib/Markdown/CodeBlock.tsx
@@ -9,6 +9,7 @@ const useStyles = makeStyles(theme => ({
background: theme.palette.background.default,
padding: theme.spacing(2),
overflowX: 'auto',
+ fontFamily: 'Monospace',
},
}));
diff --git a/src/lib/Markdown/InlineSyntax.tsx b/src/lib/Markdown/InlineSyntax.tsx
index bf5669d..48c0374 100644
--- a/src/lib/Markdown/InlineSyntax.tsx
+++ b/src/lib/Markdown/InlineSyntax.tsx
@@ -1,7 +1,8 @@
import React from 'react';
-import { Link } from '@material-ui/core';
-import axios from 'axios';
+import { Link, makeStyles } from '@material-ui/core';
+// @ts-ignore-next-line;
+import { lib as emojiLib } from 'emojilib';
import { InlineParserPropTypes } from './types';
interface RegexPair {
@@ -38,17 +39,29 @@ const regex: Record<string, RegexPair> = {
const splitter = new RegExp(Object.values(regex).map(pair => pair.global.source).join('|'));
const emojiList: Emoji[] = [];
-axios.get('https://unpkg.com/emojilib@2.4.0/emojis.json').then(response => {
- Object.keys(response.data).forEach(name => emojiList.push({ name, char: response.data[name].char }));
-});
-
+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 InlineSyntax: React.FC<InlineParserPropTypes> = ({ line }) => {
+ const classes = useStyles();
if (!line) return null;
const matchConceal = regex.conceal.local.exec(line);
if (matchConceal) {
- if (line[0] === '!') return <img src={matchConceal[2]} alt={matchConceal[1]} style={{ maxWidth: '100%', maxHeight: '100%' }} />;
+ if (line[0] === '!') return <img src={matchConceal[2]} alt={matchConceal[1]} className={classes.image} />;
return <Link href={matchConceal[2]}>{matchConceal[1]}</Link>;
}
@@ -59,7 +72,7 @@ const InlineSyntax: React.FC<InlineParserPropTypes> = ({ line }) => {
}
const matchCode = line.match(regex.code.local);
- if (matchCode) return <span style={{ background: 'rgba(255, 255, 255, .1)' }}>{matchCode[1]}</span>;
+ if (matchCode) return <span className={classes.code}>{matchCode[1]}</span>;
const matchBold = line.match(regex.bold.local);
if (matchBold) return <b>{matchBold[1]}</b>;
--
cgit v1.2.3