facebook
[lexical-table] Bug Fix: table cell background copy paste not working
Description
While copy pasting a table cell with backgruond color, the backgruond color doesnt carry forward with the table details
Test plan
Before
https://github.com/user-attachments/assets/25566569-33e2-4753-b990-eb1b99a6e264
After
https://github.com/user-attachments/assets/746f285c-56f9-479c-aa94-57ab6421cade
Insert relevant screenshots/recordings/automated-tests
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 22, 2025 6:50am |
| lexical-playground | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | May 22, 2025 6:50am |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hi @jvithlani!
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!
You'll need to sign the CLA before we can run the tests and possibly merge this PR
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!
It doesn't look like this change passes the existing e2e test suite (possibly because the tests should change to accommodate this new behavior), and there are no new tests that verify that it works now. Further work will have to be done here before it can be merged.
Hey @ivailop7, yes ill wrap this up, was a little caught up. Will finish it this week
@ivailop7 @etrepum i see unrelated tests failing, which are working fine on local, can you guys help me fix it
Doesn’t look unrelated? This is the failing test
[chromium] › packages/lexical-playground/tests/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs:351:3 › HTML Tables CopyAndPaste › Copy + paste - Merge Grids
@etrepum i need some help here, i had left this as it looked like a longer debug. I went through the flow, as im trying to mutate the node by setting the background color, a new dom element is being created and replaced, which doesnt have the TableCellSelected class. This was working fine till now as no properties are being imported on pasting.
My concern here is although the table is still selected in the lexical's selection, why didnt the tableObserver update the classes of the new DOM created in the tableCell, i also tried adding a
$updateDOMForSelection(editor, tableObserver.getTable(), selection);
but this also doesnt help, any help would be much appreciated
@jvithlani the tests are still failing.
Edit: Nevermind, I see Bob has commented on this already.
I probably won’t have time to look into this for a few days, this level of question is basically asking me to fix it. It’s a long holiday weekend in the US.
The reason why the DOM for those cells is being recreated is because updateDOM is returning true due to the background color change. TableCellNode doesn't implement the optimization where the DOM is updated in-place rather than recreated, it simply throws away the DOM whenever anything changes and recreates it. The DOM does need to be recreated when the tag changes (e.g. td to th) but otherwise more code could be added here to implement that optimization.
$updateDOMForSelection isn't working correctly here because it's built with the assumption that these cells aren't also changing identity. It should probably be implemented as a mutation listener or something like that so that these updates take place after the DOM for those elements are reconciled. This is the result of incorrect code being refactored to fix bugs rather than rearchitected to be correct.