feat: Wrap links with a tag if message has text content

Author: szuperaz

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

@@ -652,7 +652,10 @@ describe('MessageComponent', () => {
   it('should display HTML content', () => {
     const htmlContent =
       '<a href="https://getstream.io/">https://getstream.io/</a>';
-    component.message = { ...component.message!, ...{ html: htmlContent } };
+    component.message = {
+      ...component.message!,
+      ...{ html: `<p>${htmlContent}</p>\n` },
+    };
     component.ngOnChanges({ message: {} as SimpleChange });
     fixture.detectChanges();
 
@@ -899,6 +902,25 @@ describe('MessageComponent', () => {
     (window as typeof window & { chrome: Object }).chrome = chrome;
   });
 
+  it('should replace URL links inside text content', () => {
+    component.message = {
+      html: '<p>This is a message with a link <a href="https://getstream.io/" rel="nofollow">https://getstream.io/</a></p>\n',
+      text: 'This is a message with a link https://getstream.io/',
+    } as any as StreamMessage;
+    component.ngOnChanges({ message: {} as SimpleChange });
+
+    expect(component.messageTextParts[0].content).toContain(
+      ' <a href="https://getstream.io/" rel="nofollow">https://getstream.io/</a>'
+    );
+
+    component.message.html = undefined;
+    component.ngOnChanges({ message: {} as SimpleChange });
+
+    expect(component.messageTextParts[0].content).toContain(
+      '<a href="https://getstream.io/" rel="nofollow">https://getstream.io/</a>'
+    );
+  });
+
   it('should display reply count for parent messages', () => {
     expect(queryReplyCountButton()).toBeNull();
 

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

@@ -295,18 +295,24 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
     if (!content) {
       this.messageTextParts = [];
     } else {
+      let isHTML = false;
       // Backend will wrap HTML content with <p></p>\n
       if (content.startsWith('<p>')) {
         content = content.replace('<p>', '');
+        isHTML = true;
       }
       if (content.endsWith('</p>\n')) {
         content = content.replace('</p>\n', '');
+        isHTML = true;
       }
       if (
         !this.message!.mentioned_users ||
         this.message!.mentioned_users.length === 0
       ) {
         content = this.fixEmojiDisplay(content);
+        if (!isHTML) {
+          content = this.wrapLinskWithAnchorTag(content);
+        }
         this.messageTextParts = [{ content, type: 'text' }];
       } else {
         this.messageTextParts = [];
@@ -315,6 +321,9 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
           const mention = `@${user.name || user.id}`;
           let precedingText = text.substring(0, text.indexOf(mention));
           precedingText = this.fixEmojiDisplay(precedingText);
+          if (!isHTML) {
+            precedingText = this.wrapLinskWithAnchorTag(precedingText);
+          }
           this.messageTextParts.push({
             content: precedingText,
             type: 'text',
@@ -328,6 +337,9 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
         });
         if (text) {
           text = this.fixEmojiDisplay(text);
+          if (!isHTML) {
+            text = this.wrapLinskWithAnchorTag(text);
+          }
           this.messageTextParts.push({ content: text, type: 'text' });
         }
       }
@@ -352,4 +364,15 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
 
     return content;
   }
+
+  private wrapLinskWithAnchorTag(content: string) {
+    const urlRegexp =
+      /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/gim;
+    content = content.replace(
+      urlRegexp,
+      (match) => `<a href="${match}" rel="nofollow">${match}</a>`
+    );
+
+    return content;
+  }
 }