Merge pull request #559 from frozenfrank/open-links-in-new-tab

Open links in new tab

Author: szuperaz

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

@@ -922,7 +922,7 @@ describe('MessageComponent', () => {
     expect(component.messageTextParts).toEqual([
       {
         content:
-          '<a href="https://getstream.io/" rel="nofollow">https://getstream.io/</a> this is the link ',
+          '<a href="https://getstream.io/" target="_blank" rel="nofollow">https://getstream.io/</a> this is the link ',
         type: 'text',
       },
       { content: '@sara', type: 'mention', user: { id: 'sara' } },
@@ -989,14 +989,14 @@ describe('MessageComponent', () => {
     component.ngOnChanges({ message: {} as SimpleChange });
 
     expect(component.messageTextParts![0].content).toContain(
-      ' <a href="https://getstream.io/" rel="nofollow">https://getstream.io/</a>'
+      ' <a href="https://getstream.io/" target="_blank" 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>'
+      '<a href="https://getstream.io/" target="_blank" rel="nofollow">https://getstream.io/</a>'
     );
   });
 

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

@@ -426,7 +426,7 @@ export class MessageComponent
       this.message!.mentioned_users.length === 0
     ) {
       content = this.fixEmojiDisplay(content);
-      content = this.wrapLinskWithAnchorTag(content);
+      content = this.wrapLinksWithAnchorTag(content);
       this.messageTextParts = [{ content, type: 'text' }];
     } else {
       this.messageTextParts = [];
@@ -435,7 +435,7 @@ export class MessageComponent
         const mention = `@${user.name || user.id}`;
         const precedingText = text.substring(0, text.indexOf(mention));
         let formattedPrecedingText = this.fixEmojiDisplay(precedingText);
-        formattedPrecedingText = this.wrapLinskWithAnchorTag(
+        formattedPrecedingText = this.wrapLinksWithAnchorTag(
           formattedPrecedingText
         );
         this.messageTextParts!.push({
@@ -451,7 +451,7 @@ export class MessageComponent
       });
       if (text) {
         text = this.fixEmojiDisplay(text);
-        text = this.wrapLinskWithAnchorTag(text);
+        text = this.wrapLinksWithAnchorTag(text);
         this.messageTextParts.push({ content: text, type: 'text' });
       }
     }
@@ -490,13 +490,14 @@ export class MessageComponent
     return content;
   }
 
-  private wrapLinskWithAnchorTag(content: string) {
+  private wrapLinksWithAnchorTag(content: string) {
     if (this.displayAs === 'html') {
       return content;
     }
     content = content.replace(
       this.urlRegexp,
-      (match) => `<a href="${match}" rel="nofollow">${match}</a>`
+      (match) =>
+        `<a href="${match}" target="_blank" rel="nofollow">${match}</a>`
     );
 
     return content;