Implementation of Cell Copy/Paste Events Using Clipboard Events

README.md

@@ -186,10 +186,6 @@ A number defining the height of summary rows.
 
 ###### `onFill?: Maybe<(event: FillEvent<R>) => R>`
 
-###### `onCopy?: Maybe<(event: CopyEvent<R>) => void>`
-
-###### `onPaste?: Maybe<(event: PasteEvent<R>) => R>`
-
 ###### `onCellClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>`
 
 ###### `onCellDoubleClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>`
@@ -198,6 +194,10 @@ A number defining the height of summary rows.
 
 ###### `onCellKeyDown?: Maybe<(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) => void>`
 
+###### `onCopy?: Maybe<(args: CellCopyArgs<R>, event: CellClipboardEvent) => void>`
+
+###### `onPaste?: Maybe<(args: CellPasteArgs<R>, event: CellClipboardEvent) => R>`
+
 ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs<R, SR>) => void>;`
 
 Triggered when the selected cell is changed.

src/DataGrid.tsx

@@ -31,18 +31,19 @@ import {
 import type {
   CalculatedColumn,
   CellClickArgs,
+  CellClipboardEvent,
+  CellCopyArgs,
   CellKeyboardEvent,
   CellKeyDownArgs,
   CellMouseEvent,
   CellNavigationMode,
+  CellPasteArgs,
   CellSelectArgs,
   Column,
   ColumnOrColumnGroup,
-  CopyEvent,
   Direction,
   FillEvent,
   Maybe,
-  PasteEvent,
   Position,
   Renderers,
   RowsChangeData,
@@ -154,8 +155,6 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
   defaultColumnOptions?: Maybe<DefaultColumnOptions<R, SR>>;
   onFill?: Maybe<(event: FillEvent<R>) => R>;
-  onCopy?: Maybe<(event: CopyEvent<R>) => void>;
-  onPaste?: Maybe<(event: PasteEvent<R>) => R>;
 
   /**
    * Event props
@@ -167,6 +166,10 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   /** Function called whenever a cell is right clicked */
   onCellContextMenu?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>;
   onCellKeyDown?: Maybe<(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) => void>;
+  /** Function called whenever a copy event occurs on a cell */
+  onCopy?: Maybe<(args: CellCopyArgs<R>, event: CellClipboardEvent) => void>;
+  /** Function called whenever a paste event occurs on a cell */
+  onPaste?: Maybe<(args: CellPasteArgs<R>, event: CellClipboardEvent) => R>;
   /** Function called whenever cell selection is changed */
   onSelectedCellChange?: Maybe<(args: CellSelectArgs<R, SR>) => void>;
   /** Called when the grid is scrolled */
@@ -547,29 +550,6 @@ function DataGrid<R, SR, K extends Key>(
     const isRowEvent = isTreeGrid && event.target === focusSinkRef.current;
     if (!isCellEvent && !isRowEvent) return;
 
-    const { keyCode } = event;
-
-    if (
-      selectedCellIsWithinViewportBounds &&
-      (onPaste != null || onCopy != null) &&
-      isCtrlKeyHeldDown(event)
-    ) {
-      // event.key may differ by keyboard input language, so we use event.keyCode instead
-      // event.nativeEvent.code cannot be used either as it would break copy/paste for the DVORAK layout
-      const cKey = 67;
-      const vKey = 86;
-      if (keyCode === cKey) {
-        // copy highlighted text only
-        if (window.getSelection()?.isCollapsed === false) return;
-        handleCopy();
-        return;
-      }
-      if (keyCode === vKey) {
-        handlePaste();
-        return;
-      }
-    }
-
     switch (event.key) {
       case 'Escape':
         setCopiedCell(null);
@@ -617,29 +597,44 @@ function DataGrid<R, SR, K extends Key>(
     updateRow(columns[selectedPosition.idx], selectedPosition.rowIdx, selectedPosition.row);
   }
 
-  function handleCopy() {
+  function handleCopy(event: React.ClipboardEvent<HTMLDivElement>) {
+    if ((!onPaste && !onCopy) || !selectedCellIsWithinViewportBounds) return;
     const { idx, rowIdx } = selectedPosition;
     const sourceRow = rows[rowIdx];
     const sourceColumnKey = columns[idx].key;
+    const cellEvent = createCellEvent(event);
+    onCopy?.({ sourceRow, sourceColumnKey }, cellEvent);
+    if (cellEvent.isGridDefaultPrevented()) return;
+
     setCopiedCell({ row: sourceRow, columnKey: sourceColumnKey });
-    onCopy?.({ sourceRow, sourceColumnKey });
   }
 
-  function handlePaste() {
-    if (!onPaste || !onRowsChange || copiedCell === null || !isCellEditable(selectedPosition)) {
+  function handlePaste(event: React.ClipboardEvent<HTMLDivElement>) {
+    if (
+      !onPaste ||
+      !onRowsChange ||
+      copiedCell === null ||
+      !isCellEditable(selectedPosition) ||
+      !selectedCellIsWithinViewportBounds
+    ) {
       return;
     }
 
     const { idx, rowIdx } = selectedPosition;
     const targetColumn = columns[idx];
     const targetRow = rows[rowIdx];
 
-    const updatedTargetRow = onPaste({
-      sourceRow: copiedCell.row,
-      sourceColumnKey: copiedCell.columnKey,
-      targetRow,
-      targetColumnKey: targetColumn.key
-    });
+    const cellEvent = createCellEvent(event);
+    const updatedTargetRow = onPaste(
+      {
+        sourceRow: copiedCell.row,
+        sourceColumnKey: copiedCell.columnKey,
+        targetRow,
+        targetColumnKey: targetColumn.key
+      },
+      cellEvent
+    );
+    if (cellEvent.isGridDefaultPrevented()) return;
 
     updateRow(targetColumn, rowIdx, updatedTargetRow);
   }
@@ -1076,6 +1071,8 @@ function DataGrid<R, SR, K extends Key>(
       ref={gridRef}
       onScroll={handleScroll}
       onKeyDown={handleKeyDown}
+      onCopy={handleCopy}
+      onPaste={handlePaste}
       data-testid={testId}
     >
       <DataGridDefaultRenderersProvider value={defaultGridComponents}>

src/types.ts

@@ -166,6 +166,8 @@ export type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;
 
 export type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;
 
+export type CellClipboardEvent = CellEvent<React.ClipboardEvent<HTMLDivElement>>;
+
 export interface CellClickArgs<TRow, TSummaryRow = unknown> {
   row: TRow;
   column: CalculatedColumn<TRow, TSummaryRow>;
@@ -193,6 +195,18 @@ export type CellKeyDownArgs<TRow, TSummaryRow = unknown> =
   | SelectCellKeyDownArgs<TRow, TSummaryRow>
   | EditCellKeyDownArgs<TRow, TSummaryRow>;
 
+export interface CellCopyArgs<TRow> {
+  sourceColumnKey: string;
+  sourceRow: TRow;
+}
+
+export interface CellPasteArgs<TRow> {
+  sourceColumnKey: string;
+  sourceRow: TRow;
+  targetColumnKey: string;
+  targetRow: TRow;
+}
+
 export interface CellSelectArgs<TRow, TSummaryRow = unknown> {
   rowIdx: number;
   row: TRow;
@@ -241,18 +255,6 @@ export interface FillEvent<TRow> {
   targetRow: TRow;
 }
 
-export interface CopyEvent<TRow> {
-  sourceColumnKey: string;
-  sourceRow: TRow;
-}
-
-export interface PasteEvent<TRow> {
-  sourceColumnKey: string;
-  sourceRow: TRow;
-  targetColumnKey: string;
-  targetRow: TRow;
-}
-
 export interface GroupRow<TRow> {
   readonly childRows: readonly TRow[];
   readonly id: string;

test/copyPaste.test.tsx

@@ -100,7 +100,7 @@ test('should allow copy if only onCopy is specified', async () => {
   await userEvent.click(getCellsAtRowIndex(0)[0]);
   copySelectedCell();
   expect(getSelectedCell()).toHaveClass(copyCellClassName);
-  expect(onCopySpy).toHaveBeenCalledWith({
+  expect(onCopySpy.mock.calls[0][0]).toStrictEqual({
     sourceRow: initialRows[0],
     sourceColumnKey: 'col'
   });
@@ -127,7 +127,7 @@ test('should allow copy/paste if both onPaste & onCopy is specified', async () =
   await userEvent.click(getCellsAtRowIndex(0)[0]);
   copySelectedCell();
   expect(getSelectedCell()).toHaveClass(copyCellClassName);
-  expect(onCopySpy).toHaveBeenCalledWith({
+  expect(onCopySpy.mock.calls[0][0]).toStrictEqual({
     sourceRow: initialRows[0],
     sourceColumnKey: 'col'
   });

test/utils.tsx

@@ -68,19 +68,12 @@ export function validateCellPosition(columnIdx: number, rowIdx: number) {
 }
 
 export function copySelectedCell() {
-  // eslint-disable-next-line testing-library/prefer-user-event
-  fireEvent.keyDown(document.activeElement!, {
-    keyCode: '67',
-    ctrlKey: true
-  });
+  fireEvent.copy(document.activeElement!);
 }
 
 export function pasteSelectedCell() {
   // eslint-disable-next-line testing-library/prefer-user-event
-  fireEvent.keyDown(document.activeElement!, {
-    keyCode: '86',
-    ctrlKey: true
-  });
+  fireEvent.paste(document.activeElement!);
 }
 
 export async function scrollGrid({

website/demos/AllFeatures.tsx

@@ -4,6 +4,7 @@ import { css } from '@linaria/core';
 
 import DataGrid, { SelectColumn, textEditor } from '../../src';
 import type { Column, CopyEvent, FillEvent, PasteEvent } from '../../src';
+import { type CellClipboardEvent } from '../../src/types';
 import { renderAvatar, renderDropdown } from './renderers';
 import type { Props } from './types';
 
@@ -189,10 +190,12 @@ export default function AllFeatures({ direction }: Props) {
     return { ...targetRow, [targetColumnKey]: sourceRow[sourceColumnKey as keyof Row] };
   }
 
-  function handleCopy({ sourceRow, sourceColumnKey }: CopyEvent<Row>): void {
-    if (window.isSecureContext) {
-      navigator.clipboard.writeText(sourceRow[sourceColumnKey as keyof Row]);
-    }
+  function handleCopy(
+    { sourceRow, sourceColumnKey }: CopyEvent<Row>,
+    event: CellClipboardEvent
+  ): void {
+    event.preventDefault();
+    event.clipboardData.setData('text/plain', sourceRow[sourceColumnKey as keyof Row]);
   }
 
   return (