Merge pull request #619 from GetStream/v5-edit-message-ui

V5 edit message UI

docusaurus/angular_versioned_docs/version-5/basics/upgrade-v4.mdx

@@ -9,6 +9,8 @@ import MessageMenuBefore from "../assets/message-menu-before.png";
 import MessageMenuAfterDesktop from "../assets/message-menu-after-desktop.png";
 import MessageMenuAfterMobile from "../assets/message-menu-after-mobile.png";
 import ImageShowcase from "@site/src/components/ImageShowcase";
+import MessageEditBefore from "../assets/message-edit-before.png";
+import MessageEditAfter from "../assets/message-edit-after.png";
 
 ## Highlights
 
@@ -116,6 +118,49 @@ With the new UI these component-level changes are introduced:
 - The [`MessageListComponent`](../../components/MessageListComponent) no longer supports the `messageOptionsTrigger` parameter as this was a workaround for mobile UX problems. On desktop devices the message menu will be triggered by hovering anywhere in the message area. On mobile devices the message menu will be triggered by a longpress insde the message bubble area.
 - The [`MessageReactionsComponent`](../../components/MessageReactionsComponent) was split into two components. The `MessageReactionsComponent` is only responsible for displaying the existing reactions, and with that the `isSelectorOpen` input and `isSelectorOpenChange` output was removed. The [`MessageReactionsSelector`](../../components/MessageReactionsSelectorComponent) is a new component, that's responsible for adding/removing message reactions.
 
+### New message edit UI
+
+The modal-based edit message UI is replaced with a more modern approach: the message will be edited inside the main/thread [message input](../../components/MessageInputComponent).
+
+<ImageShowcase
+  border
+  items={[
+    {
+      image: MessageEditBefore,
+      caption: "Message edit UI - before",
+      alt: "Message edit - before",
+    },
+    {
+      image: MessageEditAfter,
+      caption: "Message edit UI - after",
+      alt: "Message edit - after",
+    },
+  ]}
+/>
+
+These are the component-level changes related to this feature:
+
+- The `EditMessageForm` component has been removed
+- The `editMessageFormTemplate$` has been removed from the [`CustomTemplatesService`](../../services/CustomTemplatesService)
+
+If you don't want to have this UI, you can set the `watchForMessageToEdit` input to `false` on the `MessageInputComponent`:
+
+```html
+<stream-message-input [watchForMessageToEdit]="false"></stream-message-input>
+```
+
+The `stream-message-input` still has all inputs/outputs you need to create a custom message edit UI:
+
+```html
+<stream-message-input
+  [watchForMessageToEdit]="false"
+  [displaySendButton]="false"
+  [message]="messageToEdit"
+  [sendMessage$]="sendMessage$Input"
+  (messageUpdate)="messageUpdateHandler()"
+></stream-message-input>
+```
+
 ### Removed deprecated features
 
 #### `MessageListComponent`

docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx

@@ -122,7 +122,7 @@ The id of the message the attachments belong to
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
 
 ---
 
@@ -134,7 +134,7 @@ The parent id of the message the attachments belong to
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
 
 ---
 
@@ -146,7 +146,7 @@ The attachments to display
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
 
 ---
 
@@ -158,6 +158,6 @@ Emits the state of the image carousel window
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
 
 [//]: # "End of generated content"

docusaurus/angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx

@@ -47,7 +47,7 @@ A stream that emits the current file uploads and their states
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
 
 ---
 
@@ -59,7 +59,7 @@ An output to notify the parent component if the user tries to retry a failed upl
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
 
 ---
 
@@ -71,6 +71,6 @@ An output to notify the parent component if the user wants to delete a file
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
 
 [//]: # "End of generated content"

docusaurus/angular_versioned_docs/version-5/components/AutocompleteTextareaComponent.mdx

@@ -51,7 +51,7 @@ TextareaInterface.value
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
 
 ---
 
@@ -67,7 +67,7 @@ TextareaInterface.placeholder
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
 
 ---
 
@@ -83,7 +83,7 @@ TextareaInterface.areMentionsEnabled
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
 
 ---
 
@@ -99,7 +99,7 @@ TextareaInterface.inputMode
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
 
 ---
 
@@ -115,7 +115,7 @@ TextareaInterface.mentionScope
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
 
 ---
 
@@ -131,7 +131,7 @@ TextareaInterface.autoFocus
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
 
 ---
 
@@ -147,7 +147,7 @@ TextareaInterface.valueChange
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
 
 ---
 
@@ -163,7 +163,7 @@ TextareaInterface.send
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
 
 ---
 
@@ -179,6 +179,6 @@ TextareaInterface.userMentions
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
 
 [//]: # "End of generated content"

docusaurus/angular_versioned_docs/version-5/components/AvatarComponent.mdx

@@ -71,7 +71,7 @@ An optional name of the image, used for fallback image or image title (if `image
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35)
 
 ---
 
@@ -83,7 +83,7 @@ The URL of the image to be displayed. If the image can't be displayed the first
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39)
 
 ---
 
@@ -95,7 +95,7 @@ The location the avatar will be displayed in
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43)
 
 ---
 
@@ -107,7 +107,7 @@ The channel the avatar belongs to (if avatar of a channel is displayed)
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47)
 
 ---
 
@@ -119,7 +119,7 @@ The user the avatar belongs to (if avatar of a user is displayed)
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51)
 
 ---
 
@@ -131,7 +131,7 @@ The type of the avatar: channel if channel avatar is displayed, user if user ava
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55)
 
 ---
 
@@ -143,7 +143,7 @@ If a channel avatar is displayed, and if the channel has exactly two members a g
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59)
 
 ---
 
@@ -155,6 +155,6 @@ If channel/user image isn't provided the initials of the name of the channel/use
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/2deda0b9963b4adafbdf6de5c656bf241a3c3e23/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/9a9f62edabb6d55d2e7527b1e00254e743b9c1da/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63)
 
 [//]: # "End of generated content"