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

packages/eui/changelogs/upcoming/8019.md

@@ -0,0 +1 @@
+- Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean content newlines/tabs when users copy and paste from their tabular data

packages/eui/cypress/support/component.tsx

@@ -20,6 +20,7 @@ import 'cypress-real-events';
 
 import './a11y/checkAxe';
 import './keyboard/repeatRealPress';
+import './copy/select_and_copy';
 import './setup/mount';
 import './setup/realMount';
 

packages/eui/cypress/support/copy/select_and_copy.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+const selectAndCopy = (selectorToCopy: string) => {
+  // Force Chrome devtools to allow reading from the clipboard
+  cy.wrap(
+    Cypress.automation('remote:debugger:protocol', {
+      command: 'Browser.grantPermissions',
+      params: {
+        permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
+        origin: window.location.origin,
+      },
+    })
+  );
+
+  // For some annoying reason, mocking selection+copying throws a bunch
+  // of document errors from the code coverage reporter - just ignore them
+  Cypress.on('uncaught:exception', (err) => {
+    console.log(err.message);
+    if (
+      err.message.includes(
+        "Cannot read properties of null (reading 'document')"
+      )
+    ) {
+      return false;
+    }
+  });
+
+  cy.get(selectorToCopy).then(($el) => {
+    const el = $el[0];
+    const document = el.ownerDocument;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    document.getSelection()!.removeAllRanges();
+    document.getSelection()!.addRange(range);
+  });
+
+  return cy.window().then((window) => {
+    document.execCommand('copy');
+    return window.navigator.clipboard.readText();
+  });
+};
+
+Cypress.Commands.add('selectAndCopy', selectAndCopy);

packages/eui/cypress/support/index.d.ts

@@ -49,6 +49,13 @@ declare global {
         count?: number,
         options?: RealPressOptions
       ): void;
+
+      /**
+       * Select an element's content and copy it to the browser clipboard
+       * @param selectorToCopy e.g. '.euiDataGrid__content'
+       * @returns a chainable .then((string) => { doSomethingWith(string); })
+       */
+      selectAndCopy(selectorToCopy: string): Chainable<string>;
     }
   }
 }