Merge pull request #1800 from lbryio/emoji

Emojis

package.json

@@ -71,6 +71,7 @@
     "redux-persist-transform-filter": "0.0.16",
     "redux-thunk": "^2.2.0",
     "remark": "^9.0.0",
+    "remark-emoji": "^2.0.1",
     "remark-react": "^4.0.3",
     "render-media": "^3.1.0",
     "reselect": "^3.0.0",

src/renderer/component/common/markdown-preview.jsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import remark from 'remark';
 import reactRenderer from 'remark-react';
+import remarkEmoji from 'remark-emoji';
 import ExternalLink from 'component/externalLink';
 import defaultSchema from 'hast-util-sanitize/lib/github.json';
 
@@ -16,7 +17,11 @@ type MarkdownProps = {
   promptLinks?: boolean,
 };
 
-const SimpleLink = ({ href, title, children }) => (<a href={href} title={title}>{children}</a>);
+const SimpleLink = ({ href, title, children }) => (
+  <a href={href} title={title}>
+    {children}
+  </a>
+);
 
 const MarkdownPreview = (props: MarkdownProps) => {
   const { content, externalLinks, promptLinks } = props;
@@ -30,6 +35,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
     <div className="markdown-preview">
       {
         remark()
+          .use(remarkEmoji)
           .use(reactRenderer, remarkOptions)
           .processSync(content).contents
       }

src/renderer/scss/component/_markdown-preview.scss

@@ -80,9 +80,31 @@
   }
 
   a {
-      font-size: 1em;
-      color: var(--btn-external-color);
+    font-size: 1em;
+    color: var(--btn-external-color);
+    display: inline-block;
+  }
+
+  /* Lists */
+  ul,
+  ol {
+    margin-bottom: 2em;
+  }
+
+  ul {
+    list-style: initial;
+  }
+
+  li {
+    margin-left: 2em;
+    p {
       display: inline-block;
+    }
+  }
+
+  ol > li,
+  ul > li {
+    list-style-position: outside;
   }
 }
 

yarn.lock

@@ -5446,6 +5446,10 @@ lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
 
+lodash.toarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -5952,6 +5956,12 @@ node-abi@^2.2.0:
   dependencies:
     semver "^5.4.1"
 
+node-emoji@^1.4.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.8.1.tgz#6eec6bfb07421e2148c75c6bba72421f8530a826"
+  dependencies:
+    lodash.toarray "^4.4.0"
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -7454,6 +7464,13 @@ relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
 
+remark-emoji@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.0.1.tgz#6de4be7acb05b8534b6bad679d56eab24fba5e06"
+  dependencies:
+    node-emoji "^1.4.1"
+    unist-util-visit "^1.1.0"
+
 remark-parse@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"