[lexical-table] Bug Fix: get table-cell background selection color from a class

[hamza221]

Description

Get table-cell background selection styles from a theme class tableCellSelected instead of directly updating the styles of the table cell nodes.

In order to upgrade to this version, you will need to add some CSS like this:

.PlaygroundEditorTheme__tableCellSelected {
  caret-color: transparent;
}
.PlaygroundEditorTheme__tableCellSelected::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgb(172, 206, 247);
  opacity: 0.6;
  content: '';
  pointer-events: none;
}

The following unused theme properties were removed:

• tableCellEditing
• tableCellPrimarySelected
• tableCellSortedIndicator
• tableResizeRuler

Closes #6655

After

table-selection-css.mov

Test plan

Existing tests were modified to no longer expect the styles to be added.

[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	Nov 24, 2024 8:38pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 24, 2024 8:38pm

[facebook-github-bot]

Hi @hamza221!

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!

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	30.91 KB (0%)
lexical - esm	30.79 KB (0%)
@lexical/rich-text - cjs	39.62 KB (0%)
@lexical/rich-text - esm	32.65 KB (0%)
@lexical/plain-text - cjs	38.21 KB (0%)
@lexical/plain-text - esm	29.93 KB (0%)
@lexical/react - cjs	41.34 KB (0%)
@lexical/react - esm	34 KB (0%)

[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!

[hamza221]

• I left the old logic in, because I'm not sure about another way to set a default value (new to the code base)
• I'll update the failing tests once the logic gets approved

[ivailop7]

The CSS class is probably a leftover from the experimental table, which we deleted a year/year and a half ago. I think it's fine to reuse that CSS class, I did the same with reintroducing the hover add column/row buttons and reusing the existing CSS classes. I'm not in favour of adding an extra override CSS class, as long as you pick the CSS class name from the config.theme object use the existing CSS Class, also +1 for the test.

[etrepum]

I agree that an override class is not necessary. Should be up to the user to make sure their configuration of classes and styles composes correctly.

[matveeva-as]

Would be great to see this fix in the next release!

[ivailop7]

@hamza221 are you interested in finishing this one?

[hamza221]

I'll send a commit tomorrow

[etrepum]

I'll take a look at finishing this after #6759

[hamza221]

Thank you @etrepum

[etrepum]

@ivailop7 might want to take a look at this one

[ivailop7]

LGTM