Fix some missing emojis (#1128)

src/components/common/helpers/renderText.tsx

@@ -80,10 +80,6 @@ function escapeHtml(textParts: TextPart[]): TextPart[] {
 }
 
 function replaceEmojis(textParts: TextPart[], size: 'big' | 'small', type: 'jsx' | 'html'): TextPart[] {
-  if (IS_EMOJI_SUPPORTED) {
-    return textParts;
-  }
-
   return textParts.reduce((result, part) => {
     if (typeof part !== 'string') {
       return [...result, part];
@@ -101,18 +97,24 @@ function replaceEmojis(textParts: TextPart[], size: 'big' | 'small', type: 'jsx'
       );
       if (type === 'jsx') {
         emojiResult.push(
+          IS_EMOJI_SUPPORTED
+            ? <span className="font-emoji">{emoji}</span>
+            : (
               <img
                 className={className}
                 src={`./img-apple-${size === 'big' ? '160' : '64'}/${code}.png`}
                 alt={emoji}
-          />,
+              />
+            ),
         );
       }
       if (type === 'html') {
         emojiResult.push(
+          IS_EMOJI_SUPPORTED
+            ? emoji
             // For preventing extra spaces in html
             // eslint-disable-next-line max-len
-          `<img draggable="false" class="${className}" src="./img-apple-${size === 'big' ? '160' : '64'}/${code}.png" alt="${emoji}" />`,
+            : `<img draggable="false" class="${className}" src="./img-apple-${size === 'big' ? '160' : '64'}/${code}.png" alt="${emoji}" />`,
         );
       }
 

src/components/middle/composer/Composer.scss

@@ -257,6 +257,7 @@
     padding-bottom: calc(1rem - var(--border-width));
     overflow: hidden;
     line-height: 1.375rem;
+    font-family: Roboto, -apple-system, "Apple Color Emoji", "Helvetica Neue", sans-serif;
 
     &.overflown {
       overflow-y: auto;

src/components/middle/composer/Composer.tsx

@@ -18,7 +18,7 @@ import {
 } from '../../../api/types';
 
 import { EDITABLE_INPUT_ID, SCHEDULED_WHEN_ONLINE } from '../../../config';
-import { IS_EMOJI_SUPPORTED, IS_VOICE_RECORDING_SUPPORTED, IS_MOBILE_SCREEN } from '../../../util/environment';
+import { IS_VOICE_RECORDING_SUPPORTED, IS_MOBILE_SCREEN, IS_EMOJI_SUPPORTED } from '../../../util/environment';
 import {
   selectChat,
   selectIsChatWithBot,
@@ -317,7 +317,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
           insertHtmlInSelection(newHtml);
           messageInput.dispatchEvent(new Event('input', { bubbles: true }));
         }
-
         return;
       }
 

src/components/middle/composer/EmojiButton.tsx

@@ -21,7 +21,9 @@ const EmojiButton: FC<OwnProps> = ({ emoji, focus, onClick }) => {
       onClick={handleClick}
       title={`:${emoji.names[0]}:`}
     >
-      {IS_EMOJI_SUPPORTED ? emoji.native : <img src={`/img-apple-64/${emoji.image}.png`} alt="" loading="lazy" />}
+      {IS_EMOJI_SUPPORTED
+        ? <span className="font-emoji">{emoji.native}</span>
+        : <img src={`/img-apple-64/${emoji.image}.png`} alt="" loading="lazy" />}
     </div>
   );
 };

src/components/middle/composer/helpers/parseMessageInput.ts

@@ -59,6 +59,8 @@ function parseMarkdown(html: string) {
   if (!IS_EMOJI_SUPPORTED) {
     // Emojis
     parsedHtml = parsedHtml.replace(/<img[^>]+alt="([^"]+)"[^>]*>/gm, '$1');
+  } else {
+    parsedHtml = parsedHtml.replace(/<span\s+class="font-emoji">([^<]*)<\/span>/g, '$1');
   }
   // Strip redundant <span> tags
   parsedHtml = parsedHtml.replace(/<\/?span([^>]*)?>/g, '');

src/components/middle/message/helpers/calculateAuthorWidth.ts

@@ -3,7 +3,7 @@ let element: HTMLSpanElement | undefined;
 export default function calculateAuthorWidth(text: string) {
   if (!element) {
     element = document.createElement('span');
-    element.style.font = '400 12px Roboto, "Helvetica Neue", "Apple Color Emoji", sans-serif';
+    element.style.font = '400 12px Roboto, "Helvetica Neue", sans-serif';
     element.style.whiteSpace = 'nowrap';
     element.style.position = 'absolute';
     element.style.left = '-999px';

src/styles/index.scss

@@ -20,7 +20,7 @@ html, body {
   margin: 0;
   padding: 0;
   font-size: 16px;
-  font-family: Roboto, "Helvetica Neue", "Apple Color Emoji", sans-serif;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
   color: var(--color-text);
   overflow: hidden;
   @media (max-width: 600px) {
@@ -28,6 +28,11 @@ html, body {
   }
 }
 
+.font-emoji {
+  font-family: "Apple Color Emoji", sans-serif;
+  font-style: normal;
+}
+
 body.cursor-grabbing, body.cursor-grabbing * {
   cursor: grabbing !important;
 }