fix: Apply emoji fix for messages with mentions

Author: szuperaz

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

@@ -864,6 +864,41 @@ describe('MessageComponent', () => {
     expect(content).toContain('👨‍👩‍👧');
   });
 
+  it('should add class to emojis in Chrome', () => {
+    component.message = {
+      html: 'This message contains an emoji 🥑',
+    } as any as StreamMessage;
+    component.ngOnChanges({ message: {} as SimpleChange });
+
+    expect(component.messageTextParts[0].content).toContain(
+      'class="str-chat__emoji-display-fix"'
+    );
+
+    component.message = {
+      html: '@sara what do you think about 🥑s? ',
+      mentioned_users: [{ id: 'sara' }],
+    } as StreamMessage;
+    component.ngOnChanges({ message: {} as SimpleChange });
+
+    expect(component.messageTextParts[2].content).toContain(
+      'class="str-chat__emoji-display-fix"'
+    );
+
+    // Simulate a browser that isn't Google Chrome
+    const chrome = (window as typeof window & { chrome: Object }).chrome;
+    (window as typeof window & { chrome: Object | undefined }).chrome =
+      undefined;
+
+    component.ngOnChanges({ message: {} as SimpleChange });
+
+    expect(component.messageTextParts[0].content).not.toContain(
+      'class="str-chat__emoji-display-fix"'
+    );
+
+    // Revert changes to the window object
+    (window as typeof window & { chrome: Object }).chrome = chrome;
+  });
+
   it('should display reply count for parent messages', () => {
     expect(queryReplyCountButton()).toBeNull();
 

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

@@ -306,28 +306,15 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
         !this.message!.mentioned_users ||
         this.message!.mentioned_users.length === 0
       ) {
-        // 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 ${
-              isChrome ? 'class="str-chat__emoji-display-fix"' : ''
-            }>${match}</span>`
-        );
+        content = this.fixEmojiDisplay(content);
         this.messageTextParts = [{ content, type: 'text' }];
       } else {
         this.messageTextParts = [];
         let text = content;
         this.message!.mentioned_users.forEach((user) => {
           const mention = `@${user.name || user.id}`;
-          const precedingText = text.substring(0, text.indexOf(mention));
+          let precedingText = text.substring(0, text.indexOf(mention));
+          precedingText = this.fixEmojiDisplay(precedingText);
           this.messageTextParts.push({
             content: precedingText,
             type: 'text',
@@ -340,9 +327,29 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
           text = text.replace(precedingText + mention, '');
         });
         if (text) {
+          text = this.fixEmojiDisplay(text);
           this.messageTextParts.push({ content: text, type: 'text' });
         }
       }
     }
   }
+
+  private fixEmojiDisplay(content: string) {
+    // 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 ${
+          isChrome ? 'class="str-chat__emoji-display-fix"' : ''
+        }>${match}</span>`
+    );
+
+    return content;
+  }
 }