Merge pull request #517 from GetStream/display-message-as-html

feat: add option to display message as HTML

Author: szuperaz

docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx

@@ -4,6 +4,8 @@ The `ChannelPreview` component displays a channel preview in the channel list, i
 
 The channel list uses the `ChannelPreview` component to display channels, if you want to replace that with your own custom component you can use the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx/#channelpreviewtemplate).
 
+The [`MessageService`](../services/MessageService.mdx) has additional customization options.
+
 :::note
 
 If you want to build your own `ChannelPreview` component, you might find the following building blocks useful:

docusaurus/docs/Angular/components/MessageComponent.mdx

@@ -22,6 +22,8 @@ The message list uses the `Message` component to display messages, if you want t
 
 The `Message` component uses the [`DateParserService`](../services/DateParserService.mdx) to create user-friendly dates, you can override the date-parsing methods with your own functions.
 
+The [`MessageService`](../services/MessageService.mdx) has additional customization options.
+
 :::note
 
 If you want to build your own `Message` component, you might find the following building blocks useful:

projects/sample-app/src/app/app.component.ts

@@ -14,6 +14,7 @@ import {
   CustomTemplatesService,
   ThemeService,
   AvatarContext,
+  MessageService,
 } from 'stream-chat-angular';
 import { environment } from '../environments/environment';
 
@@ -37,8 +38,10 @@ export class AppComponent implements AfterViewInit {
     private channelService: ChannelService,
     private streamI18nService: StreamI18nService,
     private customTemplateService: CustomTemplatesService,
-    themeService: ThemeService
+    themeService: ThemeService,
+    messageService: MessageService
   ) {
+    messageService.displayAs = 'html';
     void this.chatService.init(
       environment.apiKey,
       environment.userId,

projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.html

@@ -37,7 +37,15 @@
       data-testid="latest-message"
       class="str-chat__channel-preview-messenger--last-message"
     >
-      {{ latestMessage | translate }}
+      <ng-container *ngIf="displayAs === 'text'; else asHTML">
+        {{ latestMessage | translate }}
+      </ng-container>
+      <ng-template #asHTML>
+        <span
+          data-testid="html-content"
+          [innerHTML]="latestMessage | translate"
+        ></span>
+      </ng-template>
     </div>
   </div>
 </button>

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

@@ -328,4 +328,21 @@ describe('ChannelPreviewComponent', () => {
 
     expect(queryLatestMessage()?.textContent).toContain('Hogy vagy?');
   });
+
+  it('should respect #displayAs setting', () => {
+    const channel = generateMockChannels()[0];
+    component.channel = channel;
+    fixture.detectChanges();
+
+    expect(nativeElement.querySelector('[data-testid="html-content"]')).toBe(
+      null
+    );
+
+    component.displayAs = 'html';
+    fixture.detectChanges();
+
+    expect(
+      nativeElement.querySelector('[data-testid="html-content"]')
+    ).not.toBe(null);
+  });
 });

projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts

@@ -11,6 +11,7 @@ import { getChannelDisplayText } from '../get-channel-display-text';
 import { DefaultStreamChatGenerics } from '../types';
 import { ChatClientService } from '../chat-client.service';
 import { getMessageTranslation } from '../get-message-translation';
+import { MessageService } from '../message.service';
 
 /**
  * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
@@ -29,14 +30,18 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
   isUnread = false;
   unreadCount: number | undefined;
   latestMessage: string = 'streamChat.Nothing yet...';
+  displayAs: 'text' | 'html';
   private subscriptions: (Subscription | { unsubscribe: () => void })[] = [];
   private canSendReadEvents = true;
 
   constructor(
     private channelService: ChannelService,
     private ngZone: NgZone,
-    private chatClientService: ChatClientService
-  ) {}
+    private chatClientService: ChatClientService,
+    messageService: MessageService
+  ) {
+    this.displayAs = messageService.displayAs;
+  }
 
   ngOnInit(): void {
     this.subscriptions.push(

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  let service: MessageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MessageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * The message service contains configuration options related to displaying the message content
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class MessageService {
+  /**
+   * Decides if the message content should be formatted as text or HTML
+   */
+  displayAs: 'text' | 'html' = 'text';
+
+  constructor() {}
+}

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

@@ -261,7 +261,15 @@
                     </ng-container>
                   </ng-container>
                   <ng-template #defaultContent>
-                    {{ messageText || "" }}
+                    <ng-container *ngIf="displayAs === 'text'; else asHTML">
+                      {{ messageText || "" }}
+                    </ng-container>
+                    <ng-template #asHTML
+                      ><span
+                        data-testid="html-content"
+                        [innerHTML]="messageText"
+                      ></span
+                    ></ng-template>
                   </ng-template>
                 </p>
               </div>

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

@@ -13,7 +13,7 @@ import { ChatClientService } from '../chat-client.service';
 import { IconComponent } from '../icon/icon.component';
 import { MessageActionsBoxComponent } from '../message-actions-box/message-actions-box.component';
 import { By } from '@angular/platform-browser';
-import { mockCurrentUser, mockMessage } from '../mocks';
+import { generateMockMessages, mockCurrentUser, mockMessage } from '../mocks';
 import { AttachmentListComponent } from '../attachment-list/attachment-list.component';
 import { MessageReactionsComponent } from '../message-reactions/message-reactions.component';
 import { TranslateModule } from '@ngx-translate/core';
@@ -1238,5 +1238,21 @@ describe('MessageComponent', () => {
 
       expect(queryTranslationNotice()).toBeNull();
     });
+
+    it('should respect #displayAs setting', () => {
+      component.message = generateMockMessages()[0];
+      fixture.detectChanges();
+
+      expect(nativeElement.querySelector('[data-testid="html-content"]')).toBe(
+        null
+      );
+
+      component.displayAs = 'html';
+      fixture.detectChanges();
+
+      expect(
+        nativeElement.querySelector('[data-testid="html-content"]')
+      ).not.toBe(null);
+    });
   });
 });