Pasting image directly from clipboard

Author: Pratheek555

packages/react/src/hooks/useDropBox.js

@@ -15,10 +15,16 @@ const useDropBox = () => {
     setData(e.dataTransfer.files[0]);
   };
 
+  const handlePaste = (file) => {
+    toggle();
+    setData(file);
+  };
+
   return {
     data,
     handleDrag,
     handleDragDrop,
+    handlePaste,
   };
 };
 

packages/react/src/views/ChatInput/ChatInput.js

@@ -34,6 +34,7 @@ import useShowCommands from '../../hooks/useShowCommands';
 import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 import formatSelection from '../../lib/formatSelection';
 import { parseEmoji } from '../../lib/emoji';
+import useDropBox from '../../hooks/useDropBox';
 
 const ChatInput = ({ scrollToBottom }) => {
   const { styleOverrides, classNames } = useComponentOverrides('ChatInput');
@@ -141,6 +142,8 @@ const ChatInput = ({ scrollToBottom }) => {
     setShowMembersList
   );
 
+  const { handlePaste } = useDropBox();
+
   useEffect(() => {
     RCInstance.auth.onAuthChange((user) => {
       if (user) {
@@ -417,6 +420,40 @@ const ChatInput = ({ scrollToBottom }) => {
     }
   };
 
+  const handlePasting = (event) => {
+    const { clipboardData } = event;
+
+    if (!clipboardData) {
+      return;
+    }
+
+    const items = Array.from(clipboardData.items);
+    if (
+      items.some(({ kind, type }) => kind === 'string' && type === 'text/plain')
+    ) {
+      return;
+    }
+
+    const files = items
+      .filter(
+        (item) => item.kind === 'file' && item.type.indexOf('image/') !== -1
+      )
+      .map((item) => {
+        const fileItem = item.getAsFile();
+
+        if (!fileItem) {
+          return;
+        }
+        return fileItem;
+      })
+      .filter((file) => !!file);
+
+    if (files.length) {
+      event.preventDefault();
+      handlePaste(files[0]);
+    }
+  };
+
   const onKeyDown = (e) => {
     switch (true) {
       case e.ctrlKey && e.code === 'KeyI': {
@@ -608,6 +645,7 @@ const ChatInput = ({ scrollToBottom }) => {
             }}
             onFocus={handleFocus}
             onKeyDown={onKeyDown}
+            onPaste={handlePasting}
             ref={messageRef}
           />