Add Emoji support (#374)

* add remark-emoji

* update remark-emoji & enable emoticon support

package-lock.json

@@ -2934,7 +2934,7 @@
         },
         "util": {
           "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
           "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
           "dev": true,
           "requires": {
@@ -5434,6 +5434,11 @@
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
     },
+    "emoticon": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/emoticon/-/emoticon-3.2.0.tgz",
+      "integrity": "sha512-SNujglcLTTg+lDAcApPNgEdudaqQFiAbJCqzjNxJkvN9vAwCGi0uu8IUVvx+f16h+V44KCY6Y2yboroc9pilHg=="
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -9713,6 +9718,11 @@
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
       "dev": true
     },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
+    },
     "loglevel": {
       "version": "1.6.7",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.7.tgz",
@@ -10518,6 +10528,14 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node-fetch": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.4.1.tgz",
@@ -12635,6 +12653,33 @@
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
       "dev": true
     },
+    "remark-emoji": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-2.1.0.tgz",
+      "integrity": "sha512-lDddGsxXURV01WS9WAiS9rO/cedO1pvr9tahtLhr6qCGFhHG4yZSJW3Ha4Nw9Uk1hLNmUBtPC0+m45Ms+xEitg==",
+      "requires": {
+        "emoticon": "^3.2.0",
+        "node-emoji": "^1.10.0",
+        "unist-util-visit": "^2.0.2"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.2.tgz",
+          "integrity": "sha512-Ofx8uf6haexJwI1gxWMGg6I/dLnF2yE+KibhD3/diOqY2TinLcqHXCV6OI5gFVn3xQqDH+u0M625pfKwIwgBKQ=="
+        },
+        "unist-util-visit": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.2.tgz",
+          "integrity": "sha512-HoHNhGnKj6y+Sq+7ASo2zpVdfdRifhTgX2KTU3B/sO/TTlZchp7E3S4vjRzDJ7L60KmrCPsQkVK3lEF3cz36XQ==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0",
+            "unist-util-visit-parents": "^3.0.0"
+          }
+        }
+      }
+    },
     "remark-math": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-2.0.0.tgz",

package.json

@@ -151,6 +151,7 @@
     "rehype-react": "^4.0.1",
     "rehype-sanitize": "^3.0.0",
     "rehype-stringify": "^6.0.1",
+    "remark-emoji": "^2.1.0",
     "remark-math": "^2.0.0",
     "remark-parse": "^7.0.1",
     "remark-rehype": "^5.0.0",

src/components/atoms/MarkdownPreviewer.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react'
 import unified, { Plugin } from 'unified'
+import remarkEmoji from 'remark-emoji'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
 import remarkMath from 'remark-math'
@@ -191,6 +192,7 @@ const MarkdownPreviewer = ({
       .use(rehypeRaw)
       .use(rehypeSanitize, schema)
       .use(rehypeKatex)
+      .use(remarkEmoji, { emoticon: true })
       .use(rehypeReact, {
         createElement: React.createElement,
         components: {

typings/unified.d.ts

@@ -1,3 +1,4 @@
+declare module 'remark-emoji'
 declare module 'remark-rehype'
 declare module 'remark-stringify'
 declare module 'remark-math'