Skip to content

fix(editor): emit theme link styles in renderHTML#3418

Merged
joaopcm merged 4 commits intocanaryfrom
fix/theme-aware-link-mark
Apr 24, 2026
Merged

fix(editor): emit theme link styles in renderHTML#3418
joaopcm merged 4 commits intocanaryfrom
fix/theme-aware-link-mark

Conversation

@joaopcm
Copy link
Copy Markdown
Member

@joaopcm joaopcm commented Apr 24, 2026

Summary

  • Link mark renderHTML merges EmailTheming link styles into the emitted <a style="...">. User inline styles still win via CSS cascade (appended last).
  • Exports getEmailTheming so the Link extension can resolve the active theme at render time.
  • RESET_MINIMAL.link now carries color: #0670DB + text-decoration: underline so both themes ship a default link color.
  • No hardcoded colors in link.tsx; all defaults come from getResolvedNodeStyles against the active theme.

Unblocks dropping the DOMParser workaround in the dashboard's generate-json-content.ts (resend/resend#10044).

Bug happening

CleanShot.2026-04-24.at.12.28.11.mp4

After this fix

CleanShot.2026-04-24.at.12.29.59.mp4

Test plan

  • New packages/editor/src/extensions/link.spec.ts (6 cases): basic + minimal themes emit themed style, class="node-link" preserved, user color wins over theme, mark.attrs.style stays empty for plain links (inspector contract), plain <a> setContent round-trip produces themed output.
  • pnpm vitest run --project unit — 434 passed, 1 skipped, no snapshot regressions.
  • pnpm build clean.
  • Manual: dashboard Visual -> HTML -> Visual, add link in Visual mode, confirm blue + underline in editor view and in exported HTML.
  • Manual: switch theme to minimal, confirm link still themed.
  • Manual: set custom link color via inspector, confirm custom color wins in both editor and export.

Summary by cubic

Make link rendering theme-aware by injecting EmailTheming styles into the <a> tag during HTML export. Links render blue and underlined by default, and user inline styles still win.

  • Bug Fixes

    • Merge theme link styles into <a style> in renderHTML; user inline styles are appended last to win.
    • Move default link styles to RESET_BASIC (color: #0670DB, text-decoration: underline); RESET_MINIMAL references them for consistency.
    • Resolve defaults via getResolvedNodeStyles; no hardcoded colors in the link extension.
    • Fixes link styling loss on Visual ↔ HTML round‑trips; enables removing the DOMParser workaround in the dashboard.
  • Dependencies

    • Add changeset for a patch release of @react-email/editor.

Written for commit 9af91a9. Summary will update on new commits.

Link mark's renderHTML now merges the active EmailTheming `link`
component styles into the emitted `<a>` `style` attribute, with
user-declared inline styles appended last so the CSS cascade preserves
overrides. Also adds link color+underline to RESET_MINIMAL so minimal
theme ships a default too. Fixes plain links losing styling after
HTML <-> visual mode round-trips.
@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 24, 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 24, 2026 3:05pm
react-email-demo Ready Ready Preview, Comment Apr 24, 2026 3:05pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 24, 2026

🦋 Changeset detected

Latest commit: 9af91a9

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

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 24, 2026

Open in StackBlitz

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

commit: 9af91a9

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 5 files

Confidence score: 5/5

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

Shadow auto-approve: would require human review. Modifies core HTML rendering logic and style merging for the Link mark. Changes to serialization logic in the editor's core path should be reviewed by a human.

@joaopcm joaopcm self-assigned this Apr 24, 2026
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.

0 issues found across 2 files (changes from recent commits).

Shadow auto-approve: would auto-approve. Isolated fix to ensure link styles are correctly emitted in HTML export. Includes comprehensive test coverage and follows established patterns for style merging.

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.

0 issues found across 1 file (changes from recent commits).

Shadow auto-approve: would auto-approve. Safe bug fix for link styling persistence. It merges theme-aware styles in renderHTML, includes comprehensive tests, and poses low risk to core infrastructure.

@joaopcm joaopcm merged commit 2377e89 into canary Apr 24, 2026
18 checks passed
@joaopcm joaopcm deleted the fix/theme-aware-link-mark branch April 24, 2026 15:59
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.

2 participants