From 0286a51525e8d8afe0d78770d2f89e4acd5cdbd5 Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Mon, 9 Aug 2021 14:43:43 +0530
Subject: [PATCH] added twemoji in emoji autofill

---
 src/app/organisms/channel/ChannelViewCmdBar.jsx  | 14 +++++++++++++-
 src/app/organisms/channel/ChannelViewCmdBar.scss |  7 ++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app/organisms/channel/ChannelViewCmdBar.jsx b/src/app/organisms/channel/ChannelViewCmdBar.jsx
index 6229b376..8dbf8024 100644
--- 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 43450fe4..29d3ae9e 100644
--- 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;