Updated member email editor to support more cards#26671
Conversation
no ref This contains some changes to support additions within the Koenig repo: - embed cards - youtube cards - restricting width for image cards
9larsons
changed the title
WalkthroughThis pull request updates the member email editor functionality and dependencies. The member email editor component now includes configuration for email-type editors with image width constraints and conditionally injects an embed plugin when a feature flag is enabled. The 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@ghost/core/core/server/services/member-welcome-emails/email-templates/partials/card-styles.hbs`:
- Around line 227-248: Replace the hard-coded dark color (`#15212A`) in the
.kg-nft-link and .kg-twitter-link rules with a theme-aware value so links remain
readable when backgroundIsDark is enabled: detect the existing backgroundIsDark
flag or template helper used in these email templates and output a
conditional/color variable (or inherit the surrounding text color) instead of
forcing `#15212A` for .kg-nft-link and .kg-twitter-link, ensuring the links use
the dark-theme link color when backgroundIsDark is true and the default
otherwise.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (4)
apps/admin-x-settings/src/components/settings/membership/member-emails/member-email-editor.tsxapps/admin/package.jsonghost/admin/package.jsonghost/core/core/server/services/member-welcome-emails/email-templates/partials/card-styles.hbs
| .kg-nft-link { | ||
| display: block; | ||
| text-decoration: none !important; | ||
| color: #15212A !important; | ||
| font-family: inherit !important; | ||
| font-size: 14px; | ||
| line-height: 1.3em; | ||
| padding-top: 4px; | ||
| padding-right: 20px; | ||
| padding-left: 20px; | ||
| padding-bottom: 4px; | ||
| } | ||
|
|
||
| .kg-twitter-link { | ||
| display: block; | ||
| text-decoration: none !important; | ||
| color: #15212A !important; | ||
| font-family: inherit !important; | ||
| font-size: 15px; | ||
| padding: 8px; | ||
| line-height: 1.3em; | ||
| } |
There was a problem hiding this comment.
Use theme-aware link colors for dark-background emails.
Line 230 and Line 243 force dark text (#15212A), which can become unreadable when backgroundIsDark is enabled.
🎯 Proposed fix
.kg-nft-link {
display: block;
text-decoration: none !important;
- color: `#15212A` !important;
+ color: {{`#if` backgroundIsDark}}#ffffff{{else}}#15212A{{/if}} !important;
font-family: inherit !important;
font-size: 14px;
line-height: 1.3em;
padding-top: 4px;
@@
.kg-twitter-link {
display: block;
text-decoration: none !important;
- color: `#15212A` !important;
+ color: {{`#if` backgroundIsDark}}#ffffff{{else}}#15212A{{/if}} !important;
font-family: inherit !important;
font-size: 15px;
padding: 8px;
line-height: 1.3em;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .kg-nft-link { | |
| display: block; | |
| text-decoration: none !important; | |
| color: #15212A !important; | |
| font-family: inherit !important; | |
| font-size: 14px; | |
| line-height: 1.3em; | |
| padding-top: 4px; | |
| padding-right: 20px; | |
| padding-left: 20px; | |
| padding-bottom: 4px; | |
| } | |
| .kg-twitter-link { | |
| display: block; | |
| text-decoration: none !important; | |
| color: #15212A !important; | |
| font-family: inherit !important; | |
| font-size: 15px; | |
| padding: 8px; | |
| line-height: 1.3em; | |
| } | |
| .kg-nft-link { | |
| display: block; | |
| text-decoration: none !important; | |
| color: {{`#if` backgroundIsDark}}#ffffff{{else}}#15212A{{/if}} !important; | |
| font-family: inherit !important; | |
| font-size: 14px; | |
| line-height: 1.3em; | |
| padding-top: 4px; | |
| padding-right: 20px; | |
| padding-left: 20px; | |
| padding-bottom: 4px; | |
| } | |
| .kg-twitter-link { | |
| display: block; | |
| text-decoration: none !important; | |
| color: {{`#if` backgroundIsDark}}#ffffff{{else}}#15212A{{/if}} !important; | |
| font-family: inherit !important; | |
| font-size: 15px; | |
| padding: 8px; | |
| line-height: 1.3em; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@ghost/core/core/server/services/member-welcome-emails/email-templates/partials/card-styles.hbs`
around lines 227 - 248, Replace the hard-coded dark color (`#15212A`) in the
.kg-nft-link and .kg-twitter-link rules with a theme-aware value so links remain
readable when backgroundIsDark is enabled: detect the existing backgroundIsDark
flag or template helper used in these email templates and output a
conditional/color variable (or inherit the surrounding text color) instead of
forcing `#15212A` for .kg-nft-link and .kg-twitter-link, ensuring the links use
the dark-theme link color when backgroundIsDark is true and the default
otherwise.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #26671 +/- ##
==========================================
+ Coverage 73.18% 73.19% +0.01%
==========================================
Files 1530 1530
Lines 120510 120510
Branches 14571 14574 +3
==========================================
+ Hits 88199 88213 +14
+ Misses 31290 31278 -12
+ Partials 1021 1019 -2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
1 participant
no ref
This contains some changes to support additions within the Koenig repo: