fix(paste-html-table-as-string): preserve surrounding content when pasting HTML tables (#1189)

* fix(paste): preserve surrounding content when pasting HTML tables

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: unwrap paragraphs inside table cells when pasting HTML tables

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Ricardo Amaral <ricardo@doist.com>

Author: 3 people

src/extensions/shared/paste-html-table-as-string.test.ts

@@ -0,0 +1,84 @@
+import { transformPastedHTML } from './paste-html-table-as-string'
+
+describe('Extension: PasteHTMLTableAsString', () => {
+    describe('#transformPastedHTML', () => {
+        test('returns original HTML when no tables present', () => {
+            const html = '<p>Hello world</p>'
+            expect(transformPastedHTML(html)).toBe(html)
+        })
+
+        test('converts simple table to paragraphs', () => {
+            const html = '<table><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p>A B</p><p>C D</p>')
+        })
+
+        test('preserves content before table', () => {
+            const html = '<p>Before</p><table><tr><td>A</td><td>B</td></tr></table>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p>Before</p><p>A B</p>')
+        })
+
+        test('preserves content after table', () => {
+            const html = '<table><tr><td>A</td><td>B</td></tr></table><p>After</p>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p>A B</p><p>After</p>')
+        })
+
+        test('preserves content before and after table', () => {
+            const html = '<p>Before</p><table><tr><td>A</td><td>B</td></tr></table><p>After</p>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p>Before</p><p>A B</p><p>After</p>')
+        })
+
+        test('handles multiple tables with text between them', () => {
+            const html =
+                '<p>Start</p><table><tr><td>T1</td></tr></table><p>Middle</p><table><tr><td>T2</td></tr></table><p>End</p>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p>Start</p><p>T1</p><p>Middle</p><p>T2</p><p>End</p>')
+        })
+
+        test('filters out empty rows', () => {
+            const html = '<table><tr><td>A</td></tr><tr><td>  </td></tr><tr><td>B</td></tr></table>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p>A</p><p>B</p>')
+        })
+
+        test('preserves HTML formatting within cells', () => {
+            const html =
+                '<table><tr><td><strong>Bold</strong></td><td><em>Italic</em></td></tr></table>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p><strong>Bold</strong> <em>Italic</em></p>')
+        })
+
+        test('handles table with tbody', () => {
+            const html = '<table><tbody><tr><td>A</td><td>B</td></tr></tbody></table>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p>A B</p>')
+        })
+
+        test('handles table with thead and tbody', () => {
+            const html =
+                '<table><thead><tr><th>H1</th><th>H2</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p>H1 H2</p><p>A B</p>')
+        })
+
+        test('unwraps paragraphs inside cells while preserving inline formatting', () => {
+            const html =
+                '<table><tr><td><p><span>A</span></p></td><td><p><strong>B</strong></p></td></tr></table>'
+            const result = transformPastedHTML(html)
+
+            expect(result).toBe('<p><span>A</span> <strong>B</strong></p>')
+        })
+    })
+})

src/extensions/shared/paste-html-table-as-string.ts

@@ -4,6 +4,51 @@ import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { PASTE_HTML_TABLE_AS_STRING_EXTENSION_PRIORITY } from '../../constants/extension-priorities'
 import { parseHtmlToElement } from '../../helpers/dom'
 
+/**
+ * Transforms pasted HTML by converting tables to paragraphs while preserving surrounding content.
+ */
+function transformPastedHTML(html: string): string {
+    const body = parseHtmlToElement(html)
+    const tables = body.querySelectorAll('table')
+
+    if (tables.length === 0) {
+        return html
+    }
+
+    for (const table of Array.from(tables)) {
+        if (!table.rows) {
+            continue
+        }
+
+        // Convert table rows to paragraphs (using innerHTML to preserve formatting)
+        const paragraphs = Array.from(table.rows)
+            .map((row) =>
+                Array.from(row.cells)
+                    .map((cell) => {
+                        // Unwrap paragraphs but preserve inline formatting
+                        const paragraphs = cell.querySelectorAll('p')
+
+                        for (const p of Array.from(paragraphs)) {
+                            p.replaceWith(...Array.from(p.childNodes))
+                        }
+
+                        return cell.innerHTML
+                    })
+                    .join(' '),
+            )
+            .filter((row) => row.trim().length > 0)
+            .map((row) => {
+                const p = document.createElement('p')
+                p.innerHTML = row
+                return p
+            })
+
+        table.replaceWith(...paragraphs)
+    }
+
+    return body.innerHTML
+}
+
 /**
  * The `PasteHTMLTableAsString` extension adds the ability to paste a table copied from a spreadsheet
  * web app (e.g., Google Sheets, Microsoft Excel), along with tables rendered by GitHub Flavored
@@ -24,54 +69,11 @@ const PasteHTMLTableAsString = Extension.create({
             new Plugin({
                 key: new PluginKey('pasteHTMLTableAsString'),
                 props: {
-                    transformPastedHTML(html) {
-                        // Attempt to extract table(s) HTML from the pasted HTML
-                        const tableHTML = html.match(/<table[^>]+>[\s\S]*?<\/table>/gi)
-
-                        // Do not handle the event if no table HTML was found
-                        if (!tableHTML) {
-                            return html
-                        }
-
-                        // Concatenate all tables into a single string of paragraphs
-                        return tableHTML.reduce((result, table) => {
-                            const { firstElementChild: tableElement } = parseHtmlToElement(table)
-
-                            if (
-                                !tableElement ||
-                                !(tableElement instanceof HTMLTableElement) ||
-                                !tableElement.rows
-                            ) {
-                                return result
-                            }
-
-                            // Transform the table element into a string of paragraphs
-                            return (
-                                result +
-                                Array.from(tableElement.rows)
-                                    // Join each cell into a single string for each row
-                                    .reduce<string[]>((acc, row) => {
-                                        return [
-                                            ...acc,
-                                            // Use `innerHTML` instead of `innerText` to preserve
-                                            // potential formatting (e.g., GFM) within each cell
-                                            Array.from(row.cells)
-                                                .map((cell) => cell.innerHTML)
-                                                .join(' '),
-                                        ]
-                                    }, [])
-                                    // Discard rows that are completely empty
-                                    .filter((row) => row.trim().length > 0)
-                                    // Wrap each row in a paragraph
-                                    .map((row) => `<p>${row}</p>`)
-                                    .join('')
-                            )
-                        }, '')
-                    },
+                    transformPastedHTML,
                 },
             }),
         ]
     },
 })
 
-export { PasteHTMLTableAsString }
+export { PasteHTMLTableAsString, transformPastedHTML }