Merge pull request #678 from GetStream/fix-url-parsing-errors

fix: url parsing errors #612

Author: szuperaz

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

@@ -930,6 +930,28 @@ describe('MessageComponent', () => {
     expect(component.messageTextParts![0].content).toContain(
       '<a href="https://getstream.io/" target="_blank" rel="nofollow">https://getstream.io/</a>'
     );
+
+    component.message.text = 'This is a message with a link google.com';
+    component.ngOnChanges({ message: {} as SimpleChange });
+
+    expect(component.messageTextParts![0].content).toContain(
+      '<a href="https://google.com" target="_blank" rel="nofollow">google.com</a>'
+    );
+
+    component.message.text = 'This is a message with a link www.google.com';
+    component.ngOnChanges({ message: {} as SimpleChange });
+
+    expect(component.messageTextParts![0].content).toContain(
+      '<a href="https://www.google.com" target="_blank" rel="nofollow">www.google.com</a>'
+    );
+
+    component.message.text =
+      'This is a message with a link file:///C:/Users/YourName/Documents/example.txt';
+    component.ngOnChanges({ message: {} as SimpleChange });
+
+    expect(component.messageTextParts![0].content).toContain(
+      '<a href="file:///C:/Users/YourName/Documents/example.txt" target="_blank" rel="nofollow">file:///C:/Users/YourName/Documents/example.txt</a>'
+    );
   });
 
   it('should display reply count for parent messages', () => {

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

@@ -115,7 +115,7 @@ export class MessageComponent
   private isViewInited = false;
   private userId?: string;
   private readonly urlRegexp =
-    /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/gim;
+    /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.|(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})(?![^\s]*@[^\s]*)(?:[^\s()<>]+|\([\w\d]+\))*(?<!@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/gim;
   private emojiRegexp = new RegExp(emojiRegex(), 'g');
   @ViewChild('messageMenuTrigger')
   messageMenuTrigger!: NgxFloatUiLooseDirective;
@@ -579,11 +579,21 @@ export class MessageComponent
     if (this.displayAs === 'html') {
       return content;
     }
-    content = content.replace(this.urlRegexp, (match) =>
-      this.messageService.customLinkRenderer
-        ? this.messageService.customLinkRenderer(match)
-        : `<a href="${match}" target="_blank" rel="nofollow">${match}</a>`
-    );
+    content = content.replace(this.urlRegexp, (match) => {
+      if (this.messageService.customLinkRenderer) {
+        return this.messageService.customLinkRenderer(match);
+      } else {
+        let href = match;
+        if (
+          !href.startsWith('http') &&
+          !href.startsWith('ftp') &&
+          !href.startsWith('file')
+        ) {
+          href = `https://${match}`;
+        }
+        return `<a href="${href}" target="_blank" rel="nofollow">${match}</a>`;
+      }
+    });
 
     return content;
   }