fix: DH-19210: Add plaintext paste key handling (#2661)

For DH-19210. Adds handling for `text/plain` from the clipboard(this is
necessary to handle copy/paste workflows from excel as `text/html`
contains only '#' symbols when the column is truncated)

Author: gzh2003

packages/grid/src/key-handlers/PasteKeyHandler.test.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { parseValueFromElement } from './PasteKeyHandler';
+import { parseValueFromElement, parseValueFromText } from './PasteKeyHandler';
 
 function makeElementFromJsx(jsx: JSX.Element): HTMLElement {
   return render(jsx).container;
@@ -130,3 +130,35 @@ describe('text parsing', () => {
     testHtml(<div>foo</div>, 'foo');
   });
 });
+
+describe('parseValueFromText', () => {
+  it('parses a single numeric value', () => {
+    expect(parseValueFromText('12345')).toBe('12345');
+  });
+
+  it('trims whitespace for single value', () => {
+    expect(parseValueFromText('  3.14  \n')).toBe('3.14');
+  });
+
+  it('parses a table with multiple rows and columns', () => {
+    expect(
+      parseValueFromText('12345\t3.14\thello\n67890\t2.71\tworld\n')
+    ).toEqual([
+      ['12345', '3.14', 'hello'],
+      ['67890', '2.71', 'world'],
+    ]);
+  });
+
+  it('parses a single row from text', () => {
+    expect(parseValueFromText('12345\t67890\t99999')).toEqual([
+      ['12345', '67890', '99999'],
+    ]);
+  });
+
+  it('trims trailing newline without creating an empty row', () => {
+    expect(parseValueFromText('A\tB\n1\t2\n')).toEqual([
+      ['A', 'B'],
+      ['1', '2'],
+    ]);
+  });
+});

packages/grid/src/key-handlers/PasteKeyHandler.ts

@@ -45,6 +45,17 @@ export function parseValueFromNodes(nodes: NodeListOf<ChildNode>): string[][] {
   return result;
 }
 
+export function parseValueFromText(text: string): string | string[][] {
+  const rows = text
+    .trim()
+    .split('\n')
+    .map(row => row.split('\t'));
+  if (rows.length === 1 && rows[0].length === 1) {
+    return rows[0][0];
+  }
+  return rows;
+}
+
 export function parseValueFromElement(
   element: HTMLElement
 ): string | string[][] | null {
@@ -104,21 +115,35 @@ class PasteKeyHandler extends KeyHandler {
             'clip-path: "inset(50%)"; height: 1px; width: 1px; margin: -1px; overflow: hidden; padding 0; position: absolute;'
           );
 
-          const listener = (): void => {
-            dummyInput.removeEventListener('input', listener);
+          const cleanup = (): void => {
+            dummyInput.removeEventListener('paste', pasteListener);
+            dummyInput.removeEventListener('input', inputListener);
             dummyInput.remove();
-
             grid.focus();
-            const value = parseValueFromElement(dummyInput);
+          };
+
+          let plainText = '';
+
+          // Capture text/plain from the clipboard during the paste event.
+          // HTML element parsing is used as a fallback if text/plain is unavailable.
+          const pasteListener = (e: Event): void => {
+            const clipboardEvent = e as ClipboardEvent;
+            plainText =
+              clipboardEvent.clipboardData?.getData('text/plain') ?? '';
+          };
+
+          const inputListener = (): void => {
+            cleanup();
+            const value =
+              (plainText.length > 0 ? parseValueFromText(plainText) : null) ??
+              parseValueFromElement(dummyInput);
             if (value != null) {
               grid.pasteValue(value);
             }
           };
 
-          // Listen for the `input` event, when there's a change to the HTML
-          // We could also listen to the `paste` event to get the clipboard data, but that's just text data
-          // By listening to `input`, we can get a table that's already parsed in HTML, which is easier to consume
-          dummyInput.addEventListener('input', listener);
+          dummyInput.addEventListener('paste', pasteListener);
+          dummyInput.addEventListener('input', inputListener);
 
           // Focus the element so it receives the paste event
           dummyInput.focus();