Merge pull request #158 from GetStream/custom-message-edit-input

szuperaz · web-flow · commit 19a50f06dd08 · 2021-12-09T11:42:18.000+01:00
feat: Add support for custom message input in MessageActionsBox #134
diff --git a/docusaurus/docs/Angular/components/message-actions.mdx b/docusaurus/docs/Angular/components/message-actions.mdx
@@ -47,10 +47,6 @@ export class CustomMessageComponent {
 }
 ```
 
-:::important
-Currently it is not possible to provide a custom component for message edit.
-:::
-
 :::important
 The `MessageActionBox` component doesn't check if the user has the necessary capabilities to perform a given aciton, it is done by the [`MessageList`](./message-list.mdx/#enabledmessageactions) component.
 :::
@@ -87,6 +83,14 @@ The list of actions that are enabled. To disable all actions, provide an empty a
 | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
 | [`MessageAction`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts)[] | []      |
 
+### messageInputTemplate
+
+The input used for message edit. By default, the [default message input component](./message-input.mdx) is used. To change the input for message edit, provide [your own custom template](./message-input.mdx/#customization).
+
+| Type        |
+| ----------- |
+| TemplateRef |
+
 ## Outputs
 
 ### isEditing
diff --git a/docusaurus/docs/Angular/components/message-input.mdx b/docusaurus/docs/Angular/components/message-input.mdx
@@ -18,11 +18,26 @@ If you want to create your own message input, here is how to use it:
 <stream-channel-list></stream-channel-list>
 <stream-channel>
   <stream-channel-header></stream-channel-header>
-  <stream-message-list></stream-message-list>
+  <stream-message-list
+    [messageInputTemplate]="customMessageInput"
+  ></stream-message-list>
   <custom-message-input></custom-message-input>
 </stream-channel>
+
+<ng-template
+  #customMessageInput
+  let-message="message"
+  let-messageUpdateHandler="messageUpdateHandler"
+>
+  <custom-message-input
+    [message]="message"
+    (messageUpdate)="messageUpdateHandler($event)"
+  ></custom-message-input>
+</ng-template>
 ```
 
+The default chat UI uses the message input in two different places: at the bottom of the channel to send new message, and in the message list to edit a message.
+
 :::note
 If you want to create your own message input, you can use the following building blocks:
 
