Merge pull request #244 from GetStream/safari-skin-toned-emoji-fix

fix: Skin toned emoji display for Safari

Author: szuperaz

projects/stream-chat-angular/src/lib/message/message.component.spec.ts

@@ -858,13 +858,10 @@ describe('MessageComponent', () => {
     } as any as StreamMessage;
     component.ngOnChanges({ message: {} as any as SimpleChange });
 
-    expect(component.messageTextParts).toEqual([
-      {
-        content:
-          'This is a message with lots of emojis: <span class="str-chat__emoji-display-fix">😂</span><span class="str-chat__emoji-display-fix">😜</span><span class="str-chat__emoji-display-fix">😂</span><span class="str-chat__emoji-display-fix">😂</span>, there are compound emojis as well <span class="str-chat__emoji-display-fix">👨‍👩‍👧</span>',
-        type: 'text',
-      },
-    ]);
+    const content = component.messageTextParts[0].content;
+    expect(content).toContain('😂');
+    expect(content).toContain('😜');
+    expect(content).toContain('👨‍👩‍👧');
   });
 
   it('should display reply count for parent messages', () => {

projects/stream-chat-angular/src/lib/message/message.component.ts

@@ -218,9 +218,18 @@ export class MessageComponent implements OnChanges {
       ) {
         // Wrap emojis in span to display emojis correctly in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=596223
         const regex = new RegExp(emojiRegex(), 'g');
+        // Based on this: https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome
+        /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+        const isChrome =
+          !!(window as any).chrome &&
+          typeof (window as any).opr === 'undefined';
+        /* eslint-enable @typescript-eslint/no-unsafe-member-access */
         content = content.replace(
           regex,
-          (match) => `<span class="str-chat__emoji-display-fix">${match}</span>`
+          (match) =>
+            `<span ${
+              isChrome ? 'class="str-chat__emoji-display-fix"' : ''
+            }>${match}</span>`
         );
         this.messageTextParts = [{ content, type: 'text' }];
       } else {