[TablePlugin] Support table cell background styles

[dimaanj]

Summary

Add support for table cell background styles.

Before

https://github.com/udecode/plate/assets/39378793/09c94979-4638-4610-b420-b6e60aa0b6f1

After

https://github.com/udecode/plate/assets/39378793/752774eb-811f-4c76-964e-61868d7625d9

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 70fbf29c3aac47c3ab2784b2074a95289cb2f2b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@udecode/plate-table	Major
@udecode/plate-ui-table	Major
@udecode/plate-headless	Major
@udecode/plate-serializer-csv	Major
@udecode/plate-serializer-docx	Major
@udecode/plate-ui	Major
@udecode/plate	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
plate	❌ Failed (Inspect)			Jun 30, 2023 3:21pm
plate-examples	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 30, 2023 3:21pm
plate-udecode	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 30, 2023 3:21pm

[reviewpad[bot]]

AI-Generated Summary: This pull request introduces support for table cell background styles in the TablePlugin. A new property, 'background', has been added to the 'TTableCellElement' interface, which will store the background color of table cells. The 'getNode' method in 'createTablePlugin.ts' has been updated to include this background information during HTML deserialization. In 'PlateTableCellElement.tsx', the function 'getCssTableCellRoot' has been enhanced to apply this background color in the CSS properties. New functionality is accompanied by a changeset file for version tracking. Changes made are spread across 4 files including new additions and lines modified.

[ghost]

👇 Click on the image for a new way to code review

Legend

[zbeyens]

I'd merge #2403 before that one as we'll need to use this strategy https://github.com/udecode/plate/pull/2463#discussion_r1248000017

[12joan]

I think something like this could work without merging #2403, and be easy migratable afterwards, although you'd have to apply the style prop outside the function that returns a CSSProp.

css={[
  css`
    ::before {
      background-color: var(--background);
    }
  `
]}
style={{
  '--background': userSpecifiedValue,
} /* as any (if required) */}

[12joan]

Easier still if ::before turns out not to be necessary: style={{ backgroundColor: userSpecifiedValue }}.

[12joan]

It looks like Tailwind uses bg- for both background color and background image, so it would have the same problem where a malicious user could send someone a document that leaks their IP address or loads maliciously crafted images.

An arbitrary property would be safer once #2403 is merged.

before:[background-color:--background]

[zbeyens]

@dimaanj Now that Plate 22 is out, any plan to complete that PR?

[dimaanj]

@dimaanj Now that Plate 22 is out, any plan to complete that PR?

Yes, I will update it soon

[dimaanj]

Closing it, since #2536 created.