[lexical][Breaking Change][lexical-rich-text][lexical-playground] Feature: Support capitalization format

[bedre7]

Description

This PR aims to add capitalization formats to text formatting options. Most text editors support capitalization formats. Currently, there is no way to change the capitalization of a written text without rewriting it entirely. The new capitalization formats added are lowercase, uppercase, and capitalize.

The behavior of capitalization format in other editors such as Google Docs, is as follows:

1. A piece of text can be selected and its capitalization can be changed
2. If a capitalization format was activated, it should revert to default when the Enter, Space, or Tab keys are pressed.

Test plan

Unit tests and e2e tests have been added

Before

There was no option to change the capitalization of existing text; users had to rewrite the entire text.

After

A selection's capitalization can be changed, allowing users to easily switch between lowercase and uppercase formats without needing to rewrite the text.

support-capitalization.mp4

Acknowledgement

• @Shopiley for her neat contribution.
• @etrepum for his suggestion and guidance.

[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	Dec 14, 2024 6:22pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 14, 2024 6:22pm

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	31.2 KB (0%)
lexical - esm	31.04 KB (0%)
@lexical/rich-text - cjs	40.16 KB (0%)
@lexical/rich-text - esm	32.95 KB (0%)
@lexical/plain-text - cjs	38.77 KB (0%)
@lexical/plain-text - esm	30.16 KB (0%)
@lexical/react - cjs	42.05 KB (0%)
@lexical/react - esm	34.24 KB (0%)

[etrepum]

I think overall this looks great, but it would also make sense to support Title Case (text-transform: capitalize). Screenshot of Google Docs for reference:

[bedre7]

I think overall this looks great, but it would also make sense to support Title Case (text-transform: capitalize). Screenshot of Google Docs for reference:

Thanks for the feedback, that's a good point. I had implemented Title Case at first but then I realized there is an edge case that needs to be addressed. Unfortunately, text-transform: capitalize only capitalizes the first letter of each word, leaving the rest of the characters unchanged (for example: hELLO wORLD ends up being HELLO WORLD when it should have been Hello World). The only workaround I could find was converting the selection text to lowercase first, then the text-transform CSS property would work as expected. If this is acceptable, I'm happy to add it. What do you think?

Reference to the workaround I mentioned: https://stackoverflow.com/a/13793667/14920149

[bedre7]

Hi @etrepum, it's now ready for review.

[etrepum]

Looks great! The only thing I noticed was a missing 'capitalize' in the flow type, but I committed a fix for that. Will merge once I see what the test run looks like just to be sure.