Skip to content

fix(editor): render Table as native <table> instead of Section to fix invalid nesting#3219

Merged
gabrielmfern merged 2 commits intocanaryfrom
fix/table-rendering-nesting-ad4a
Apr 16, 2026
Merged

fix(editor): render Table as native <table> instead of Section to fix invalid nesting#3219
gabrielmfern merged 2 commits intocanaryfrom
fix/table-rendering-nesting-ad4a

Conversation

@bukinoshita
Copy link
Copy Markdown
Member

@bukinoshita bukinoshita commented Apr 9, 2026

Summary by cubic

Render the editor’s Table as a native <table> instead of Section to eliminate invalid <tr> inside <td> nesting. This fixes broken layouts in email clients and fulfills Linear BU-670.

  • Bug Fixes
    • Replaced Section from @react-email/components with a native <table> that wraps children in <tbody>.
    • Preserved align, width, border=0, cellPadding=0, cellSpacing=0, role="presentation", and centering styles.
    • Added an integration test to prevent <tr> inside <td> and updated snapshots.

Written for commit 8e1b4c3. Summary will update on new commits.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 9, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-email Ready Ready Preview, Comment Apr 16, 2026 1:47pm
react-email-demo Ready Ready Preview, Comment Apr 16, 2026 1:47pm
react-email-examples Ready Ready Preview, Comment Apr 16, 2026 1:47pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 9, 2026

🦋 Changeset detected

Latest commit: f8fe268

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

This PR includes changesets to release 1 package
Name Type
@react-email/editor Patch

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

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

No issues found across 3 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

@gabrielmfern
Copy link
Copy Markdown
Member

@cursor fix conflicts, and add a patch changeset for @react-email/editor that's just a one-liner change entry

@cursor
Copy link
Copy Markdown

cursor bot commented Apr 16, 2026

The PR is already up to date with the force push. No title/body changes needed since the human-edited description (cubic-generated summary) is still accurate.

Done. Here's a summary of what I did:

  • Resolved merge conflicts: The upstream canary branch changed imports from @react-email/components to react-email. I rebased onto latest canary and resolved the conflict in table.tsx by keeping the new react-email import while removing the unused Section.
  • Added a patch changeset: Created .changeset/fix-table-nesting.md with a one-liner for @react-email/editor: "Render Table as a native <table> instead of Section to fix invalid <tr> inside <td> nesting in email output".
  • Verified all tests pass: All 43 editor unit test files pass (409 tests) after the rebase and conflict resolution.
Open in Web Open in Cursor 

cursoragent and others added 2 commits April 16, 2026 13:44
… invalid nesting

The Table node's renderToReactEmail method was using Section, which wraps
children in its own <table><tbody><tr><td>...</td></tr></tbody></table>
structure. This caused TableRow (<tr>) and TableCell (<td>) children to
be nested inside a <td> without a nested <table>, producing invalid HTML
that email clients repair inconsistently.

Replace Section with a native <table> element that wraps children in a
<tbody>, producing the correct structure:
<table><tbody><tr><td>...</td></tr></tbody></table>

Resolves BU-670

Co-authored-by: Bu Kinoshita <bukinoshita@users.noreply.github.com>
Co-authored-by: Gabriel Miranda <gabrielmfern@outlook.com>
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 16, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@react-email/editor@3219

commit: f8fe268

@gabrielmfern gabrielmfern marked this pull request as ready for review April 16, 2026 13:58
@gabrielmfern gabrielmfern merged commit ca6a71d into canary Apr 16, 2026
15 checks passed
@gabrielmfern gabrielmfern deleted the fix/table-rendering-nesting-ad4a branch April 16, 2026 14:00
gabrielmfern added a commit that referenced this pull request Apr 16, 2026
…ix invalid nesting (#3219)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Bu Kinoshita <bukinoshita@users.noreply.github.com>
Co-authored-by: Gabriel Miranda <gabrielmfern@outlook.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants