Avoid copying diffs as Markdown tables

Under certain circumstances with Chrome, copying a diff and pasting it
in a Markdown block could format the code in a Markdown table instead of
preserving the existing format. It appears that Chrome copies each diff
row as a single table, while browsers such as Firefox create separate
tables for rows. The table detector could be fooled if the right number
of columns and rows appeared in the paste buffer.

To fix this issue, we disable the auto-table formatting if the table
originated from a diff.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/213033

app/assets/javascripts/behaviors/markdown/paste_markdown_table.js

@@ -47,7 +47,8 @@ export default class PasteMarkdownTable {
 
     const htmlData = this.data.getData('text/html');
     this.doc = new DOMParser().parseFromString(htmlData, 'text/html');
-    const tables = this.doc.querySelectorAll('table');
+    // Avoid formatting lines that were copied from a diff
+    const tables = this.doc.querySelectorAll('table:not(.diff-wrap-lines)');
 
     // We're only looking for exactly one table. If there happens to be
     // multiple tables, it's possible an application copied data into

changelogs/unreleased/sh-fix-paste-markdown-from-diff.yml

+---
+title: Avoid copying diffs as Markdown tables
+merge_request: 30572
+author:
+type: fixed

spec/frontend/behaviors/markdown/paste_markdown_table_spec.js

@@ -57,6 +57,18 @@ describe('PasteMarkdownTable', () => {
 
       expect(new PasteMarkdownTable(data).isTable()).toBe(false);
     });
+
+    it('returns false when the table copy comes from a diff', () => {
+      data.types = ['text/html', 'text/plain'];
+      data.getData = jest.fn().mockImplementation(mimeType => {
+        if (mimeType === 'text/html') {
+          return '<table class="diff-wrap-lines"><tr><td>First</td><td>Second</td></tr></table>';
+        }
+        return 'First\tSecond';
+      });
+
+      expect(new PasteMarkdownTable(data).isTable()).toBe(false);
+    });
   });
 
   describe('convertToTableMarkdown', () => {