From fa71823e67d9e86662133d75ea132075b3fd38fb Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sat, 19 Jun 2021 18:58:02 +0300
Subject: [PATCH] Get rid of span for emojis (#1192)

---
 src/components/common/helpers/renderText.tsx  | 26 +++++++++----------
 .../middle/composer/EmojiButton.tsx           |  4 +--
 .../composer/helpers/parseMessageInput.ts     |  3 +--
 .../message/helpers/calculateAuthorWidth.ts   |  3 ++-
 src/styles/index.scss                         |  7 +----
 5 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/components/common/helpers/renderText.tsx b/src/components/common/helpers/renderText.tsx
index f52cf516e..98da3f83f 100644
--- a/src/components/common/helpers/renderText.tsx
+++ b/src/components/common/helpers/renderText.tsx
@@ -80,6 +80,10 @@ 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];
@@ -97,24 +101,18 @@ 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}
-              />
-            ),
+          <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}" />`,
+          // 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}" />`,
         );
       }
 
diff --git a/src/components/middle/composer/EmojiButton.tsx b/src/components/middle/composer/EmojiButton.tsx
index b089e710b..d6192a118 100644
--- a/src/components/middle/composer/EmojiButton.tsx
+++ b/src/components/middle/composer/EmojiButton.tsx
@@ -24,9 +24,7 @@ const EmojiButton: FC<OwnProps> = ({ emoji, focus, onClick }) => {
       onMouseDown={handleClick}
       title={`:${emoji.names[0]}:`}
     >
-      {IS_EMOJI_SUPPORTED
-        ? <span className="font-emoji">{emoji.native}</span>
-        : <img src={`./img-apple-64/${emoji.image}.png`} alt="" loading="lazy" />}
+      {IS_EMOJI_SUPPORTED ? emoji.native : <img src={`./img-apple-64/${emoji.image}.png`} alt="" loading="lazy" />}
     </div>
   );
 };
diff --git a/src/components/middle/composer/helpers/parseMessageInput.ts b/src/components/middle/composer/helpers/parseMessageInput.ts
index cb8754ac1..28c80dd25 100644
--- a/src/components/middle/composer/helpers/parseMessageInput.ts
+++ b/src/components/middle/composer/helpers/parseMessageInput.ts
@@ -59,9 +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, '');
 
diff --git a/src/components/middle/message/helpers/calculateAuthorWidth.ts b/src/components/middle/message/helpers/calculateAuthorWidth.ts
index 8283782c3..2a7b30547 100644
--- a/src/components/middle/message/helpers/calculateAuthorWidth.ts
+++ b/src/components/middle/message/helpers/calculateAuthorWidth.ts
@@ -3,7 +3,8 @@ 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';
+    // eslint-disable-next-line max-len
+    element.style.font = '400 12px "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif';
     element.style.whiteSpace = 'nowrap';
     element.style.position = 'absolute';
     element.style.left = '-999px';
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ef9a889dc..30b85170b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -20,7 +20,7 @@ html, body {
   margin: 0;
   padding: 0;
   font-size: 16px;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-family: "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif;
   color: var(--color-text);
   overflow: hidden;
   @media (max-width: 600px) {
@@ -28,11 +28,6 @@ html, body {
   }
 }
 
-.font-emoji {
-  font-family: "Apple Color Emoji", sans-serif;
-  font-style: normal;
-}
-
 body.cursor-grabbing, body.cursor-grabbing * {
   cursor: grabbing !important;
 }