fix: give preference to pasting text over files

GetStream · Nov 5, 2024 · b823e3b · b823e3b
1 parent 949446b
commit b823e3b
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 10 deletions.
diff --git a/src/components/MessageInput/__tests__/MessageInput.test.js b/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({

diff --git a/src/components/MessageInput/hooks/usePasteHandler.ts b/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);
     },