Add emoji rendering support via remark-gemoji

Sascha created 4 years ago

Change summary

webui/package-lock.json                | 26 +++++++++++++++++++++++---
webui/package.json                     |  1 +
webui/src/components/Content/index.tsx |  2 ++
webui/types/remark-gemoji/index.d.ts   |  6 ++++++
4 files changed, 32 insertions(+), 3 deletions(-)

Detailed changes

webui/package-lock.json

@@ -12325,6 +12325,11 @@
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
     },
+    "gemoji": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/gemoji/-/gemoji-6.1.0.tgz",
+      "integrity": "sha512-MOlX3doQ1fsfzxQX8Y+u6bC5Ssc1pBUBIPVyrS69EzKt+5LIZAOm0G5XGVNhwXFgkBF3r+Yk88ONyrFHo8iNFA=="
+    },
     "generic-names": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-2.0.1.tgz",
@@ -12572,7 +12577,8 @@
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
+      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
+      "optional": true
     },
     "gzip-size": {
       "version": "5.1.1",
@@ -16118,6 +16124,7 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.1.tgz",
       "integrity": "sha512-BvEXF+UmsnAfYfoapKM9nGxnP+Wn7P91YfXmrKnfcYCx6VBeoN5Ez5Ogck6I8Bi5k4RlpqRYaw75pAwzX9OphA==",
+      "optional": true,
       "requires": {
         "growly": "^1.3.0",
         "is-wsl": "^2.2.0",
@@ -16131,6 +16138,7 @@
           "version": "7.3.4",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
           "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "optional": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -16138,12 +16146,14 @@
         "uuid": {
           "version": "8.3.2",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "optional": true
         },
         "which": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
           "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "optional": true,
           "requires": {
             "isexe": "^2.0.0"
           }
@@ -19227,6 +19237,15 @@
         "fbjs": "^1.0.0"
       }
     },
+    "remark-gemoji": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/remark-gemoji/-/remark-gemoji-6.0.0.tgz",
+      "integrity": "sha512-LDW2h6QqNzAbAcOjscgfkJW9/8TGBasBe/ji+3mCxHlJdhF2IEXFSmm/3tdEPP1JJDZ4y+Ea+xlFQ4tOIU9WvA==",
+      "requires": {
+        "gemoji": "^6.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
     "remark-html": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/remark-html/-/remark-html-12.0.0.tgz",
@@ -20219,7 +20238,8 @@
     "shellwords": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
-      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
+      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
+      "optional": true
     },
     "side-channel": {
       "version": "1.0.3",

webui/package.json

@@ -22,6 +22,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.0-next.98",
+    "remark-gemoji": "^6.0.0",
     "remark-html": "^12.0.0",
     "remark-parse": "^8.0.3",
     "remark-react": "^7.0.1",

webui/src/components/Content/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import gemoji from 'remark-gemoji';
 import html from 'remark-html';
 import parse from 'remark-parse';
 import remark2react from 'remark-react';
@@ -12,6 +13,7 @@ type Props = { markdown: string };
 const Content: React.FC<Props> = ({ markdown }: Props) => {
   const content = unified()
     .use(parse)
+    .use(gemoji)
     .use(html)
     .use(remark2react, {
       remarkReactComponents: {

webui/types/remark-gemoji/index.d.ts

@@ -0,0 +1,6 @@
+declare module 'remark-gemoji' {
+  import { Plugin } from 'unified';
+
+  const plugin: Plugin;
+  export default plugin;
+}