feat: install emojilib, beautify inline code

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>;