Get rid of span for emojis (#1192)

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
+          <img
-            ? <span className="font-emoji">{emoji}</span>
+            className={className}
-            : (
+            src={`./img-apple-${size === 'big' ? '160' : '64'}/${code}.png`}
-              <img
+            alt={emoji}
-                className={className}
+          />,
-                src={`./img-apple-${size === 'big' ? '160' : '64'}/${code}.png`}
-                alt={emoji}
-              />
-            ),
         );
       }
       if (type === 'html') {
         emojiResult.push(
-          IS_EMOJI_SUPPORTED
+          // For preventing extra spaces in html
-            ? emoji
+          // eslint-disable-next-line max-len
-            // For preventing extra spaces in html
+          `<img draggable="false" class="${className}" src="./img-apple-${size === 'big' ? '160' : '64'}/${code}.png" alt="${emoji}" />`,
-            // eslint-disable-next-line max-len
-            : `<img draggable="false" class="${className}" src="./img-apple-${size === 'big' ? '160' : '64'}/${code}.png" alt="${emoji}" />`,
         );
       }
 

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
+      {IS_EMOJI_SUPPORTED ? emoji.native : <img src={`./img-apple-64/${emoji.image}.png`} alt="" loading="lazy" />}
-        ? <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,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, '');
 

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';

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;
 }