From 9c072fc4cd347558302f2e4ec3fae205156e2494 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Tue, 7 Oct 2025 16:58:22 +0200
Subject: [PATCH] feat: allow to override EditMessageModal and thus its
 additionalMessageInputProps

---
 src/components/Channel/Channel.tsx              | 3 +++
 src/components/Message/MessageSimple.tsx        | 3 ++-
 src/components/MessageInput/EditMessageForm.tsx | 7 ++++++-
 src/context/ComponentContext.tsx                | 3 +++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
index e11f46016..296976705 100644
--- a/src/components/Channel/Channel.tsx
+++ b/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,
diff --git a/src/components/Message/MessageSimple.tsx b/src/components/Message/MessageSimple.tsx
index e2c1e95e3..9bf01d166 100644
--- a/src/components/Message/MessageSimple.tsx
+++ b/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
diff --git a/src/components/MessageInput/EditMessageForm.tsx b/src/components/MessageInput/EditMessageForm.tsx
index c80ebd7e8..215b154d4 100644
--- a/src/components/MessageInput/EditMessageForm.tsx
+++ b/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();
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index af8657f20..c056c40ad 100644
--- a/src/context/ComponentContext.tsx
+++ b/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) */