Skip to content

Commit

Permalink
[lexical-react]: Fix incorrect addition of empty cells on table paste (…
Browse files Browse the repository at this point in the history 
…#6578)

Co-authored-by: ssrivasta196 <ssrivasta196@bloomberg.net>
  • Loading branch information
@Shubhankerism
Shubhankerism and ssrivasta196 committed Sep 1, 2024
1 parent 96e2767 commit f07f0d6
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 8 deletions.
150 changes: 150 additions & 0 deletions packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -572,4 +572,154 @@ test.describe('HTML Tables CopyAndPaste', () => {
`,
);
});

test('Copy + paste table with merged cells and unequal number of cells in rows', async ({
page,
isPlainText,
isCollab,
}) => {
test.skip(isPlainText);

await focusEditor(page);
const clipboard = {
'text/html': html`
123
<table>
<tr>
<td colspan="2">
<p>
<span>1</span>
</p>
</td>
<td>
<p>
<span>2</span>
</p>
</td>
<td>
<p>
<span>3</span>
</p>
</td>
<td>
<p>
<span>4</span>
</p>
</td>
</tr>
<tr>
<td rowspan="4">
<p>
<span>7</span>
</p>
</td>
</tr>
<tr>
<td>
<p>
<span>8</span>
</p>
</td>
<td rowspan="2">
<p>
<span>9</span>
</p>
</td>
</tr>
<tr>
<td>
<p>
<span>0</span>
</p>
</td>
</tr>
</table>
`,
};

await pasteFromClipboard(page, clipboard);

await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">123</span>
</p>
<table class="PlaygroundEditorTheme__table">
<tr>
<td class="PlaygroundEditorTheme__tableCell" colspan="2">
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">1</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">2</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">3</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">4</span>
</p>
</td>
</tr>
<tr>
<td class="PlaygroundEditorTheme__tableCell" rowspan="4">
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">7</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
<tr>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">8</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell" rowspan="2">
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">9</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
<tr>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph">
<span data-lexical-text="true">0</span>
</p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
</table>
`,
);
});
});
18 changes: 10 additions & 8 deletions packages/lexical-react/src/LexicalTablePlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,22 +87,24 @@ export function TablePlugin({
const maxRowLength = gridMap.reduce((curLength, row) => {
return Math.max(curLength, row.length);
}, 0);
const rowNodes = node.getChildren();
for (let i = 0; i < gridMap.length; ++i) {
const rowLength = gridMap[i].length;
const rowNode = rowNodes[i];
if (!rowNode) {
continue;
}
const rowLength = gridMap[i].reduce(
(acc, cell) => (cell ? 1 + acc : acc),
0,
);
if (rowLength === maxRowLength) {
continue;
}
const lastCellMap = gridMap[i][rowLength - 1];
const lastRowCell = lastCellMap.cell;
for (let j = rowLength; j < maxRowLength; ++j) {
// TODO: inherit header state from another header or body
const newCell = $createTableCellNode(0);
newCell.append($createParagraphNode());
if (lastRowCell !== null) {
lastRowCell.insertAfter(newCell);
} else {
$insertFirst(lastRowCell, newCell);
}
(rowNode as TableRowNode).append(newCell);
}
}
}),
Expand Down

0 comments on commit f07f0d6

Please sign in to comment.