Clean up copy/pasting of tabular content in EuiDataGrid and EuiBasic/InMemoryTable

packages/eui/src/services/copy/index.ts

@@ -7,3 +7,7 @@
  */
 
 export { copyToClipboard } from './copy_to_clipboard';
+export {
+  tabularCopyMarkers,
+  OverrideCopiedTabularContent,
+} from './tabular_copy';

packages/eui/src/services/copy/tabular_copy.test.tsx

@@ -0,0 +1,91 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { onTabularCopy, CHARS } from './tabular_copy';
+
+describe('onTabularCopy', () => {
+  const mockSetData = jest.fn();
+  const mockEvent = {
+    clipboardData: { setData: mockSetData },
+    preventDefault: () => {},
+  } as unknown as ClipboardEvent;
+
+  const mockSelectedText = jest.fn(() => '');
+  Object.defineProperty(window, 'getSelection', {
+    writable: true,
+    value: jest.fn().mockImplementation(() => ({
+      toString: mockSelectedText,
+    })),
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockSelectedText.mockReturnValue('');
+  });
+
+  it('does nothing if no special copy characters are in the clipboard', () => {
+    mockSelectedText.mockReturnValue('hello\nworld\t');
+    onTabularCopy(mockEvent);
+    expect(mockSetData).not.toHaveBeenCalled();
+  });
+
+  it('strips all newlines and replaces the newline character with our newlines', () => {
+    mockSelectedText.mockReturnValue('hello\nworld\r\nand↵goodbye world');
+    onTabularCopy(mockEvent);
+    expect(mockSetData).toHaveBeenCalledWith(
+      'text/plain',
+      'helloworldand\ngoodbye world'
+    );
+  });
+
+  it('strips all horizontal tabs and replaces the tab character with our tabs', () => {
+    mockSelectedText.mockReturnValue('hello\tworld↦goodbye\tworld');
+    onTabularCopy(mockEvent);
+    expect(mockSetData).toHaveBeenCalledWith(
+      'text/plain',
+      'helloworld\tgoodbyeworld'
+    );
+  });
+
+  it('strips out any text between the no-copy characters', () => {
+    mockSelectedText.mockReturnValue(
+      `${CHARS.NO_COPY_BOUND}some of${CHARS.NO_COPY_BOUND} this text should ${CHARS.NO_COPY_BOUND}not${CHARS.NO_COPY_BOUND} appear`
+    );
+    onTabularCopy(mockEvent);
+    expect(mockSetData).toHaveBeenCalledWith(
+      'text/plain',
+      ' this text should  appear'
+    );
+  });
+
+  it('does not clean text outside of specified bounds', () => {
+    mockSelectedText.mockReturnValue(`
+this
+is
+not
+cleaned
+${CHARS.TABULAR_CONTENT_BOUND}↵this\r\nis\ncleaned${CHARS.TABULAR_CONTENT_BOUND}
+also\tnot\tcleaned
+${CHARS.TABULAR_CONTENT_BOUND}↦also\tcleaned${CHARS.TABULAR_CONTENT_BOUND}
+`);
+    onTabularCopy(mockEvent);
+    expect(mockSetData).toHaveBeenCalledWith(
+      'text/plain',
+      `
+this
+is
+not
+cleaned
+
+thisiscleaned
+also	not	cleaned
+	alsocleaned
+`
+    );
+  });
+});

packages/eui/src/services/copy/tabular_copy.testenv.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { PropsWithChildren } from 'react';
+
+// Don't render these characters in Jest snapshots. I don't want to deal with the Kibana tests 🫠
+export const tabularCopyMarkers = {
+  hiddenTab: <></>,
+  hiddenNewline: <></>,
+  hiddenWrapperBoundary: <></>,
+  ariaHiddenNoCopyBoundary: <></>,
+};
+
+// Don't bother initializing in Kibana Jest either
+export const OverrideCopiedTabularContent = ({ children }: PropsWithChildren) =>
+  children;

packages/eui/src/services/copy/tabular_copy.tsx

@@ -0,0 +1,108 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { PropsWithChildren, useEffect } from 'react';
+
+/**
+ * Clipboard text cleaning logic
+ */
+
+// Special visually hidden unicode characters that we use to manually clean content
+// and force our own newlines/horizontal tabs
+export const CHARS = {
+  NEWLINE: '↵',
+  TAB: '↦',
+  TABULAR_CONTENT_BOUND: '⁣', // U+2063 - invisible separator
+  NO_COPY_BOUND: '⁢', // U+2062 - invisible times
+};
+// This regex finds all content between two bound characters
+const noCopyBoundsRegex = new RegExp(
+  `${CHARS.NO_COPY_BOUND}[^${CHARS.NO_COPY_BOUND}]*${CHARS.NO_COPY_BOUND}`,
+  'gs'
+);
+
+const hasCharsToReplace = (text: string) => {
+  for (const char of Object.values(CHARS)) {
+    if (text.indexOf(char) >= 0) return true;
+  }
+  return false;
+};
+
+// Strip all existing newlines and replace our special hidden characters
+// with the desired spacing needed to paste cleanly into a spreadsheet
+export const onTabularCopy = (event: ClipboardEvent | React.ClipboardEvent) => {
+  if (!event.clipboardData) return;
+
+  const selectedText = window.getSelection()?.toString();
+  if (!selectedText || !hasCharsToReplace(selectedText)) return;
+
+  const amendedText = selectedText
+    .split(CHARS.TABULAR_CONTENT_BOUND)
+    .map((text) => {
+      return hasCharsToReplace(text)
+        ? text
+            .replace(/\r?\n/g, '') // remove all other newlines generated by content or block display
+            .replaceAll(CHARS.NEWLINE, '\n') // insert newline for each table/grid row
+            .replace(/\t/g, '') // remove tabs generated by content or automatically by <td> elements
+            .replaceAll(CHARS.TAB, '\u0009') // insert horizontal tab for each table/grid cell
+            .replace(noCopyBoundsRegex, '') // remove text that should not be copied (e.g. screen reader instructions)
+        : text;
+    })
+    .join('');
+
+  event.clipboardData.setData('text/plain', amendedText);
+  event.preventDefault();
+};
+
+/**
+ * JSX utils for rendering the hidden marker characters
+ */
+
+const VisuallyHide = ({ children }: PropsWithChildren) => (
+  // Hides the characters to both sighted user and screen readers
+  // Sadly, we can't use `hidden` as that hides the chars from the clipboard as well
+  <span className="euiScreenReaderOnly" aria-hidden data-tabular-copy-marker>
+    {children}
+  </span>
+);
+
+export const tabularCopyMarkers = {
+  hiddenTab: <VisuallyHide>{CHARS.TAB}</VisuallyHide>,
+  hiddenNewline: <VisuallyHide>{CHARS.NEWLINE}</VisuallyHide>,
+  hiddenWrapperBoundary: (
+    <VisuallyHide>{CHARS.TABULAR_CONTENT_BOUND}</VisuallyHide>
+  ),
+  // Should be used within existing <EuiScreenReaderOnly>, ideally to avoid generating extra DOM
+  ariaHiddenNoCopyBoundary: <span aria-hidden>{CHARS.NO_COPY_BOUND}</span>,
+};
+
+/**
+ * Wrapper setup around table/grid tabular content we want to override/clean up on copy
+ */
+
+export const OverrideCopiedTabularContent = ({
+  children,
+}: PropsWithChildren) => {
+  useEffect(() => {
+    // Chrome and webkit browsers work perfectly when passing `onTabularCopy` to a React
+    // `onCopy` prop, but sadly Firefox does not if copying more than just the table/grid
+    // (e.g. Ctrl+A). So we have to set up a global window event listener
+    window.addEventListener('copy', onTabularCopy);
+    // Note: Since onCopy is static, we don't have to worry about duplicate
+    // event listeners - it's automatically handled by the browser. See:
+    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Multiple_identical_event_listeners
+  }, []);
+
+  return (
+    <>
+      {tabularCopyMarkers.hiddenWrapperBoundary}
+      {children}
+      {tabularCopyMarkers.hiddenWrapperBoundary}
+    </>
+  );
+};