From 358c8b53bc3209de890bb03a0649d0fc15cfb314 Mon Sep 17 00:00:00 2001
From: MartinCupela <martin.cupela@gmail.com>
Date: Sun, 31 Jul 2022 13:23:56 +0200
Subject: [PATCH 1/3] feat: allow to send custom message data when updating a
 message

---
 src/components/MessageInput/hooks/useSubmitHandler.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MessageInput/hooks/useSubmitHandler.ts b/src/components/MessageInput/hooks/useSubmitHandler.ts
index f58a2a1754..71913332ba 100644
--- a/src/components/MessageInput/hooks/useSubmitHandler.ts
+++ b/src/components/MessageInput/hooks/useSubmitHandler.ts
@@ -152,6 +152,7 @@ export const useSubmitHandler = <
         await editMessage(({
           ...message,
           ...updatedMessage,
+          ...customMessageData,
         } as unknown) as UpdatedMessage<StreamChatGenerics>);
 
         clearEditingState?.();

From 4c53ddcd6a606a0aad95eeab19063edf78718955 Mon Sep 17 00:00:00 2001
From: MartinCupela <martin.cupela@gmail.com>
Date: Sun, 31 Jul 2022 13:27:54 +0200
Subject: [PATCH 2/3] test: verify that custom message data is sent with new &
 updated messages

---
 .../__tests__/MessageInput.test.js            | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/components/MessageInput/__tests__/MessageInput.test.js b/src/components/MessageInput/__tests__/MessageInput.test.js
index ea448f5de0..4b79245d8e 100644
--- a/src/components/MessageInput/__tests__/MessageInput.test.js
+++ b/src/components/MessageInput/__tests__/MessageInput.test.js
@@ -15,6 +15,7 @@ import { Channel } from '../../Channel/Channel';
 import { MessageActionsBox } from '../../MessageActions';
 
 import { MessageProvider } from '../../../context/MessageContext';
+import { useMessageInputContext } from '../../../context/MessageInputContext';
 import { useChatContext } from '../../../context/ChatContext';
 import {
   dispatchMessageDeletedEvent,
@@ -664,6 +665,57 @@ function axeNoViolations(container) {
         await axeNoViolations(container);
       });
 
+      it('should allow to send custom message data', async () => {
+        const customMessageData = { customX: 'customX' };
+        const CustomInputForm = () => {
+          const { handleChange, handleSubmit, value } = useMessageInputContext();
+          return (
+            <form>
+              <input onChange={handleChange} placeholder={inputPlaceholder} value={value} />
+              <button
+                onClick={(event) => {
+                  handleSubmit(event, customMessageData);
+                }}
+                type='submit'
+              >
+                Send
+              </button>
+            </form>
+          );
+        };
+
+        const messageInputProps =
+          componentName === 'EditMessageForm'
+            ? {
+                messageInputProps: {
+                  message: {
+                    text: `abc`,
+                  },
+                },
+              }
+            : {};
+
+        const renderComponent = makeRenderFn(CustomInputForm);
+        const { container, submit } = await renderComponent(messageInputProps);
+
+        fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+          target: {
+            value: 'Some text',
+          },
+        });
+
+        await act(() => submit());
+
+        await waitFor(() => {
+          const calledMock = componentName === 'EditMessageForm' ? editMock : submitMock;
+          expect(calledMock).toHaveBeenCalledWith(
+            expect.stringMatching(/.+:.+/),
+            expect.objectContaining(customMessageData),
+          );
+        });
+        await axeNoViolations(container);
+      });
+
       it('Should use overrideSubmitHandler prop if it is defined', async () => {
         const overrideMock = jest.fn().mockImplementation(() => Promise.resolve());
         const customMessageData = undefined;

From 6121b7b5dfa463928c9c24227bec340204f0e8d0 Mon Sep 17 00:00:00 2001
From: MartinCupela <martin.cupela@gmail.com>
Date: Tue, 2 Aug 2022 08:10:28 +0200
Subject: [PATCH 3/3] docs: add note describing a possibility to pass
 customMessagData do handleSubmit

---
 .../React/custom-code-examples/override-submit-handler.mdx    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docusaurus/docs/React/custom-code-examples/override-submit-handler.mdx b/docusaurus/docs/React/custom-code-examples/override-submit-handler.mdx
index a430d1e645..14dbc8a779 100644
--- a/docusaurus/docs/React/custom-code-examples/override-submit-handler.mdx
+++ b/docusaurus/docs/React/custom-code-examples/override-submit-handler.mdx
@@ -15,6 +15,10 @@ The `MessageInput` component accepts an `overrideSubmitHandler` prop, which allo
 conclusion of the underlying `textarea` element's [`handleSubmit`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/hooks/useSubmitHandler.ts)
 function.
 
+:::note
+You do not have to implement your custom submit handler, if the only thing you need is to pass custom message data to the underlying API call. In that case you can use the [`handleSubmit`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/hooks/useSubmitHandler.ts) function from the [`MessageInputContext`](../contexts/message-input-context.mdx). The `handleSubmit` function allows you to pass custom message data through its second parameter `customMessageData`. This applies to sending a new message as well as updating an existing one. In order for this to work, you will have to implement custom message input components and pass them to [`Channel`](../core-components/channel.mdx)  props `EditMessageInput` or `Input` respectively.
+:::
+
 The `overrideSubmitHandler` function receives two arguments, the message to be sent and the `cid` (channel type prepended to channel id)
 for the currently active channel. The message object is of the following type: