🎨 Added Preview tab to welcome email editor

[cmraible]

ref https://linear.app/ghost/issue/NY-1228/add-the-frontend-editpreview-toggle-to-the-welcome-email-edit-modal

What this changes

• adds an Edit / Preview toggle to the welcome email modal in Admin
• lets admins preview unsaved subject and body changes before saving
• loads the preview from the automated email preview endpoint and renders it in an iframe sized to the email content
• preserves unsaved draft state when switching between edit and preview
• shows inline validation and preview loading/error states in the modal
• ignores stale out-of-order preview responses so older requests cannot overwrite a newer draft

Why

The welcome email editor previously only exposed the raw editing experience, which made it harder to verify the final email output before saving. This change adds an in-context preview flow so admins can check both copy and rendered layout while keeping their draft intact.

The follow-up race-condition fix is included because overlapping preview requests could otherwise show stale content after quick Edit/Preview toggling on a slow connection.

Implementation notes

• adds a dedicated usePreviewWelcomeEmail mutation and preview response types in admin-x-framework
• updates the modal header layout to host the segmented mode switch
• normalizes preview HTML links to open safely in a new tab
• measures iframe height so the modal owns scrolling instead of the preview document
• extends acceptance and browser E2E coverage for preview rendering and draft preservation

Testing

• pnpm exec playwright test test/acceptance/membership/member-welcome-emails.test.ts -g "Preview ignores out-of-order responses"
• pnpm lint:js src/components/settings/membership/member-emails/welcome-email-modal.tsx test/acceptance/membership/member-welcome-emails.test.ts

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c7e6579b-ef7a-4cd7-9ec5-a7aaf558702b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chris-ny-1228-add-the-frontend-editpreview-toggle-to-the-welcome-email

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud