RyderTech/nlcc-itinerary
1
0
Fork 0
Code Issues Pull Requests Packages Activity

fix: Convert rich text to inline styles for reliable email rendering

Browse Source 
Fix highlighting and all rich text formatting in emails by converting HTML tags to inline styles before sending. Email clients strip <style> blocks, so inline styles are the only reliable method.

Changes:
- Convert <mark> tags to <span> with inline background-color (#fef08a)
- Add inline styles to all rich text elements (strong, em, u, s, headings, lists)
- Process HTML conversion in email API before sending
- Simplified email template by removing unreliable <style> block
- All formatting now uses inline styles directly on elements

This ensures highlights and all other formatting (bold, italic, underline, strikethrough, headings, lists) render correctly across all email clients including Gmail, Outlook, Apple Mail, etc.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Joshua Ryder
2025-11-07 10:21:53 -05:00
parent 1515fba6c9
commit 752e74b2ed
2 changed files with 27 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
server/utils/email.ts
View File

@@ -154,74 +154,32 @@ ${userNotes || 'No notes taken'}
html: `
<!DOCTYPE html>
<html>
<head>
<style>
/* Rich text formatting styles */
mark {
background-color: #fef08a !important;
padding: 2px 4px;
border-radius: 2px;
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
u {
text-decoration: underline;
}
s {
text-decoration: line-through;
}
h2 {
font-size: 1.5em;
font-weight: 700;
margin: 1em 0 0.5em;
}
h3 {
font-size: 1.25em;
font-weight: 600;
margin: 0.75em 0 0.5em;
}
ul, ol {
padding-left: 1.5em;
margin: 0.5em 0;
}
li {
margin: 0.25em 0;
}
p {
margin: 0.5em 0;
}
</style>
</head>
<body>
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
<h1 style="color: #333; border-bottom: 3px solid #4CAF50; padding-bottom: 10px;">Sermon Notes</h1>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 0;">
<div style="max-width: 600px; margin: 0 auto; padding: 20px;">
<h1 style="color: #333; border-bottom: 3px solid #4CAF50; padding-bottom: 10px; margin-top: 0;">Sermon Notes</h1>
<div style="margin: 20px 0;">
<h2 style="color: #4CAF50; margin-bottom: 5px;">${sermonTitle}</h2>
<h2 style="color: #4CAF50; margin-bottom: 5px; font-size: 1.5em;">${sermonTitle}</h2>
<p style="color: #666; margin-top: 0;">${sermonDate}</p>
</div>
<div style="background-color: #E3F2FD; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #1976D2; margin-top: 0;">Bible References</h3>
<h3 style="color: #1976D2; margin-top: 0; font-size: 1.25em;">Bible References</h3>
<div style="color: #333;">${bibleReferences}</div>
</div>
<div style="background-color: #E8F5E9; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #388E3C; margin-top: 0;">Personal Appliance</h3>
<h3 style="color: #388E3C; margin-top: 0; font-size: 1.25em;">Personal Appliance</h3>
<div style="color: #333; white-space: pre-wrap;">${personalAppliance}</div>
</div>
<div style="background-color: #F3E5F5; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #7B1FA2; margin-top: 0;">Pastor's Challenge</h3>
<h3 style="color: #7B1FA2; margin-top: 0; font-size: 1.25em;">Pastor's Challenge</h3>
<div style="color: #333; white-space: pre-wrap;">${pastorsChallenge}</div>
</div>
<div style="background-color: #FFF9C4; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #F57F17; margin-top: 0;">My Notes</h3>
<h3 style="color: #F57F17; margin-top: 0; font-size: 1.25em;">My Notes</h3>
<div style="color: #333;">${userNotes || '<em>No notes taken</em>'}</div>
</div>