Skip to content

Commit

Permalink
[lexical-table][lexical-playground] Bug Fix: Fix merged cell related …
Browse files Browse the repository at this point in the history 
…edge cases (#6607)
  • Loading branch information
@etrepum
etrepum authored Sep 7, 2024
1 parent 8a3eb11 commit 8d01b99
Show file tree
Hide file tree
Showing 7 changed files with 361 additions and 212 deletions.
304 changes: 220 additions & 84 deletions packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -665,91 +665,93 @@ test.describe.parallel('Tables', () => {
});
});

test(`Can select cells using Table selection`, async ({
page,
isPlainText,
isCollab,
}) => {
await initialize({isCollab, page});
test.skip(isPlainText);
test(
`Can select cells using Table selection`,
{
tag: '@flaky',
},
async ({page, isPlainText, isCollab}) => {
await initialize({isCollab, page});
test.skip(isPlainText);

await focusEditor(page);
await insertTable(page, 2, 3);
await focusEditor(page);
await insertTable(page, 2, 3);

await fillTablePartiallyWithText(page);
await selectCellsFromTableCords(
page,
{x: 0, y: 0},
{x: 1, y: 1},
true,
false,
);
await fillTablePartiallyWithText(page);
await selectCellsFromTableCords(
page,
{x: 0, y: 0},
{x: 1, y: 1},
true,
false,
);

await assertHTML(
page,
html`
<p><br /></p>
<table>
<tr>
<th
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p dir="ltr"><span data-lexical-text="true">a</span></p>
</th>
<th
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p dir="ltr"><span data-lexical-text="true">bb</span></p>
</th>
<th>
<p dir="ltr"><span data-lexical-text="true">cc</span></p>
</th>
</tr>
<tr>
<th
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p dir="ltr"><span data-lexical-text="true">d</span></p>
</th>
<td
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p dir="ltr"><span data-lexical-text="true">e</span></p>
</td>
<td>
<p dir="ltr"><span data-lexical-text="true">f</span></p>
</td>
</tr>
</table>
<p><br /></p>
`,
html`
<p><br /></p>
<table>
<tr>
<th>
<p dir="ltr"><span data-lexical-text="true">a</span></p>
</th>
<th>
<p dir="ltr"><span data-lexical-text="true">bb</span></p>
</th>
<th>
<p dir="ltr"><span data-lexical-text="true">cc</span></p>
</th>
</tr>
<tr>
<th>
<p dir="ltr"><span data-lexical-text="true">d</span></p>
</th>
<td>
<p dir="ltr"><span data-lexical-text="true">e</span></p>
</td>
<td>
<p dir="ltr"><span data-lexical-text="true">f</span></p>
</td>
</tr>
</table>
<p><br /></p>
`,
{ignoreClasses: true},
);
});
await assertHTML(
page,
html`
<p><br /></p>
<table>
<tr>
<th
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p dir="ltr"><span data-lexical-text="true">a</span></p>
</th>
<th
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p dir="ltr"><span data-lexical-text="true">bb</span></p>
</th>
<th>
<p dir="ltr"><span data-lexical-text="true">cc</span></p>
</th>
</tr>
<tr>
<th
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p dir="ltr"><span data-lexical-text="true">d</span></p>
</th>
<td
style="background-color: rgb(172, 206, 247); caret-color: transparent">
<p dir="ltr"><span data-lexical-text="true">e</span></p>
</td>
<td>
<p dir="ltr"><span data-lexical-text="true">f</span></p>
</td>
</tr>
</table>
<p><br /></p>
`,
html`
<p><br /></p>
<table>
<tr>
<th>
<p dir="ltr"><span data-lexical-text="true">a</span></p>
</th>
<th>
<p dir="ltr"><span data-lexical-text="true">bb</span></p>
</th>
<th>
<p dir="ltr"><span data-lexical-text="true">cc</span></p>
</th>
</tr>
<tr>
<th>
<p dir="ltr"><span data-lexical-text="true">d</span></p>
</th>
<td>
<p dir="ltr"><span data-lexical-text="true">e</span></p>
</td>
<td>
<p dir="ltr"><span data-lexical-text="true">f</span></p>
</td>
</tr>
</table>
<p><br /></p>
`,
{ignoreClasses: true},
);
},
);

test(`Can select cells using Table selection via keyboard`, async ({
page,
Expand Down Expand Up @@ -1889,9 +1891,10 @@ test.describe.parallel('Tables', () => {
<span data-lexical-text="true">second</span>
</p>
</th>
<td class="PlaygroundEditorTheme__tableCell">
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</td>
</th>
</tr>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
Expand Down Expand Up @@ -2252,6 +2255,139 @@ test.describe.parallel('Tables', () => {
);
});

test('Merge multiple merged cells and then unmerge', async ({
page,
isPlainText,
isCollab,
}) => {
await initialize({isCollab, page});
test.skip(isPlainText);

await focusEditor(page);

await insertTable(page, 3, 3);

await click(page, '.PlaygroundEditorTheme__tableCell');
await moveDown(page, 1);
await selectCellsFromTableCords(
page,
{x: 0, y: 0},
{x: 0, y: 1},
true,
true,
);
await mergeTableCells(page);

await moveRight(page, 1);
await selectCellsFromTableCords(
page,
{x: 1, y: 0},
{x: 2, y: 0},
true,
true,
);
await mergeTableCells(page);

await selectCellsFromTableCords(
page,
{x: 0, y: 0},
{x: 1, y: 0},
true,
true,
);
await mergeTableCells(page);

await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
colspan="3"
rowspan="2">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
<tr><br /></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>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);

await selectCellsFromTableCords(
page,
{x: 0, y: 0},
{x: 0, y: 0},
true,
true,
);
await unmergeTableCell(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>
<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>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
});

test('Insert row above (with conflicting merged cell)', async ({
page,
isPlainText,
Expand Down
5 changes: 4 additions & 1 deletion packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,10 @@ export const TABLE: ElementTransformer = {
if (!$isTableCellNode(cell)) {
return;
}
cell.toggleHeaderStyle(TableCellHeaderStates.ROW);
cell.setHeaderStyles(
TableCellHeaderStates.ROW,
TableCellHeaderStates.ROW,
);
});

// Remove line
Expand Down
Loading

0 comments on commit 8d01b99

Please sign in to comment.