diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs index efe46564db1..520b08552c5 100644 --- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs @@ -119,9 +119,9 @@ test.describe('HTML Tables CopyAndPaste', () => { html` - - - + + + '; expect(testEnv.innerHTML).toBe( - `
diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts index 90031636d26..be988c5af96 100644 --- a/packages/lexical-table/src/LexicalTableNode.ts +++ b/packages/lexical-table/src/LexicalTableNode.ts @@ -29,6 +29,7 @@ import { ElementNode, } from 'lexical'; +import {PIXEL_VALUE_REG_EXP} from './constants'; import {$isTableCellNode, TableCellNode} from './LexicalTableCellNode'; import {TableDOMCell, TableDOMTable} from './LexicalTableObserver'; import {TableRowNode} from './LexicalTableRowNode'; @@ -358,6 +359,21 @@ export function $convertTableElement( if (domNode.hasAttribute('data-lexical-row-striping')) { tableNode.setRowStriping(true); } + const colGroup = domNode.querySelector(':scope > colgroup'); + if (colGroup) { + let columns: number[] | undefined = []; + for (const col of colGroup.querySelectorAll(':scope > col')) { + const width = (col as HTMLElement).style.width; + if (!width || !PIXEL_VALUE_REG_EXP.test(width)) { + columns = undefined; + break; + } + columns.push(parseFloat(width)); + } + if (columns) { + tableNode.setColWidths(columns); + } + } return {node: tableNode}; } diff --git a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx index fb1d9af2332..570ac0e9ed2 100644 --- a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx +++ b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx @@ -114,7 +114,7 @@ describe('LexicalTableNode tests', () => { const dataTransfer = new DataTransferMock(); dataTransfer.setData( 'text/html', - '

Hello there

General Kenobi!

Lexical is nice


', + '

Hello there

General Kenobi!

Lexical is nice


', ); await editor.update(() => { const selection = $getSelection(); @@ -127,7 +127,7 @@ describe('LexicalTableNode tests', () => { // Make sure paragraph is inserted inside empty cells const emptyCell = '


${emptyCell}

Hello there

General Kenobi!

Lexical is nice

`, + `${emptyCell}

Hello there

General Kenobi!

Lexical is nice

`, ); });