Merge branch 'master' into fix/type-SuggestionEmoji

Author: arnautov-anton

.github/workflows/release.yml

@@ -39,7 +39,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 'lts/*'
+          node-version: 20
       - name: Install dependencies & Build
         run: |
           yarn install --frozen-lockfile

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [12.5.1](https://github.com/GetStream/stream-chat-react/compare/v12.5.0...v12.5.1) (2024-11-06)
+
+
+### Bug Fixes
+
+* give preference to pasting text over files ([#2552](https://github.com/GetStream/stream-chat-react/issues/2552)) ([652ae33](https://github.com/GetStream/stream-chat-react/commit/652ae337e4f707eea153f6f234d96fe1d9eb9d18))
+
 ## [12.5.0](https://github.com/GetStream/stream-chat-react/compare/v12.4.1...v12.5.0) (2024-11-01)
 
 

src/components/MessageInput/__tests__/MessageInput.test.js

@@ -333,6 +333,64 @@ function axeNoViolations(container) {
         expect(results).toHaveNoViolations();
       });
 
+      it('gives preference to pasting text over files', async () => {
+        const doImageUploadRequest = mockUploadApi();
+        const doFileUploadRequest = mockUploadApi();
+        const pastedString = 'pasted string';
+        const { container } = await renderComponent({
+          messageInputProps: {
+            doFileUploadRequest,
+            doImageUploadRequest,
+          },
+        });
+
+        const file = getFile();
+        const image = getImage();
+
+        const clipboardEvent = new Event('paste', {
+          bubbles: true,
+        });
+        // set `clipboardData`. Mock DataTransfer object
+        clipboardEvent.clipboardData = {
+          items: [
+            {
+              getAsFile: () => file,
+              kind: 'file',
+            },
+            {
+              getAsFile: () => image,
+              kind: 'file',
+            },
+            {
+              getAsString: (cb) => cb(pastedString),
+              kind: 'string',
+              type: 'text/plain',
+            },
+          ],
+        };
+        const formElement = screen.getByPlaceholderText(inputPlaceholder);
+        await act(async () => {
+          await formElement.dispatchEvent(clipboardEvent);
+        });
+
+        await waitFor(() => {
+          expect(doFileUploadRequest).not.toHaveBeenCalled();
+          expect(doImageUploadRequest).not.toHaveBeenCalled();
+          expect(screen.queryByTestId(IMAGE_PREVIEW_TEST_ID)).not.toBeInTheDocument();
+          expect(screen.queryByTestId(FILE_PREVIEW_TEST_ID)).not.toBeInTheDocument();
+          expect(screen.queryByText(filename)).not.toBeInTheDocument();
+          expect(screen.queryByTestId(ATTACHMENT_PREVIEW_LIST_TEST_ID)).not.toBeInTheDocument();
+          if (componentName === 'EditMessageForm') {
+            expect(formElement.value.startsWith(pastedString)).toBeTruthy();
+          } else {
+            expect(formElement).toHaveValue(pastedString);
+          }
+        });
+
+        const results = await axe(container);
+        expect(results).toHaveNoViolations();
+      });
+
       it('Should upload an image when it is dropped on the dropzone', async () => {
         const doImageUploadRequest = mockUploadApi();
         const { container } = await renderComponent({

src/components/MessageInput/hooks/usePasteHandler.ts

@@ -1,9 +1,5 @@
 import { useCallback } from 'react';
-import {
-  // dataTransferItemsHaveFiles,
-  dataTransferItemsToFiles,
-  FileLike,
-} from '../../ReactFileUtilities';
+import { dataTransferItemsToFiles, FileLike } from '../../ReactFileUtilities';
 import type { EnrichURLsController } from './useLinkPreviews';
 import { SetLinkPreviewMode } from '../types';
 
@@ -35,17 +31,15 @@ export const usePasteHandler = (
         }
 
         const fileLikes = await dataTransferItemsToFiles(Array.from(items));
-        if (fileLikes.length && isUploadEnabled) {
-          uploadNewFiles(fileLikes);
-          return;
-        }
 
-        // fallback to regular text paste
         if (plainTextPromise) {
           const pastedText = await plainTextPromise;
           insertText(pastedText);
           findAndEnqueueURLsToEnrich?.(pastedText, SetLinkPreviewMode.UPSERT);
           findAndEnqueueURLsToEnrich?.flush();
+        } else if (fileLikes.length && isUploadEnabled) {
+          uploadNewFiles(fileLikes);
+          return;
         }
       })(clipboardEvent);
     },