[lexical-selection] Bug Fix / Fixes text formatting with segmented and token nodes #6059

[lacroixdavid1]

Description

It is currently only possible to format token nodes by selecting them entirely. They won't be formatted if they are in the middle of the range selection. Also, if the selection offset is in the middle of the node, it will split the node.

This PR ensures middle nodes are formated, just like when selecting them entirely. Also, it prevents breaking segmented or token nodes in the middle of the text where they shouldn't be allowed.

#6059

Test plan

Added unit tests to the PR. See LexicalSelection.test.tsx.

Before

• Formatting text in the middle of a segmented or token text node was splitting the node.
• Formatting range selection with a segmented or token node in the middle was not formatting the node.

After

• Formatting text in the middle of a segmented or token text node is not splitting the node anymore. It is formatting the whole node.
• Formatting range selection with a segmented or token node in the middle now formats the node.

[vercel]

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	May 8, 2024 4:19pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2024 4:19pm

[facebook-github-bot]

Hi @lacroixdavid1!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[ivailop7]

This looks interesting, never stumbled upon this issue. For @Sahejkm @zurfyx and @potatowagon to comment,

[Sahejkm]

Formatting text in the middle of a segmented or token text node was splitting the node.

Not sure how other editors handle it in general, currently GDocs doesn't even allow partial selection of @mention node, would it be ok to assume partial selection as full selection from formatting point of view ? @zurfyx wdyt ?

Formatting range selection with a segmented or token node in the middle was not formatting the node.

@lacroixdavid1 could you help explain this scenario via a video recording ? Thanks!

[acywatson]

@lacroixdavid1 could you help explain this scenario via a video recording ? Thanks!

It's pretty easy to repro the issue on the playground by just inserting a mention, selecting it partially, and applying bold format.

[acywatson]

I think these are actually probably the correct semantics for token/segmented nodes. The whole point of these is that they are a single "unit" and are interacted with as such from a creation/deletion standpoint.

The only other way I could think to deal with this would be to treat the styled portion of the node as and additional segment, rather than splitting the node and removing the token/segmented characteristics entirely.

[acywatson]

I'm good with this, but would like a second pair of eyes given that core selection is particularly prone to cause widespread issues.

[lacroixdavid1]

Formatting range selection with a segmented or token node in the middle was not formatting the node. @lacroixdavid1 could you help explain this scenario via a video recording ? Thanks!

For the following example, the MentionNode was changed from segmented to token.

Before

After

[julienmouyal]

Any progress on this one? Seems like a great improvement. Thanks!

[ivailop7]

LGTM, @zurfyx to sign off as well

[lacroixdavid1]

Any chances of getting this one merged into 0.15.1? 🙏 pls

[zurfyx]

Thank you, this makes a lot of sense! This actually makes me realize that we should recheck if there's any other codepath that can potentially mangle a segmented node like this. Segmented nodes should only segment in one way, separators, you shouldn't be able to split a Mention node arbritrary (at least not via user-input).

[lacroixdavid1]

Thank you, guys. Lexical is very solid and has a bright future.

[Patrascu-Lucian]

Thank you for this change!

It works very well, I found only one issue regarding:
Formatting range selection with a segmented or token node in the middle now formats the node.
This doesn't work when formatting text color