@@ -51,10 +66,6 @@ You can use the [`Textarea`](./textarea.mdx) or the [`AutocompleteTextarea`](./a
 
 :::
 
-:::important
-Currently it is not possible to provide a custom component for message edit in the [`MessageActionsBox`](./message-actions.mdx) component. Please consider this limitation when creating your own custom message input.
-:::
-
 ## Inputs
 
 ### isFileUploadEnabled
diff --git a/docusaurus/docs/Angular/components/message-list.mdx b/docusaurus/docs/Angular/components/message-list.mdx
@@ -59,6 +59,14 @@ By default, the [default message component](./message.mdx) is used. To change th
 | ----------- |
 | TemplateRef |
 
+### messageInputTemplate
+
+The input used for message edit. By default, the [default message input component](./message-input.mdx) is used. To change the input for message edit, provide [your own custom template](./message-input.mdx/#customization).
+
+| Type        |
+| ----------- |
+| TemplateRef |
+
 ### areReactionsEnabled
 
 If true, the message reactions are displayed. Users can also react to messages if they have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
diff --git a/docusaurus/docs/Angular/components/message.mdx b/docusaurus/docs/Angular/components/message.mdx
@@ -149,3 +149,11 @@ If `true`, the message status (sending, sent, who read the message) is displayed
 | Type    |
 | ------- |
 | boolean |
+
+### messageInputTemplate
+
+The input used for message edit. By default, the [default message input component](./message-input.mdx) is used. To change the input for message edit, provide [your own custom template](./message-input.mdx/#customization).
+
+| Type        |
+| ----------- |
+| TemplateRef |
diff --git a/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.html b/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.html
@@ -71,10 +71,23 @@
   "
 >
   <div class="str-chat__edit-message-form" *ngIf="isEditModalOpen">
-    <stream-message-input
-      [message]="message"
-      (messageUpdate)="modalClosed()"
-    ></stream-message-input>
+    <ng-container *ngIf="messageInputTemplate; else defaultInput">
+      <ng-container
+        *ngTemplateOutlet="
+          messageInputTemplate;
+          context: {
+            message: message,
+            messageUpdateHandler: modalClosed
+          }
+        "
+      ></ng-container>
+    </ng-container>
+    <ng-template #defaultInput>
+      <stream-message-input
+        [message]="message"
+        (messageUpdate)="modalClosed()"
+      ></stream-message-input>
+    </ng-template>
     <stream-notification-list></stream-notification-list>
     <div class="str-chat__message-team-form-footer">
       <div></div>
diff --git a/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts b/projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.ts
@@ -5,6 +5,7 @@ import {
   OnChanges,
   Output,
   SimpleChanges,
+  TemplateRef,
   ViewChild,
 } from '@angular/core';
 import { ChannelService } from '../channel.service';
@@ -29,6 +30,7 @@ export type MessageActions =
   styles: [],
 })
 export class MessageActionsBoxComponent implements OnChanges {
+  @Input() messageInputTemplate: TemplateRef<any> | undefined;
   @Input() isOpen = false;
   @Input() isMine = false;
   @Input() message: StreamMessage | undefined;
@@ -136,10 +138,10 @@ export class MessageActionsBoxComponent implements OnChanges {
     this.messageInput?.messageSent();
   }
 
-  modalClosed() {
+  modalClosed = () => {
     this.isEditModalOpen = false;
     this.isEditing.emit(false);
-  }
+  };
 
   async deleteClicked() {
     try {
diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.html b/projects/stream-chat-angular/src/lib/message-list/message-list.component.html
@@ -26,7 +26,8 @@
                 lastSentMessageId: !!(
                   lastSentMessageId && message?.id === lastSentMessageId
                 ),
-                canReceiveReadEvents: canReceiveReadEvents
+                canReceiveReadEvents: canReceiveReadEvents,
+                messageInputTemplate: messageInputTemplate
               }
             "
           ></ng-container>
@@ -41,6 +42,7 @@
             "
             [enabledMessageActions]="enabledMessageActions"
             [canReceiveReadEvents]="canReceiveReadEvents"
+            [messageInputTemplate]="messageInputTemplate"
           ></stream-message>
         </ng-template>
       </li>
diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts
@@ -24,6 +24,7 @@ import { MessageActions } from '../message-actions-box/message-actions-box.compo
 })
 export class MessageListComponent implements AfterViewChecked, OnChanges {
   @Input() messageTemplate: TemplateRef<any> | undefined;
+  @Input() messageInputTemplate: TemplateRef<any> | undefined;
   @Input() areReactionsEnabled = true;
   /* eslint-disable-next-line @angular-eslint/no-input-rename */
   @Input('enabledMessageActions') enabledMessageActionsInput: MessageActions[] =
diff --git a/projects/stream-chat-angular/src/lib/message/message.component.html b/projects/stream-chat-angular/src/lib/message/message.component.html
@@ -66,6 +66,7 @@
               [message]="message"
               (displayedActionsCount)="visibleMessageActionsCount = $event"
               (isEditing)="isEditing = $event; isActionBoxOpen = !isEditing"
+              [messageInputTemplate]="messageInputTemplate"
             ></stream-message-actions-box>
             <stream-icon
               *ngIf="visibleMessageActionsCount > 0"
diff --git a/projects/stream-chat-angular/src/lib/message/message.component.ts b/projects/stream-chat-angular/src/lib/message/message.component.ts
@@ -1,4 +1,10 @@
-import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  Input,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
 import { UserResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
@@ -14,6 +20,7 @@ import { getReadByText } from './read-by-text';
   styles: [],
 })
 export class MessageComponent {
+  @Input() messageInputTemplate: TemplateRef<any> | undefined;
   @Input() message: StreamMessage | undefined;
   @Input() enabledMessageActions: MessageActions[] = [];
   @Input() areReactionsEnabled: boolean | undefined;

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,8 @@`
`26`	`26`	`lastSentMessageId: !!(`
`27`	`27`	`lastSentMessageId && message?.id === lastSentMessageId`
`28`	`28`	`),`
`29`		`- canReceiveReadEvents: canReceiveReadEvents`
	`29`	`+ canReceiveReadEvents: canReceiveReadEvents,`
	`30`	`+ messageInputTemplate: messageInputTemplate`
`30`	`31`	`}`
`31`	`32`	`"`
`32`	`33`	`></ng-container>`
`@@ -41,6 +42,7 @@`
`41`	`42`	`"`
`42`	`43`	`[enabledMessageActions]="enabledMessageActions"`
`43`	`44`	`[canReceiveReadEvents]="canReceiveReadEvents"`
	`45`	`+ [messageInputTemplate]="messageInputTemplate"`
`44`	`46`	`></stream-message>`
`45`	`47`	`</ng-template>`
`46`	`48`	`</li>`