Merge pull request #562 from GetStream/custom-link-render

feat: custom markup for links in messages

Author: szuperaz

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

@@ -9,8 +9,20 @@ import { Injectable } from '@angular/core';
 export class MessageService {
   /**
    * Decides if the message content should be formatted as text or HTML
+   *
+   * If you display messages as text the following parts are still be displayed as HTML:
+   * - user mentions -> you can customize this with your own template using the [`customTemplatesService.mentionTemplate$`](https://getstream.io/chat/docs/sdk/angular/services/CustomTemplatesService/#mentiontemplate)
+   * - links -> you can customize this by providing you own [`customLinkRenderer`](#customlinkrenderer) method
    */
   displayAs: 'text' | 'html' = 'text';
 
+  /**
+   * You can provide a custom method to display links
+   *
+   * @param url the url the link should refer to
+   * @returns the HTML markup as a string for the link
+   */
+  customLinkRenderer?: (url: string) => string;
+
   constructor() {}
 }

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

@@ -23,6 +23,7 @@ import { AvatarPlaceholderComponent } from '../avatar-placeholder/avatar-placeho
 import { ThemeService } from '../theme.service';
 import { BehaviorSubject, of } from 'rxjs';
 import { MessageActionsService } from '../message-actions.service';
+import { MessageService } from '../message.service';
 
 describe('MessageComponent', () => {
   let component: MessageComponent;
@@ -1331,4 +1332,19 @@ describe('MessageComponent', () => {
       ).not.toBe(null);
     });
   });
+
+  it('should replace URL links inside text content - custom link renderer', () => {
+    const service = TestBed.inject(MessageService);
+    service.customLinkRenderer = (url) =>
+      `<a href="${url}" class="my-special-class">${url}</a>`;
+    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/" class="my-special-class">https://getstream.io/</a>'
+    );
+  });
 });

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

@@ -494,10 +494,10 @@ export class MessageComponent
     if (this.displayAs === 'html') {
       return content;
     }
-    content = content.replace(
-      this.urlRegexp,
-      (match) =>
-        `<a href="${match}" target="_blank" rel="nofollow">${match}</a>`
+    content = content.replace(this.urlRegexp, (match) =>
+      this.messageService.customLinkRenderer
+        ? this.messageService.customLinkRenderer(match)
+        : `<a href="${match}" target="_blank" rel="nofollow">${match}</a>`
     );
 
     return content;