fix(paste): improve table pasting

Author: harbournick

packages/super-editor/src/core/InputRule.js

@@ -264,6 +264,64 @@ function findParagraphAncestor($from) {
   return { node: null, depth: -1 };
 }
 
+/**
+ * @param {import('prosemirror-model').Node} tableRow
+ * @returns {string}
+ */
+function getTableRowSignature(tableRow) {
+  const parts = [];
+  tableRow.forEach((cell) => {
+    parts.push(`${cell.attrs?.colspan ?? 1}:${cell.attrs?.rowspan ?? 1}`);
+  });
+  return parts.join('|');
+}
+
+/**
+ * Browser "highlight copy" can emit table-like HTML where each visual row
+ * becomes an independent table element. Merge adjacent compatible tables back
+ * into one table so table editing features (cell selection, resizing) work.
+ *
+ * @param {import('prosemirror-model').Node} doc
+ * @returns {import('prosemirror-model').Node}
+ */
+function mergeAdjacentTableFragments(doc) {
+  if (!doc?.childCount) return doc;
+
+  /** @type {import('prosemirror-model').Node[]} */
+  const mergedChildren = [];
+
+  doc.forEach((child) => {
+    const previous = mergedChildren[mergedChildren.length - 1];
+
+    if (child.type.name !== 'table' || previous?.type.name !== 'table') {
+      mergedChildren.push(child);
+      return;
+    }
+
+    const previousFirstRow = previous.firstChild;
+    const currentFirstRow = child.firstChild;
+    if (!previousFirstRow || !currentFirstRow) {
+      mergedChildren.push(child);
+      return;
+    }
+
+    const previousColumnShape = getTableRowSignature(previousFirstRow);
+    const currentColumnShape = getTableRowSignature(currentFirstRow);
+    if (previousColumnShape !== currentColumnShape) {
+      mergedChildren.push(child);
+      return;
+    }
+
+    const combinedRows = [];
+    previous.forEach((row) => combinedRows.push(row));
+    child.forEach((row) => combinedRows.push(row));
+
+    mergedChildren[mergedChildren.length - 1] = previous.type.create(previous.attrs, combinedRows, previous.marks);
+  });
+
+  return doc.copy(Fragment.fromArray(mergedChildren));
+}
+
 /**
  * Handle HTML paste events.
  *
@@ -277,7 +335,14 @@ export function handleHtmlPaste(html, editor, source) {
   if (source === 'google-docs') cleanedHtml = handleGoogleDocsHtml(html, editor);
   else cleanedHtml = htmlHandler(html, editor);
 
+  // Mark pasted HTML as import content so table parseDOM rules can apply
+  // import defaults (e.g., default table width to 100%).
+  if (cleanedHtml?.dataset) {
+    cleanedHtml.dataset.superdocImport = 'true';
+  }
+
   let doc = PMDOMParser.fromSchema(editor.schema).parse(cleanedHtml);
+  doc = mergeAdjacentTableFragments(doc);
 
   doc = wrapTextsInRuns(doc);
 

packages/super-editor/src/core/InputRule.paste-table.integration.test.js

@@ -0,0 +1,90 @@
+import { beforeAll, afterEach, describe, expect, it } from 'vitest';
+import { handleClipboardPaste, handleHtmlPaste } from './InputRule.js';
+import { initTestEditor, loadTestDataForEditorTests } from '../tests/helpers/helpers.js';
+
+let docData;
+let editor;
+
+beforeAll(async () => {
+  docData = await loadTestDataForEditorTests('blank-doc.docx');
+});
+
+afterEach(() => {
+  editor?.destroy();
+  editor = null;
+});
+
+describe('handleHtmlPaste table import defaults', () => {
+  it('defaults pasted HTML tables to 100% width', () => {
+    ({ editor } = initTestEditor({
+      content: docData.docx,
+      media: docData.media,
+      mediaFiles: docData.mediaFiles,
+      fonts: docData.fonts,
+      mode: 'docx',
+    }));
+
+    const handled = handleHtmlPaste(
+      '<table><tbody><tr><td>Query</td><td>Assessment</td></tr><tr><td>A</td><td>B</td></tr></tbody></table>',
+      editor,
+    );
+
+    expect(handled).toBe(true);
+
+    const tableNode = (editor.getJSON().content || []).find((node) => node.type === 'table');
+    expect(tableNode).toBeTruthy();
+    expect(tableNode?.attrs?.tableProperties?.tableWidth).toEqual({
+      value: 5000,
+      type: 'pct',
+    });
+  });
+
+  it('defaults Google Docs HTML tables to 100% width', () => {
+    ({ editor } = initTestEditor({
+      content: docData.docx,
+      media: docData.media,
+      mediaFiles: docData.mediaFiles,
+      fonts: docData.fonts,
+      mode: 'docx',
+    }));
+
+    const handled = handleClipboardPaste(
+      { editor, view: editor.view },
+      '<div docs-internal-guid-test><table><tbody><tr><td>Query</td><td>Assessment</td></tr><tr><td>A</td><td>B</td></tr></tbody></table></div>',
+    );
+
+    expect(handled).toBe(true);
+
+    const tableNode = (editor.getJSON().content || []).find((node) => node.type === 'table');
+    expect(tableNode).toBeTruthy();
+    expect(tableNode?.attrs?.tableProperties?.tableWidth).toEqual({
+      value: 5000,
+      type: 'pct',
+    });
+  });
+
+  it('merges fragmented pasted HTML tables into a single editable table', () => {
+    ({ editor } = initTestEditor({
+      content: docData.docx,
+      media: docData.media,
+      mediaFiles: docData.mediaFiles,
+      fonts: docData.fonts,
+      mode: 'docx',
+    }));
+
+    const fragmentedHtml = `
+      <table><tbody><tr><th>Name</th><th>Role</th><th>Department</th><th>Start Date</th></tr></tbody></table>
+      <table><tbody><tr><td>Alice Kim</td><td>Manager</td><td>Operations</td><td>2022-03-14</td></tr></tbody></table>
+      <table><tbody><tr><td>Brian Lee</td><td>Developer</td><td>Engineering</td><td>2023-01-09</td></tr></tbody></table>
+      <table><tbody><tr><td>Carla Gomez</td><td>Designer</td><td>Product</td><td>2021-11-22</td></tr></tbody></table>
+      <table><tbody><tr><td>David Chen</td><td>Analyst</td><td>Finance</td><td>2024-06-03</td></tr></tbody></table>
+    `;
+
+    const handled = handleHtmlPaste(fragmentedHtml, editor);
+    expect(handled).toBe(true);
+
+    const tables = (editor.getJSON().content || []).filter((node) => node.type === 'table');
+    expect(tables).toHaveLength(1);
+    expect(tables[0]?.content).toHaveLength(5);
+  });
+});

packages/super-editor/src/core/commands/insertContent.test.js

@@ -295,6 +295,19 @@ describe('insertContent (integration) list export', () => {
     });
   });
 
+  it('defaults imported markdown tables to 100% width', async () => {
+    const editor = await setupEditor();
+    editor.commands.insertContent('| Query | Assessment |\n| --- | --- |\n| A | B |', { contentType: 'markdown' });
+    await Promise.resolve();
+
+    const tableNode = (editor.getJSON().content || []).find((node) => node.type === 'table');
+    expect(tableNode).toBeTruthy();
+    expect(tableNode.attrs?.tableProperties?.tableWidth).toEqual({
+      value: 5000,
+      type: 'pct',
+    });
+  });
+
   it('normalizes imported HTML table header borders for render and export parity', async () => {
     const editor = await setupEditor();
     editor.commands.insertContent(

packages/super-editor/src/core/helpers/importMarkdown.integration.test.js

@@ -126,4 +126,19 @@ More text here.
     const numberedParagraphs = paragraphs.filter(hasNumbering);
     expect(numberedParagraphs).toHaveLength(2);
   });
+
+  it('defaults markdown tables to 100% width', () => {
+    const markdown = `| Query | Assessment |
+| --- | --- |
+| A | B |`;
+
+    const doc = createDocFromMarkdown(markdown, editor);
+    const firstTable = doc.content.content.find((node) => node.type.name === 'table');
+
+    expect(firstTable).toBeTruthy();
+    expect(firstTable?.attrs?.tableProperties?.tableWidth).toEqual({
+      value: 5000,
+      type: 'pct',
+    });
+  });
 });

packages/super-editor/src/core/helpers/markdown/mdastToProseMirror.ts

@@ -64,6 +64,10 @@ interface JsonMark {
   attrs?: Record<string, unknown>;
 }
 
+// OOXML stores percentages in fiftieths of a percent.
+// 5000 = 100% table width.
+const FULL_WIDTH_TABLE_PCT = 5000;
+
 // ---------------------------------------------------------------------------
 // Block-level converters
 // ---------------------------------------------------------------------------
@@ -299,6 +303,14 @@ function convertTable(node: MdastTable, ctx: MdastConversionContext): JsonNode {
 
   return {
     type: 'table',
+    attrs: {
+      tableProperties: {
+        tableWidth: {
+          value: FULL_WIDTH_TABLE_PCT,
+          type: 'pct',
+        },
+      },
+    },
     content: rows,
   };
 }

packages/super-editor/src/core/inputRules/google-docs-paste/google-docs-paste.js

@@ -23,6 +23,7 @@ export const handleGoogleDocsHtml = (html, editor, view) => {
 
   const htmlWithMergedLists = mergeSeparateLists(tempDiv);
   const flattenHtml = flattenListsInHtml(htmlWithMergedLists, editor);
+  flattenHtml.dataset.superdocImport = 'true';
 
   let doc = DOMParser.fromSchema(editor.schema).parse(flattenHtml);
   doc = wrapTextsInRuns(doc);

packages/super-editor/src/core/inputRules/google-docs-paste/google-docs-paste.test.js

@@ -82,6 +82,7 @@ describe('handleGoogleDocsHtml', () => {
     expect(generateNewListDefinitionMock).toHaveBeenCalledTimes(2);
 
     const parsedNode = parseSpy.mock.calls[0][0];
+    expect(parsedNode.dataset.superdocImport).toBe('true');
     const paragraphs = Array.from(parsedNode.querySelectorAll('p[data-num-id]'));
     expect(paragraphs).toHaveLength(2);
     expect(paragraphs[0].getAttribute('data-num-id')).toBe('410');