diff --git a/src/components/MessageInput/__tests__/MessageInput.test.js b/src/components/MessageInput/__tests__/MessageInput.test.js index 9e72d2d43..cac2baeca 100644 --- 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 index 0d9ffa783..f92d3858a 100644 --- 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); },