added twemoji in emoji autofill

diff --git a/src/app/organisms/channel/ChannelViewCmdBar.jsx b/src/app/organisms/channel/ChannelViewCmdBar.jsx
index 6229b376fb5666add69b1f28ca2d236d2712ba60..8dbf8024a625b30cc9a7c76a134c9850de2b56a2 100644 (file)
--- a/src/app/organisms/channel/ChannelViewCmdBar.jsx
+++ b/src/app/organisms/channel/ChannelViewCmdBar.jsx
@@ -3,6 +3,8 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './ChannelViewCmdBar.scss';
 import Fuse from 'fuse.js';
+import parse from 'html-react-parser';
+import twemoji from 'twemoji';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -290,7 +292,17 @@ function getCmdSuggestions({ prefix, slug }, fireCmd, viewEvent) {
           result: finding.item,
         })}
       >
-        <Text variant="b2">{finding.item.unicode}</Text>
+        {
+          parse(twemoji.parse(
+            finding.item.unicode,
+            {
+              attributes: () => ({
+                unicode: finding.item.unicode,
+                shortcodes: finding.item.shortcodes?.toString(),
+              }),
+            },
+          ))
+        }
       </CmdItem>
     ));
   }

diff --git a/src/app/organisms/channel/ChannelViewCmdBar.scss b/src/app/organisms/channel/ChannelViewCmdBar.scss
index 43450fe40f6b84d88fec301e2c99b599a01c2b13..29d3ae9ec352627fc74e0152a1478394f4ead240 100644 (file)
--- a/src/app/organisms/channel/ChannelViewCmdBar.scss
+++ b/src/app/organisms/channel/ChannelViewCmdBar.scss
@@ -122,11 +122,16 @@
     margin-left: var(--sp-extra-tight);
   }
 
+  & .emoji {
+    width: 20px;
+    height: 20px;
+  }
+
   &:hover {
     background-color: var(--bg-caution-hover);
   }
   &:focus {
-    background-color: var(--bg-caution-hover);
+    background-color: var(--bg-caution-active);
     box-shadow: var(--cmd-item-bar);
     border-bottom: 2px solid transparent;
     outline: none;