feat: support ctrl+c and ctrl+v of cell

Author: invisal

src/main/ipc/handleConnection.ts

@@ -11,6 +11,7 @@ export default class ConnectionIpcHandler {
   register() {
     ipcMain.handle('connect', async (_, [store]: [ConnectionStoreItem]) => {
       if (store.type === 'mysql') {
+        console.log('create mysql connection');
         this.connection = new MySQLConnection(
           store.config as unknown as DatabaseConnectionConfig
         );

src/renderer/components/ResizableTable/index.tsx

@@ -91,7 +91,7 @@ export default function ResizableTable({
                     </div>
                     {header.icon && (
                       <div className={styles.headerContentIcon}>
-                        header.icon
+                        {header.icon}
                       </div>
                     )}
                   </div>

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableCellString.tsx

@@ -47,6 +47,12 @@ const TableCellString = createTableCellType({
   diff: (prev: string, current: string) => prev !== current,
   content: TableCellStringContent,
   editor: TableCellStringEditor,
+  onCopy: (value: string) => {
+    return value;
+  },
+  onPaste: (value: string) => {
+    return { accept: true, value };
+  },
 });
 
 export default TableCellString;

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/TableEditableCell.tsx

@@ -5,6 +5,7 @@ import {
   forwardRef,
   useImperativeHandle,
   Ref,
+  useEffect,
 } from 'react';
 import styles from './styles.module.css';
 import { useQueryResultChange } from 'renderer/contexts/QueryResultChangeProvider';
@@ -34,6 +35,10 @@ interface TableEditableCellProps {
   col: number;
   value: unknown;
   readOnly?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onCopy?: (value: any) => string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onPaste?: (value: string) => { accept: boolean; value: any };
 }
 
 const TableEditableCell = forwardRef(function TableEditableCell(
@@ -46,6 +51,8 @@ const TableEditableCell = forwardRef(function TableEditableCell(
     row,
     value,
     readOnly,
+    onCopy,
+    onPaste,
   }: TableEditableCellProps,
   ref: Ref<TableEditableCellHandler>
 ) {
@@ -104,6 +111,36 @@ const TableEditableCell = forwardRef(function TableEditableCell(
     [setOnEditMode, setAfterValue, diff, value]
   );
 
+  useEffect(() => {
+    if (onFocus) {
+      const onKeyBinding = (e: KeyboardEvent) => {
+        if (e.ctrlKey && e.key === 'c') {
+          if (onCopy) {
+            window.navigator.clipboard.writeText(onCopy(value));
+          }
+        } else if (e.ctrlKey && e.key === 'v') {
+          if (onPaste) {
+            window.navigator.clipboard.readText().then((pastedValue) => {
+              const acceptPasteResult = onPaste(pastedValue);
+              if (acceptPasteResult.accept) {
+                const newValue = acceptPasteResult.value;
+                setAfterValue(newValue);
+                if (diff(value, newValue)) {
+                  setChange(row, col, newValue);
+                } else {
+                  removeChange(row, col);
+                }
+              }
+            });
+          }
+        }
+      };
+
+      document.addEventListener('keydown', onKeyBinding);
+      return () => document.removeEventListener('keydown', onKeyBinding);
+    }
+  }, [onFocus, onCopy, value, diff, setAfterValue]);
+
   const className = [
     styles.container,
     hasChanged ? styles.changed : undefined,

src/renderer/screens/DatabaseScreen/QueryResultViewer/TableCell/createTableCellType.tsx

@@ -10,6 +10,8 @@ interface TableCellCustomTypeOptions<T> {
   editor: React.FC<TableEditableEditorProps>;
   content: React.FC<TableEditableContentProps>;
   detachEditor?: boolean;
+  onCopy?: (value: T) => string;
+  onPaste?: (value: string) => { accept: boolean; value: T };
 }
 
 interface TableCellCustomTypeProps<T> {
@@ -48,6 +50,8 @@ export default function createTableCellType<T>(
         content={options.content}
         readOnly={readOnly}
         detactEditor={options.detachEditor}
+        onCopy={options.onCopy}
+        onPaste={options.onPaste}
       />
     );
   };