Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[lexical-list] Bug Fix: Ensure new paragraph node retains selection styling when exiting list #6917

Merged
merged 8 commits into from
Dec 10, 2024
Merged

[lexical-list] Bug Fix: Ensure new paragraph node retains selection styling when exiting list #6917

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
09f76ce
Ensure new paragraph node retains selection styling when exiting list
Dec 6, 2024
6c43d9b
Add e2e test
Dec 9, 2024
31c64c6
Merge branch 'main' into fix-paragraph-styling-on-list-exit
aleksandr-lapushkin Dec 9, 2024
a4a2256
Clean up
Dec 9, 2024
29eda8a
Merge branch 'main' into fix-paragraph-styling-on-list-exit
etrepum Dec 10, 2024
73b8cc0
Merge branch 'main' into fix-paragraph-styling-on-list-exit
etrepum Dec 10, 2024
cac7527
Resolve conflicts
etrepum Dec 10, 2024
fc0b067
Merge remote-tracking branch 'origin/main' into fix-paragraph-styling…
etrepum Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/lexical-list/src/LexicalListItemNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,7 +382,7 @@ export class ListItemNode extends ParagraphNode {
}

canMergeWith(node: LexicalNode): boolean {
return $isParagraphNode(node) || $isListItemNode(node);
return $isListItemNode(node) || $isParagraphNode(node);
}

extractWithChild(child: LexicalNode, selection: BaseSelection): boolean {
Expand Down
16 changes: 7 additions & 9 deletions packages/lexical-list/src/formatList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
$getSelection,
$isElementNode,
$isLeafNode,
$isParagraphNode,
$isRangeSelection,
$isRootOrShadowRoot,
ElementNode,
Expand Down Expand Up @@ -494,10 +493,12 @@ export function $handleListInsertParagraph(): boolean {
);

const grandparent = parent.getParent();
let replacementNode: ElementNode;
let replacementNode: ParagraphNode | ListItemNode;

if ($isRootOrShadowRoot(grandparent)) {
replacementNode = $createParagraphNode();
replacementNode.setTextStyle(selection.style);
replacementNode.setTextFormat(selection.format);
topListNode.insertAfter(replacementNode);
} else if ($isListItemNode(grandparent)) {
replacementNode = $createListItemNode();
Expand All @@ -511,17 +512,14 @@ export function $handleListInsertParagraph(): boolean {
const nextSiblings = anchor.getNextSiblings();
if (nextSiblings.length > 0) {
const newList = $createListNode(parent.getListType());
if ($isParagraphNode(replacementNode)) {
replacementNode.insertAfter(newList);
} else {
if ($isListItemNode(replacementNode)) {
const newListItem = $createListItemNode();
newListItem.append(newList);
replacementNode.insertAfter(newListItem);
} else {
replacementNode.insertAfter(newList);
}
nextSiblings.forEach((sibling) => {
sibling.remove();
newList.append(sibling);
});
newList.append(...nextSiblings);
}
// Don't leave hanging nested empty lists
$removeHighestEmptyListParent(anchor);
Expand Down
19 changes: 19 additions & 0 deletions packages/lexical-playground/__tests__/e2e/List.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
pasteFromClipboard,
repeat,
selectFromAlignDropdown,
selectFromColorPicker,
selectFromFormatDropdown,
test,
waitForSelector,
Expand Down Expand Up @@ -160,6 +161,24 @@ test.describe.parallel('Nested List', () => {
);
});

test('Should retain selection style when exiting list', async ({page}) => {
await focusEditor(page);
await toggleBulletList(page);

await selectFromColorPicker(page);
await toggleBold(page);
await page.keyboard.type('Hello');
//Double-enter to exit list
await page.keyboard.press('Enter');
await page.keyboard.press('Enter');
await page.keyboard.type('World');

await assertHTML(
page,
'<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" style="color: rgb(208, 2, 27)" data-lexical-text="true">Hello</strong></li></ul><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" style="color: rgb(208, 2, 27)" data-lexical-text="true">World</strong></p>',
);
});

test(`Can indent/outdent mutliple list nodes in a list with multiple levels of indentation`, async ({
page,
}) => {
Expand Down
Loading