feat: Support shortcut keys to copy nodes #3283 (#3293)

### What problem does this PR solve?

feat: Support shortcut keys to copy nodes #3283

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/index.tsx

@@ -125,7 +125,6 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
         onNodeClick={onNodeClick}
         onPaneClick={onPaneClick}
         onInit={setReactFlowInstance}
-        // onKeyUp={handleKeyUp}
         onSelectionChange={onSelectionChange}
         nodeOrigin={[0.5, 0]}
         isValidConnection={isValidConnection}
@@ -141,6 +140,18 @@ function FlowCanvas({ chatDrawerVisible, hideChatDrawer }: IProps) {
           },
         }}
         deleteKeyCode={['Delete', 'Backspace']}
+        onPaste={(...params) => {
+          console.info('onPaste:', ...params);
+        }}
+        onPasteCapture={(...params) => {
+          console.info('onPasteCapture:', ...params);
+        }}
+        onCopy={(...params) => {
+          console.info('onCopy:', ...params);
+        }}
+        onCopyCapture={(...params) => {
+          console.info('onCopyCapture:', ...params);
+        }}
       >
         <Background />
         <Controls />

web/src/pages/flow/canvas/node/dropdown.tsx

@@ -3,7 +3,7 @@ import { CopyOutlined } from '@ant-design/icons';
 import { Flex, MenuProps } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useGetNodeName } from '../../hooks';
+import { useDuplicateNode } from '../../hooks';
 import useGraphStore from '../../store';
 
 interface IProps {
@@ -15,21 +15,17 @@ interface IProps {
 const NodeDropdown = ({ id, iconFontColor, label }: IProps) => {
   const { t } = useTranslation();
   const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
-  const duplicateNodeById = useGraphStore((store) => store.duplicateNode);
-  const getNodeName = useGetNodeName();
 
   const deleteNode = useCallback(() => {
     deleteNodeById(id);
   }, [id, deleteNodeById]);
 
-  const duplicateNode = useCallback(() => {
-    duplicateNodeById(id, getNodeName(label));
-  }, [duplicateNodeById, id, getNodeName, label]);
+  const duplicateNode = useDuplicateNode();
 
   const items: MenuProps['items'] = [
     {
       key: '2',
-      onClick: duplicateNode,
+      onClick: () => duplicateNode(id, label),
       label: (
         <Flex justify={'space-between'}>
           {t('common.copy')}