fix(editor): email themiing's body background not in editor

[gabrielmfern]

Summary

The EmailTheming plugin applies body background color during serialization (via BaseTemplate), but the same background color was not reflected in the live editor view. This caused a visual mismatch between the editing experience and the final email output.

Raised in PR #3115 review.

Changes

• In the ProseMirror plugin's sync() function, extract the body backgroundColor from the merged CSS and apply it directly to view.dom.style.backgroundColor
• Clean up the background color in the plugin's destroy() handler
• Add 4 new tests covering:
  • Applying body background color to the editor DOM element
  • No background when no backgroundColor is defined
  • Reactive updates when theme styles change
  • Cleanup on editor destroy

Relevant files

• packages/editor/src/plugins/email-theming/extension.tsx — main implementation
• packages/editor/src/plugins/email-theming/extension.spec.ts — new tests

Closes PRODUCT-1696

Slack Thread

  

---

Summary by cubic

Fixes the mismatch between the live editor and the serialized email by applying the theme’s body background color to the editor container. Meets PRODUCT-1696.

• Bug Fixes
  • Read body backgroundColor from merged theme CSS and set it on view.dom in sync.
  • Clear the background style on plugin destroy.
  • Add tests for applying color, handling no color, reactive updates, and cleanup; bump @react-email/editor to 0.0.0-experimental.37.

^{Written for commit 1f56b25. Summary will update on new commits.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
react-email	Ready	Preview, Comment	Mar 26, 2026 4:30pm
react-email-demo	Ready	Preview, Comment	Mar 26, 2026 4:30pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1f56b25

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[pkg-pr-new]

Open in StackBlitz

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

commit: 10ec653

[cubic-dev-ai]

cubic analysis

No issues found across 2 files

Confidence score: 5/5

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

Linked issue analysis

Linked issue: PRODUCT-1696: Apply EmailTheming body background color to live editor view

Status	Acceptance criteria	Notes
✅	Apply body background color to the live editor view (editor container)	Sets view.dom.style.backgroundColor from merged CSS
✅	Implement change inside the ProseMirror plugin's sync() function	Merged CSS read and style applied inside sync() when styles change
✅	Extract body.backgroundColor from merged CSS (getMergedCssJs) and use it	Reads mergedCssJs.body?.backgroundColor before applying
✅	Clean up the background color in the plugin's destroy() handler	Clears view.dom.style.backgroundColor in destroy()
✅	Reactive updates: background updates when theme/styles change	sync() updates on styles change and tests assert new color
✅	Do not set background when no backgroundColor is defined	Sets '' when bodyBg not a string; test asserts no background
✅	Add tests covering applying background, no background, reactive updates, and cleanup on destroy	Four tests added covering apply, none, reactive, and destroy cleanup
✅	Continue injecting merged theme CSS (injectThemeCss called with merged CSS)	injectThemeCss called with mergedCssJs and scope preserved
✅	Prefer applying background to editor container as suggested (alternative approach implemented)	Applied background directly to view.dom.style per suggested alt.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	html-to-ast@​0.0.6
	html-to-text@​9.0.5

View full report