fix: make consistent use of message composition related props (#2695)

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -142,6 +142,7 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'ReactionsListModal'
   | 'SendButton'
   | 'StartRecordingAudioButton'
+  | 'TextareaComposer'
   | 'ThreadHead'
   | 'ThreadHeader'
   | 'ThreadStart'
@@ -1229,6 +1230,7 @@ const ChannelInner = (
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       StopAIGenerationButton: props.StopAIGenerationButton,
       StreamedMessageText: props.StreamedMessageText,
+      TextareaComposer: props.TextareaComposer,
       ThreadHead: props.ThreadHead,
       ThreadHeader: props.ThreadHeader,
       ThreadStart: props.ThreadStart,
@@ -1291,6 +1293,7 @@ const ChannelInner = (
       props.StartRecordingAudioButton,
       props.StopAIGenerationButton,
       props.StreamedMessageText,
+      props.TextareaComposer,
       props.ThreadHead,
       props.ThreadHeader,
       props.ThreadStart,

src/components/Channel/__tests__/Channel.test.js

@@ -32,6 +32,7 @@ import { Thread } from '../../Thread';
 import { MessageProvider } from '../../../context';
 import { MessageActionsBox } from '../../MessageActions';
 import { DEFAULT_THREAD_PAGE_SIZE } from '../../../constants/limits';
+import { generateMessageDraft } from '../../../mock-builders/generator/messageDraft';
 
 jest.mock('../../Loading', () => ({
   LoadingErrorIndicator: jest.fn(() => <div />),
@@ -173,6 +174,9 @@ describe('Channel', () => {
       pinnedMessages,
       user,
     }));
+    jest.spyOn(channel, 'getDraft').mockResolvedValue({
+      draft: generateMessageDraft({ channel, channel_cid: channel.cid }),
+    });
   });
 
   afterEach(() => {

src/components/MessageInput/EditMessageForm.tsx

@@ -86,7 +86,6 @@ export const EditMessageModal = ({
     >
       <MessageInput
         clearEditingState={clearEditingState}
-        grow
         hideSendButton
         Input={EditMessageInput}
         {...additionalMessageInputProps}

src/components/MessageInput/MessageInput.tsx

@@ -38,7 +38,7 @@ export type MessageInputProps = {
    */
   additionalTextareaProps?: Omit<
     React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    'defaultValue'
+    'defaultValue' | 'style' | 'disabled' | 'value'
   >;
   /**
    * When enabled, recorded messages won’t be sent immediately.
@@ -55,8 +55,6 @@ export type MessageInputProps = {
   emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
   /** If true, focuses the text input on component mount */
   focus?: boolean;
-  /** If true, expands the text input vertically for new lines */
-  grow?: boolean;
   /** Allows to hide MessageInput's send button. */
   hideSendButton?: boolean;
   /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */

src/components/MessageInput/MessageInputFlat.tsx

@@ -19,7 +19,7 @@ import {
   QuotedMessagePreviewHeader,
 } from './QuotedMessagePreview';
 import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
-import { TextareaComposer } from '../TextareaComposer';
+import { TextareaComposer as DefaultTextareaComposer } from '../TextareaComposer';
 import { AIStates, useAIState } from '../AIStateIndicator';
 import { RecordingAttachmentType } from '../MediaRecorder/classes';
 
@@ -53,7 +53,8 @@ export const MessageInputFlat = () => {
     SendButton = DefaultSendButton,
     StartRecordingAudioButton = DefaultStartRecordingAudioButton,
     StopAIGenerationButton: StopAIGenerationButtonOverride,
-  } = useComponentContext('MessageInputFlat');
+    TextareaComposer = DefaultTextareaComposer,
+  } = useComponentContext();
   const { channel } = useChatContext('MessageInputFlat');
   const { aiState } = useAIState(channel);
 

src/components/MessageInput/hooks/useCreateMessageInputContext.ts

@@ -12,10 +12,8 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
     cooldownRemaining,
     emojiSearchIndex,
     focus,
-    grow,
     handleSubmit,
     hideSendButton,
-    insertText,
     isThreadInput,
     maxRows,
     minRows,
@@ -39,10 +37,8 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
       cooldownRemaining,
       emojiSearchIndex,
       focus,
-      grow,
       handleSubmit,
       hideSendButton,
-      insertText,
       isThreadInput,
       maxRows,
       minRows,

src/components/MessageInput/hooks/useMessageInputControls.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useMessageInputText } from './useMessageInputText';
+import { useTextareaRef } from './useTextareaRef';
 import { useSubmitHandler } from './useSubmitHandler';
 import { usePasteHandler } from './usePasteHandler';
 import { useMediaRecorder } from '../../MediaRecorder/hooks/useMediaRecorder';
@@ -12,7 +12,6 @@ export type MessageInputHookProps = {
     event?: React.BaseSyntheticEvent,
     customMessageData?: Omit<UpdatedMessage, 'mentioned_users'>,
   ) => void;
-  insertText: (textToInsert: string) => void;
   onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
   recordingController: RecordingController;
   textareaRef: React.MutableRefObject<HTMLTextAreaElement | null | undefined>;
@@ -24,7 +23,7 @@ export const useMessageInputControls = (
   const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } =
     props;
 
-  const { insertText, textareaRef } = useMessageInputText(props);
+  const { textareaRef } = useTextareaRef(props);
 
   const { handleSubmit } = useSubmitHandler(props);
 
@@ -35,11 +34,10 @@ export const useMessageInputControls = (
     recordingConfig: audioRecordingConfig,
   });
 
-  const { onPaste } = usePasteHandler(insertText);
+  const { onPaste } = usePasteHandler();
 
   return {
     handleSubmit,
-    insertText,
     onPaste,
     recordingController,
     textareaRef,

src/components/MessageInput/hooks/useMessageInputText.ts

@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 import { useMessageComposer } from './useMessageComposer';
 import { dataTransferItemsToFiles } from '../../ReactFileUtilities';
 
-export const usePasteHandler = (insertText: (textToInsert: string) => void) => {
-  const { attachmentManager } = useMessageComposer();
+export const usePasteHandler = () => {
+  const { attachmentManager, textComposer } = useMessageComposer();
   const onPaste = useCallback(
     (clipboardEvent: React.ClipboardEvent<HTMLTextAreaElement>) => {
       (async (event) => {
@@ -29,13 +29,13 @@ export const usePasteHandler = (insertText: (textToInsert: string) => void) => {
 
         if (plainTextPromise) {
           const pastedText = await plainTextPromise;
-          insertText(pastedText);
+          textComposer.insertText({ text: pastedText });
         } else {
           attachmentManager.uploadFiles(fileLikes);
         }
       })(clipboardEvent);
     },
-    [attachmentManager, insertText],
+    [attachmentManager, textComposer],
   );
 
   return { onPaste };

src/components/MessageInput/hooks/usePasteHandler.ts

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import type { MessageInputProps } from '../MessageInput';
+
+export const useTextareaRef = (props: MessageInputProps) => {
+  const { focus } = props;
+  const textareaRef = useRef<HTMLTextAreaElement>(undefined);
+  // Focus
+  useEffect(() => {
+    if (focus && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [focus]);
+
+  return {
+    textareaRef,
+  };
+};