Skip to content

[Breaking Change][lexical-table] Bug Fix: Prevent nested tables#7192

Merged
etrepum merged 4 commits intofacebook:mainfrom
bgwebagency:fix/7154-prevent-nested-tables
Feb 17, 2025
Merged

[Breaking Change][lexical-table] Bug Fix: Prevent nested tables#7192
etrepum merged 4 commits intofacebook:mainfrom
bgwebagency:fix/7154-prevent-nested-tables

Conversation

@kirandash
Copy link
Copy Markdown
Contributor

@kirandash kirandash commented Feb 17, 2025

Description

Current behavior:

  • Tables can be nested inside table cells through both insertion and paste operations
  • This leads to unintended selection behavior where selecting cells in inner tables also selects outer table cells
  • Nested tables are not a supported use case as confirmed by @ivailop7

Changes being added:

  • Prevent table insertion inside table cells via INSERT_TABLE_COMMAND
  • Block table paste operations within cells via SELECTION_INSERT_CLIPBOARD_NODES_COMMAND
  • Add comprehensive test coverage:
    • Unit tests to verify command handlers in TablePlugin
    • E2E tests in Tables.spec.mjs to verify user interactions

Closes #7154

Breaking Changes

Nested tables have never worked correctly, but there was partial "support" for them in the code. While it may make sense to support them in the future, a safer default behavior is to prevent their use until the infrastructure is in place to support them.

Test plan

Before

lexical-7154-bug.mov

After

lexial-7154-fix.mov

Disable the ability to create nested tables by preventing:
- Table insertion inside table cells
- Table paste operations within cells

Fixes facebook#7154
@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Feb 17, 2025
@vercel
Copy link
Copy Markdown

vercel bot commented Feb 17, 2025

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 Feb 17, 2025 7:32pm
lexical-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 17, 2025 7:32pm

- Remove tests for nested table navigation since nested tables are no longer supported
- Add comment explaining the removal and referencing the issue

Fixes facebook#7154
@etrepum etrepum added the extended-tests Run extended e2e tests on a PR label Feb 17, 2025
@etrepum etrepum changed the title [lexical-table] Bug Fix: Prevent nested tables [Breaking Change][lexical-table] Bug Fix: Prevent nested tables Feb 17, 2025
Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks good but there are some simplifications we can apply before merge.

I think this is probably a net good change. It's small, isolated, has tests, and mostly prevents tables from being inserted in the UI without gutting the partial support for nested tables that exists elsewhere.

There are probably other situations where you could create tables programmatically, but rather than taking more extreme approaches (e.g. a transform) it probably makes sense to just chip away at nested table support. I think most of the work is handling DOM related issues with navigation (which probably shouldn't rely so much on DOM in this case).

Something that is probably going to come up is when a user pastes HTML with nested tables, the nested content is just going to disappear. We might want to accompany this change with some additional documentation somewhere that they should handle these cases in importDOM until nested tables are supposed.

- Simplify nested table checks using  helper

Per review feedback, simplified the code checks for nested tables.

Co-authored-by: Bob Ippolito <bob@redivi.com>
Add documentation about how nested table content is handled during paste
operations and provide guidance on using importDOM to preserve nested
table content until proper nested table support is implemented.

Co-authored-by: Bob Ippolito <bob@redivi.com>
@kirandash
Copy link
Copy Markdown
Contributor Author

The code looks good but there are some simplifications we can apply before merge.

I think this is probably a net good change. It's small, isolated, has tests, and mostly prevents tables from being inserted in the UI without gutting the partial support for nested tables that exists elsewhere.

There are probably other situations where you could create tables programmatically, but rather than taking more extreme approaches (e.g. a transform) it probably makes sense to just chip away at nested table support. I think most of the work is handling DOM related issues with navigation (which probably shouldn't rely so much on DOM in this case).

Something that is probably going to come up is when a user pastes HTML with nested tables, the nested content is just going to disappear. We might want to accompany this change with some additional documentation somewhere that they should handle these cases in importDOM until nested tables are supposed.

Thanks for the detailed review @etrepum! I've updated the README to document the handling of nested tables, particularly focusing on the importDOM implementation as you suggested. The documentation now:

  1. Clearly states that nested content will be removed by default during paste operations
  2. Guides users on how to handle nested tables in their importDOM implementation
  3. Provides high-level approaches for preserving nested table content

I haven't included specific code examples yet. Would you like me to add some practical examples of importDOM implementations to make it more concrete for users?

Let me know if you'd like any adjustments to the documentation or if there are other aspects we should cover.

Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this level of documentation is totally sufficient, no need to go through the trouble of implementing that example code in this PR

@etrepum etrepum added this pull request to the merge queue Feb 17, 2025
Merged via the queue into facebook:main with commit 7f4450f Feb 17, 2025
37 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: Inner table cell selection also selects outer table cell

3 participants