feat: allow to override EditMessageModal and thus its additionalMessageInputProps (#2853)

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -106,6 +106,7 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'CustomMessageActionsList'
   | 'DateSeparator'
   | 'EditMessageInput'
+  | 'EditMessageModal'
   | 'EmojiPicker'
   | 'emojiSearchIndex'
   | 'EmptyStateIndicator'
@@ -1207,6 +1208,7 @@ const ChannelInner = (
       CustomMessageActionsList: props.CustomMessageActionsList,
       DateSeparator: props.DateSeparator,
       EditMessageInput: props.EditMessageInput,
+      EditMessageModal: props.EditMessageModal,
       EmojiPicker: props.EmojiPicker,
       emojiSearchIndex: props.emojiSearchIndex,
       EmptyStateIndicator: props.EmptyStateIndicator,
@@ -1276,6 +1278,7 @@ const ChannelInner = (
       props.CustomMessageActionsList,
       props.DateSeparator,
       props.EditMessageInput,
+      props.EditMessageModal,
       props.EmojiPicker,
       props.emojiSearchIndex,
       props.EmptyStateIndicator,

src/components/Message/MessageSimple.tsx

@@ -26,7 +26,7 @@ import {
 
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { Attachment as DefaultAttachment } from '../Attachment';
-import { EditMessageModal } from '../MessageInput';
+import { EditMessageModal as DefaultEditMessageModal } from '../MessageInput';
 import { Poll } from '../Poll';
 import { ReactionsList as DefaultReactionList } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
@@ -69,6 +69,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
   const {
     Attachment = DefaultAttachment,
     Avatar = DefaultAvatar,
+    EditMessageModal = DefaultEditMessageModal,
     MessageOptions = DefaultMessageOptions,
     // TODO: remove this "passthrough" in the next
     // major release and use the new default instead

src/components/MessageInput/EditMessageForm.tsx

@@ -68,9 +68,14 @@ export const EditMessageForm = () => {
   );
 };
 
+export type EditMessageModalProps = Pick<
+  MessageUIComponentProps,
+  'additionalMessageInputProps'
+>;
+
 export const EditMessageModal = ({
   additionalMessageInputProps,
-}: Pick<MessageUIComponentProps, 'additionalMessageInputProps'>) => {
+}: EditMessageModalProps) => {
   const { EditMessageInput = EditMessageForm, Modal = DefaultModal } =
     useComponentContext();
   const { clearEditingState } = useMessageContext();

src/context/ComponentContext.tsx

@@ -10,6 +10,7 @@ import type {
   CooldownTimerProps,
   CustomMessageActionsListProps,
   DateSeparatorProps,
+  EditMessageModalProps,
   EmojiSearchIndex,
   EmptyStateIndicatorProps,
   EventComponentProps,
@@ -96,6 +97,8 @@ export type ComponentContextValue = {
   DateSeparator?: React.ComponentType<DateSeparatorProps>;
   /** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
   EditMessageInput?: React.ComponentType<MessageInputProps>;
+  /** Custom UI component to override default EditMessageModal, defaults to and accepts same props as: [EditMessageModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
+  EditMessageModal?: React.ComponentType<EditMessageModalProps>;
   /** Custom UI component for rendering button with emoji picker in MessageInput */
   EmojiPicker?: React.ComponentType;
   /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */