stream-chat-react/dist/components/MessageInput/hooks/usePasteHandler.js

React components to create chat conversations or livestream style chat

import { useCallback } from 'react';
import { useMessageComposer } from './useMessageComposer';
import { dataTransferItemsToFiles } from '../../ReactFileUtilities';
export const usePasteHandler = () => {
    const { attachmentManager, textComposer } = useMessageComposer();
    const onPaste = useCallback((clipboardEvent) => {
        (async (event) => {
            const { items } = event.clipboardData;
            event.preventDefault();
            // Get a promise for the plain text in case no files are
            // found. This needs to be done here because chrome cleans
            // up the DataTransferItems after resolving of a promise.
            let plainTextPromise = undefined;
            for (let i = 0; i < items.length; i++) {
                const item = items[i];
                if (item.kind === 'string' && item.type === 'text/plain') {
                    plainTextPromise = new Promise((resolve) => {
                        item.getAsString((string) => {
                            resolve(string);
                        });
                    });
                    break;
                }
            }
            const fileLikes = await dataTransferItemsToFiles(Array.from(items));
            if (plainTextPromise) {
                const pastedText = await plainTextPromise;
                textComposer.insertText({ text: pastedText });
            }
            else {
                attachmentManager.uploadFiles(fileLikes);
            }
        })(clipboardEvent);
    }, [attachmentManager, textComposer]);
    return { onPaste };
};