Skip to content

Commit c191687

Browse files
kmslab20kmslab20
authored
[lexical-table] Bug Fix: Append a ParagraphNode to each cell when unmerging (#6556)
1 parent f06e146 commit c191687

File tree

2 files changed

+189
-7
lines changed

2 files changed

+189
-7
lines changed

‎packages/lexical-playground/__tests__/e2e/Tables.spec.mjs‎

Lines changed: 178 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
moveUp,
1616
pressBackspace,
1717
selectAll,
18+
selectCharacters,
1819
} from '../keyboardShortcuts/index.mjs';
1920
import {
2021
assertHTML,
@@ -1888,7 +1889,9 @@ test.describe.parallel('Tables', () => {
18881889
<span data-lexical-text="true">second</span>
18891890
</p>
18901891
</th>
1891-
<td class="PlaygroundEditorTheme__tableCell"><br /></td>
1892+
<td class="PlaygroundEditorTheme__tableCell">
1893+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
1894+
</td>
18921895
</tr>
18931896
</table>
18941897
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
@@ -2007,15 +2010,21 @@ test.describe.parallel('Tables', () => {
20072010
<td class="PlaygroundEditorTheme__tableCell">
20082011
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
20092012
</td>
2010-
<td class="PlaygroundEditorTheme__tableCell"><br /></td>
2013+
<td class="PlaygroundEditorTheme__tableCell">
2014+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
2015+
</td>
20112016
</tr>
20122017
<tr>
20132018
<th
20142019
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
20152020
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
20162021
</th>
2017-
<td class="PlaygroundEditorTheme__tableCell"><br /></td>
2018-
<td class="PlaygroundEditorTheme__tableCell"><br /></td>
2022+
<td class="PlaygroundEditorTheme__tableCell">
2023+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
2024+
</td>
2025+
<td class="PlaygroundEditorTheme__tableCell">
2026+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
2027+
</td>
20192028
</tr>
20202029
</table>
20212030
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
@@ -3112,4 +3121,169 @@ test.describe.parallel('Tables', () => {
31123121
);
31133122
},
31143123
);
3124+
3125+
test('Paste and insert new lines after unmerging cells', async ({
3126+
page,
3127+
isPlainText,
3128+
isCollab,
3129+
}) => {
3130+
await initialize({isCollab, page});
3131+
test.skip(isPlainText);
3132+
if (IS_COLLAB) {
3133+
// The contextual menu positioning needs fixing (it's hardcoded to show on the right side)
3134+
page.setViewportSize({height: 1000, width: 3000});
3135+
}
3136+
3137+
await focusEditor(page);
3138+
3139+
await insertTable(page, 3, 3);
3140+
3141+
await selectCellsFromTableCords(
3142+
page,
3143+
{x: 1, y: 1},
3144+
{x: 2, y: 2},
3145+
false,
3146+
false,
3147+
);
3148+
await mergeTableCells(page);
3149+
await assertHTML(
3150+
page,
3151+
html`
3152+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3153+
<table class="PlaygroundEditorTheme__table">
3154+
<tr>
3155+
<th
3156+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3157+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3158+
</th>
3159+
<th
3160+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3161+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3162+
</th>
3163+
<th
3164+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3165+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3166+
</th>
3167+
</tr>
3168+
<tr>
3169+
<th
3170+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3171+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3172+
</th>
3173+
<td
3174+
class="PlaygroundEditorTheme__tableCell"
3175+
colspan="2"
3176+
rowspan="2">
3177+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3178+
</td>
3179+
</tr>
3180+
<tr>
3181+
<th
3182+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3183+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3184+
</th>
3185+
</tr>
3186+
</table>
3187+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3188+
`,
3189+
);
3190+
3191+
await unmergeTableCell(page);
3192+
3193+
await focusEditor(page);
3194+
3195+
// move caret to the end of the editor
3196+
await page.keyboard.press('ArrowDown');
3197+
await page.keyboard.press('ArrowDown');
3198+
await page.keyboard.press('ArrowDown');
3199+
await page.keyboard.press('ArrowDown');
3200+
3201+
await page.keyboard.type('Hello');
3202+
await selectCharacters(page, 'left', 'Hello'.length);
3203+
3204+
const clipboard = await copyToClipboard(page);
3205+
3206+
// move caret to the first position of the editor
3207+
await click(page, '.PlaygroundEditorTheme__paragraph');
3208+
3209+
// move caret to the table cell (2,2)
3210+
await page.keyboard.press('ArrowDown');
3211+
await page.keyboard.press('ArrowDown');
3212+
await page.keyboard.press('ArrowDown');
3213+
await page.keyboard.press('ArrowRight');
3214+
await page.keyboard.press('ArrowRight');
3215+
3216+
await pasteFromClipboard(page, clipboard);
3217+
await pasteFromClipboard(page, clipboard);
3218+
await pasteFromClipboard(page, clipboard);
3219+
3220+
await page.keyboard.press('Enter');
3221+
await page.keyboard.press('Enter');
3222+
await page.keyboard.press('Enter');
3223+
3224+
await pasteFromClipboard(page, clipboard);
3225+
3226+
await assertHTML(
3227+
page,
3228+
html`
3229+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3230+
<table class="PlaygroundEditorTheme__table">
3231+
<tr>
3232+
<th
3233+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3234+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3235+
</th>
3236+
<th
3237+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3238+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3239+
</th>
3240+
<th
3241+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3242+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3243+
</th>
3244+
</tr>
3245+
<tr>
3246+
<th
3247+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3248+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3249+
</th>
3250+
<td class="PlaygroundEditorTheme__tableCell">
3251+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3252+
</td>
3253+
<td class="PlaygroundEditorTheme__tableCell">
3254+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3255+
</td>
3256+
</tr>
3257+
<tr>
3258+
<th
3259+
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader">
3260+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3261+
</th>
3262+
<td class="PlaygroundEditorTheme__tableCell">
3263+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3264+
</td>
3265+
<td class="PlaygroundEditorTheme__tableCell">
3266+
<p
3267+
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
3268+
dir="ltr">
3269+
<span data-lexical-text="true">HelloHelloHello</span>
3270+
</p>
3271+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3272+
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
3273+
<p
3274+
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
3275+
dir="ltr">
3276+
<span data-lexical-text="true">Hello</span>
3277+
</p>
3278+
</td>
3279+
</tr>
3280+
</table>
3281+
<p
3282+
class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
3283+
dir="ltr">
3284+
<span data-lexical-text="true">Hello</span>
3285+
</p>
3286+
`,
3287+
);
3288+
});
31153289
});

‎packages/lexical-table/src/LexicalTableUtils.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -675,7 +675,11 @@ export function $unmergeCell(): void {
675675
const rowSpan = cell.__rowSpan;
676676
if (colSpan > 1) {
677677
for (let i = 1; i < colSpan; i++) {
678-
cell.insertAfter($createTableCellNode(TableCellHeaderStates.NO_STATUS));
678+
cell.insertAfter(
679+
$createTableCellNode(TableCellHeaderStates.NO_STATUS).append(
680+
$createParagraphNode(),
681+
),
682+
);
679683
}
680684
cell.setColSpan(1);
681685
}
@@ -706,13 +710,17 @@ export function $unmergeCell(): void {
706710
for (let j = 0; j < colSpan; j++) {
707711
$insertFirst(
708712
currentRowNode,
709-
$createTableCellNode(TableCellHeaderStates.NO_STATUS),
713+
$createTableCellNode(TableCellHeaderStates.NO_STATUS).append(
714+
$createParagraphNode(),
715+
),
710716
);
711717
}
712718
} else {
713719
for (let j = 0; j < colSpan; j++) {
714720
insertAfterCell.insertAfter(
715-
$createTableCellNode(TableCellHeaderStates.NO_STATUS),
721+
$createTableCellNode(TableCellHeaderStates.NO_STATUS).append(
722+
$createParagraphNode(),
723+
),
716724
);
717725
}
718726
}

0 commit comments

Comments
 (0)