Sticky campaign toolbar + rendered email line height improvements #3219
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughUpdated RichText editor layout in the campaign editor to add a sticky toolbar with adjusted spacing; changed email HTML post-processing and template styles to remove list item line-height and add a container line-height for rendered campaign HTML. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/web/lib/api/workflows/render-campaign-email-html.ts (1)
65-67: List item line-height change aligns with new global body line heightDropping
line-height: 1from the<li>inline style lets list items inherit the container’s line height (now set on the HTML wrapper), which matches the PR goal of making rendered emails look like the editor. The existing regex-based style override behavior is unchanged and acceptable for this PR.If you later revisit this pipeline, it may be worth switching from blind regex replacement to something that merges with existing
styleattributes more robustly, but that’s not necessary to land this change.packages/email/src/templates/campaign-email.tsx (1)
77-81: Body line-height choice looks intentional; consider de‑duplicating the magic numberSetting
lineHeight: 1.7142857on the wrapper (24px for 14px text) makes rendered email copy consistent and, together with the removedline-heighton<li>, should align list and paragraph spacing with the editor.If this value is meant to track the editor’s line-height, consider extracting it to a shared constant or adding a short comment so future tweaks don’t accidentally desync editor vs. email rendering.
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-editor.tsx (1)
555-563: Sticky toolbar wrapper looks sound; background tokens are an optional polishThe new wrapper +
stickyheader structure should give you the desired pinned toolbar with a clean white backdrop and gradient separator without affecting editor behavior. Z‑index and spacing choices look reasonable for the existing layout.If you anticipate theme variations, consider swapping
bg-white/from-whitefor a semantic background token from@dub/uiso the toolbar background stays in sync with the rest of the page, but it’s fine as is for a white email canvas.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-editor.tsx(1 hunks)apps/web/lib/api/workflows/render-campaign-email-html.ts(1 hunks)packages/email/src/templates/campaign-email.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: TWilson023
Repo: dubinc/dub PR: 2872
File: apps/web/app/(ee)/partners.dub.co/(dashboard)/profile/profile-details-form.tsx:180-189
Timestamp: 2025-09-24T15:50:16.414Z
Learning: TWilson023 prefers to keep security vulnerability fixes separate from refactoring PRs when the vulnerable code is existing and was only moved/relocated rather than newly introduced.
📚 Learning: 2025-10-15T01:05:43.266Z
Learnt from: steven-tey
Repo: dubinc/dub PR: 2958
File: apps/web/app/app.dub.co/(dashboard)/[slug]/settings/members/page-client.tsx:432-457
Timestamp: 2025-10-15T01:05:43.266Z
Learning: In apps/web/app/app.dub.co/(dashboard)/[slug]/settings/members/page-client.tsx, defer refactoring the custom MenuItem component (lines 432-457) to use the shared dub/ui MenuItem component to a future PR, as requested by steven-tey.
Applied to files:
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-editor.tsx
🧬 Code graph analysis (1)
apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/campaigns/[campaignId]/campaign-editor.tsx (1)
packages/ui/src/rich-text-area/rich-text-toolbar.tsx (1)
RichTextToolbar(16-129)
🪛 ast-grep (0.40.0)
packages/email/src/templates/campaign-email.tsx
[warning] 79-79: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
Quick implementation of sticky rich text toolbar:
...and changes to make rendered email line heights match the campaign editor.
Summary by CodeRabbit
New Features
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.