add keyboard shortcut to copy and paste

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -28,6 +28,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
     handleContextMenu,
     handleNewFileInput,
     handleNewFolderInput,
+    handleMultiCopies,
+    handlePasteClick,
+    handleCopyClick,
     deletePath,
     uploadFile,
     uploadFolder,
@@ -74,6 +77,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
     setState(workspaceState)
   }, [workspaceState])
 
+  useEffect(() => {
+    console.log('what is selected now', feTarget)
+  }, [feTarget])
+
   useEffect(() => {
     if (treeRef.current) {
       const keyPressHandler = (e: KeyboardEvent) => {
@@ -196,6 +203,131 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }, [treeRef.current, feTarget])
 
+  useEffect(() => {
+    const performCopy = async () => {
+      if (feTarget?.length > 0 && feTarget[0]?.key.length > 0) {
+        if (feTarget?.length > 1) {
+          handleMultiCopies(feTarget)
+        } else {
+          handleCopyClick(feTarget[0].key, feTarget[0].type)
+        }
+      }
+    }
+
+    const performCut = async () => {
+      if (feTarget?.length > 0 && feTarget[0]?.key.length > 0) {
+        if (feTarget?.length > 1) {
+          handleMultiCopies(feTarget)
+        } else {
+          handleCopyClick(feTarget[0].key, feTarget[0].type)
+        }
+      }
+    }
+
+    if (treeRef.current) {
+      const CopyComboHandler = async (eve: KeyboardEvent) => {
+        if (eve.metaKey ) {
+          if (eve.code === 'KeyC') {
+            feWindow._paq.push(['trackEvent', 'fileExplorer', 'f2ToRename', 'RenamePath'])
+            await performCopy()
+            // setState((prevState) => {
+            //   return { ...prevState, F2Key: true }
+            // })
+            console.log('copy performed on a mac')
+          }
+          return
+        }
+      }
+
+      const pcCopyHandler = async (eve: KeyboardEvent) => {
+        if (eve.key === 'Control' ) {
+          if (eve.code === 'KeyC') {
+            feWindow._paq.push(['trackEvent', 'fileExplorer', 'f2ToRename', 'RenamePath'])
+            await performCopy()
+            // setState((prevState) => {
+            //   return { ...prevState, F2Key: true }
+            // })
+            console.log('copy perfomed on a pc')
+          }
+          return
+        }
+      }
+
+      const pcCutHandler = async (eve: KeyboardEvent) => {
+        if (eve.key === 'Control' ) {
+          if (eve.code === 'KeyX') {
+            feWindow._paq.push(['trackEvent', 'fileExplorer', 'f2ToRename', 'RenamePath'])
+            await performCopy()
+            console.log('cut performed on a pc')
+          }
+          return
+        }
+      }
+
+      const CutHandler = async (eve: KeyboardEvent) => {
+        if (eve.metaKey ) {
+          if (eve.code === 'KeyX') {
+            feWindow._paq.push(['trackEvent', 'fileExplorer', 'f2ToRename', 'RenamePath'])
+            await performCopy()
+            console.log('Cut performed on mac')
+          }
+          return
+        }
+      }
+
+      treeRef.current?.addEventListener('keydown', CopyComboHandler)
+      treeRef.current?.addEventListener('keydown', pcCopyHandler)
+      treeRef.current?.addEventListener('keydown', CutHandler)
+      treeRef.current?.addEventListener('keydown', pcCutHandler)
+      return () => {
+        treeRef.current?.removeEventListener('keydown', CopyComboHandler)
+        treeRef.current?.removeEventListener('keydown', pcCopyHandler)
+        treeRef.current?.removeEventListener('keydown', CutHandler)
+        treeRef.current?.removeEventListener('keydown', pcCutHandler)
+      }
+    }
+  }, [treeRef.current, feTarget])
+
+  useEffect(() => {
+    const performPaste = async () => {
+      if (feTarget.length > 0 && feTarget[0]?.key.length >= 0) {
+        handlePasteClick(feTarget[0].key, feTarget[0].type)
+      }
+    }
+
+    if (treeRef.current) {
+      const pasteHandler = async (eve: KeyboardEvent) => {
+        if (eve.metaKey ) {
+          if (eve.code === 'KeyV') {
+            feWindow._paq.push(['trackEvent', 'fileExplorer', 'metaVToPaste', 'PasteCopiedContent'])
+            performPaste()
+            console.log('paste performed on mac')
+          }
+          return
+        }
+      }
+
+      const pcPasteHandler = async (eve: KeyboardEvent) => {
+        if (eve.key === 'Control' ) {
+          if (eve.code === 'KeyV') {
+            feWindow._paq.push(['trackEvent', 'fileExplorer', 'ctrlVToPaste', 'PasteCopiedContent'])
+            performPaste()
+            console.log('paste performed on pc')
+          }
+          return
+        }
+      }
+
+      treeRef.current?.addEventListener('keydown', pasteHandler)
+      treeRef.current?.addEventListener('keydown', pcPasteHandler)
+
+      return () => {
+        treeRef.current?.removeEventListener('keydown', pasteHandler)
+        treeRef.current?.removeEventListener('keydown', pcPasteHandler)
+      }
+    }
+  }, [feTarget])
+
   const hasReservedKeyword = (content: string): boolean => {
     if (state.reservedKeywords.findIndex((value) => content.startsWith(value)) !== -1) return true
     else return false

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -512,6 +512,26 @@ export function Workspace() {
     }
   }
 
+  const handleMultipleItemCopies = (copied: {path: string, type: 'folder' | 'file' | 'workspace'}[]) => {
+    let paths = ''
+    const payload = copied.map((copy) => {
+      paths += `${copy.path} \n`
+      return { key: copy.path, type: copy.type }
+    })
+    setState((prevState) => {
+      return { ...prevState, copyElement: payload }
+    })
+    setCanPaste(true)
+    global.toast(intl.formatMessage({ id: 'filePanel.copiedToClipboard' }, { paths }))
+  }
+
+  const handleMultiplePastes = (dest: string, destType: string) => {
+    dest = destType === 'file' ? extractParentFromKey(dest) || ROOT_PATH : dest
+    state.copyElement.map(({ key, type }) => {
+      type === 'file' ? copyFile(key, dest) : copyFolder(key, dest)
+    })
+  }
+
   const handleCopyClick = (path: string, type: 'folder' | 'file' | 'workspace') => {
     setState((prevState) => {
       return { ...prevState, copyElement: [{ key: path, type }]}
@@ -1040,6 +1060,7 @@ export function Workspace() {
                   dispatchMoveFolder={global.dispatchMoveFolder}
                   dispatchMoveFolders={global.dispatchMoveFolders}
                   handleCopyClick={handleCopyClick}
+                  handleMultiCopies={handleMultipleItemCopies}
                   handlePasteClick={handlePasteClick}
                   addMenuItems={addMenuItems}
                   removeMenuItems={removeMenuItems}
@@ -1108,6 +1129,7 @@ export function Workspace() {
                   dispatchMoveFolder={global.dispatchMoveFolder}
                   dispatchMoveFolders={global.dispatchMoveFolders}
                   handleCopyClick={handleCopyClick}
+                  handleMultiCopies={handleMultipleItemCopies}
                   handlePasteClick={handlePasteClick}
                   addMenuItems={addMenuItems}
                   removeMenuItems={removeMenuItems}

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -158,6 +158,7 @@ export interface FileExplorerProps {
     dragStatus: (status: boolean) => void
     importFromIpfs: any
     importFromHttps: any
+    handleMultiCopies: any
 }
 
 export interface FileExplorerMenuProps {