Skip to content

[Breaking Change][lexical-list] Fix: Preserve original format after indenting list item #6912

Merged
zurfyx merged 31 commits intofacebook:mainfrom
citruscai:fix/list-indention-format-loss
Dec 10, 2024
Merged

[Breaking Change][lexical-list] Fix: Preserve original format after indenting list item #6912
zurfyx merged 31 commits intofacebook:mainfrom
citruscai:fix/list-indention-format-loss

Conversation

@citruscai
Copy link
Copy Markdown
Contributor

@citruscai citruscai commented Dec 5, 2024 •
edited by etrepum
Loading

Description

This PR fixes the issue of format from previous list item being lost when you indent the new list item.

Changes

  • Make ListItemNode inherit from ParagraphNode to have properties for text format
  • Set text format for new list item by getting the format from the selection

Upgrade Notes

The base class for ListItemNode has changed from ElementNode to ParagraphNode which may cause issues in limited situations if you have subclassed ListItemNode:

  • namespace collisions - if you subclass ListItemNode and add properties or methods that were already on ParagraphNode
  • serialization issues - if you have namespace collisions with ParagraphNode in your exportJSON

There may also be issues with type narrowing if you have code that checks $isParagraphNode(node) and expects this to be disjoint from $isListItemNode(node), e.g. this is now wrong:

// WRONG, all ListItemNode are ParagraphNode, so the latter condition never succeeds
if ($isParagraphNode(node)) {
  // do something for paragraphs
} else if ($isListItemNode(node)) {
 // do something for list nodes
}

But it can be fixed by re-ordering the conditions:

// CORRECT, all ListItemNode are ParagraphNode so we check the more specific type first!
if ($isListItemNode(node)) {
  // do something for list item nodes
} else if ($isParagraphNode(node)) {
  // do something for paragraph nodes
}
  • , or issues with type narrowing if you are

Closes #6476

Before

listindentbug.mp4

After

listindentfix.mp4

@vercel
Copy link
Copy Markdown

vercel bot commented Dec 5, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
lexical ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 10, 2024 1:45pm
lexical-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 10, 2024 1:45pm

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 5, 2024
@github-actions
Copy link
Copy Markdown

github-actions bot commented Dec 5, 2024 •
edited
Loading

size-limit report 📦

Path Size
lexical - cjs 31.11 KB (0%)
lexical - esm 30.98 KB (0%)
@lexical/rich-text - cjs 40.11 KB (0%)
@lexical/rich-text - esm 32.8 KB (0%)
@lexical/plain-text - cjs 38.68 KB (0%)
@lexical/plain-text - esm 30.11 KB (0%)
@lexical/react - cjs 42 KB (0%)
@lexical/react - esm 34.15 KB (0%)

etrepum
etrepum reviewed Dec 9, 2024
View reviewed changes
packages/lexical-list/src/formatList.ts Outdated
Comment on lines +245 to +250
const listItemNode = $getNearestNodeOfType(node, ListItemNode);
if ($isListItemNode(node)) {
const listItemNode = $getNearestNodeOfType(node, ListItemNode);

if (listItemNode != null) {
listNodes.add($getTopListNode(listItemNode));
if (listItemNode != null) {
listNodes.add($getTopListNode(listItemNode));
}
Copy link
Copy Markdown
Collaborator

@etrepum etrepum Dec 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this change is wrong. $isLeafNode(node) and $isListItemNode(node) are never true at the same time, so this block never does anything now. I guess there just isn't test coverage for what it's trying to do. Can you put this block back to the way it was and see if the tests still pass?

@etrepum etrepum mentioned this pull request Dec 9, 2024
Closed
@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Dec 9, 2024

I'm currently trying to get a clean test run, please don't do any updates unless you have a reason to change the code manually (clicking the update button will run all of the tests again which is slowing this review down)

@citruscai
Copy link
Copy Markdown
Contributor Author

citruscai commented Dec 9, 2024

I'm currently trying to get a clean test run, please don't do any updates unless you have a reason to change the code manually (clicking the update button will run all of the tests again which is slowing this review down)

no problem, sorry about that!

etrepum
etrepum approved these changes Dec 10, 2024
View reviewed changes
Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done!

@etrepum etrepum changed the title [lexical-list] Fix: Preserve original format after indenting list item [Breaking Change][lexical-list] Fix: Preserve original format after indenting list item Dec 10, 2024
@etrepum etrepum added this pull request to the merge queue Dec 10, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Dec 10, 2024
@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Dec 10, 2024

There's currently an issue with the merge queue settings that I don't have permissions to fix, but it will be merged when that is resolved. Please don't make any updates in the meantime.

@etrepum etrepum added this pull request to the merge queue Dec 10, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Dec 10, 2024
@zurfyx zurfyx added this pull request to the merge queue Dec 10, 2024
@zurfyx zurfyx removed this pull request from the merge queue due to a manual request Dec 10, 2024
@zurfyx zurfyx enabled auto-merge December 10, 2024 13:44
@zurfyx zurfyx added this pull request to the merge queue Dec 10, 2024
Merged via the queue into facebook:main with commit 49580d4 Dec 10, 2024
@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Dec 12, 2024 •
edited
Loading

This change was reverted in #6944 due to some compatibility issues internally at Meta with the change in class hierarchy. The majority of this change is good, but in order to have better backwards compatibility the most pragmatic approach will be to create a new base class common to ParagraphNode and ListItemNode that has the common functionality so that $isParagraphNode and $isListItemNode can remain disjoint. Since this is a bit involved I'll take a first pass at this sometime this week.

@etrepum etrepum mentioned this pull request Dec 12, 2024
Closed
etrepum added a commit to etrepum/lexical that referenced this pull request Dec 16, 2024
@etrepum
Add test from facebook#6912
d79d430
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@etrepum etrepum etrepum approved these changes

@zurfyx zurfyx Awaiting requested review from zurfyx zurfyx is a code owner

@fantactuka fantactuka Awaiting requested review from fantactuka fantactuka is a code owner

@acywatson acywatson Awaiting requested review from acywatson acywatson is a code owner

@Fetz Fetz Awaiting requested review from Fetz

@ivailop7 ivailop7 Awaiting requested review from ivailop7 ivailop7 is a code owner

@Sahejkm Sahejkm Awaiting requested review from Sahejkm

@potatowagon potatowagon Awaiting requested review from potatowagon potatowagon is a code owner

Assignees

No one assigned

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug: Selection formatting/styling is lost when you indent a list

4 participants

@citruscai @etrepum @zurfyx @facebook-github-bot