Skip to content

Commit

Permalink
[lexical-table] Bug Fix: Append a ParagraphNode to each cell when unm…
Browse files Browse the repository at this point in the history 
…erging (#6556)
  • Loading branch information
@kmslab20
kmslab20 authored Aug 26, 2024
1 parent f06e146 commit c191687
Show file tree
Hide file tree
Showing 2 changed files with 189 additions and 7 deletions.
182 changes: 178 additions & 4 deletions packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
moveUp,
pressBackspace,
selectAll,
selectCharacters,
} from '../keyboardShortcuts/index.mjs';
import {
assertHTML,
Expand Down Expand Up @@ -1888,7 +1889,9 @@ test.describe.parallel('Tables', () => {
<span data-lexical-text="true">second</span>
</p>
</th>
<td class="PlaygroundEditorTheme__tableCell"><br /></td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
Expand Down Expand Up @@ -2007,15 +2010,21 @@ test.describe.parallel('Tables', () => {
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell"><br /></td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<td class="PlaygroundEditorTheme__tableCell"><br /></td>
<td class="PlaygroundEditorTheme__tableCell"><br /></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>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
Expand Down Expand Up @@ -3112,4 +3121,169 @@ test.describe.parallel('Tables', () => {
);
},
);

test('Paste and insert new lines after unmerging cells', async ({
page,
isPlainText,
isCollab,
}) => {
await initialize({isCollab, page});
test.skip(isPlainText);
if (IS_COLLAB) {
// The contextual menu positioning needs fixing (it's hardcoded to show on the right side)
page.setViewportSize({height: 1000, width: 3000});
}

await focusEditor(page);

await insertTable(page, 3, 3);

await selectCellsFromTableCords(
page,
{x: 1, y: 1},
{x: 2, y: 2},
false,
false,
);
await mergeTableCells(page);
await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<td
class="PlaygroundEditorTheme__tableCell"
colspan="2"
rowspan="2">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);

await unmergeTableCell(page);

await focusEditor(page);

// move caret to the end of the editor
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowDown');

await page.keyboard.type('Hello');
await selectCharacters(page, 'left', 'Hello'.length);

const clipboard = await copyToClipboard(page);

// move caret to the first position of the editor
await click(page, '.PlaygroundEditorTheme__paragraph');

// move caret to the table cell (2,2)
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('ArrowRight');
await page.keyboard.press('ArrowRight');

await pasteFromClipboard(page, clipboard);
await pasteFromClipboard(page, clipboard);
await pasteFromClipboard(page, clipboard);

await page.keyboard.press('Enter');
await page.keyboard.press('Enter');
await page.keyboard.press('Enter');

await pasteFromClipboard(page, clipboard);

await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</tr>
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
<td class="PlaygroundEditorTheme__tableCell">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
<td class="PlaygroundEditorTheme__tableCell">
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">HelloHelloHello</span>
</p>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">Hello</span>
</p>
</td>
</tr>
</table>
<p
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
dir="ltr">
<span data-lexical-text="true">Hello</span>
</p>
`,
);
});
});
14 changes: 11 additions & 3 deletions packages/lexical-table/src/LexicalTableUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -675,7 +675,11 @@ export function $unmergeCell(): void {
const rowSpan = cell.__rowSpan;
if (colSpan > 1) {
for (let i = 1; i < colSpan; i++) {
cell.insertAfter($createTableCellNode(TableCellHeaderStates.NO_STATUS));
cell.insertAfter(
$createTableCellNode(TableCellHeaderStates.NO_STATUS).append(
$createParagraphNode(),
),
);
}
cell.setColSpan(1);
}
Expand Down Expand Up @@ -706,13 +710,17 @@ export function $unmergeCell(): void {
for (let j = 0; j < colSpan; j++) {
$insertFirst(
currentRowNode,
$createTableCellNode(TableCellHeaderStates.NO_STATUS),
$createTableCellNode(TableCellHeaderStates.NO_STATUS).append(
$createParagraphNode(),
),
);
}
} else {
for (let j = 0; j < colSpan; j++) {
insertAfterCell.insertAfter(
$createTableCellNode(TableCellHeaderStates.NO_STATUS),
$createTableCellNode(TableCellHeaderStates.NO_STATUS).append(
$createParagraphNode(),
),
);
}
}
Expand Down

0 comments on commit c191687

Please sign in to comment.