From 752e74b2edf523c34725ca27d31af72677447c08 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Fri, 7 Nov 2025 10:21:53 -0500
Subject: [PATCH] fix: Convert rich text to inline styles for reliable email
 rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 server/api/notes/email/[sermonId].post.ts | 20 +++++++-
 server/utils/email.ts                     | 58 ++++-------------------
 2 files changed, 27 insertions(+), 51 deletions(-)
diff --git a/server/api/notes/email/[sermonId].post.ts b/server/api/notes/email/[sermonId].post.ts
index dce6812..cea079c 100644
--- a/server/api/notes/email/[sermonId].post.ts
+++ b/server/api/notes/email/[sermonId].post.ts
@@ -43,7 +43,25 @@ export default defineEventHandler(async (event) => {
 
   // Get user's notes (already stored as HTML from rich text editor)
   const noteRecord = getSermonNote(user.id!, sermonId)
-  const userNotes = noteRecord?.notes || '<p>No notes taken</p>'
+  let userNotes = noteRecord?.notes || '<p>No notes taken</p>'
+
+  // Convert Tiptap HTML to email-friendly HTML with inline styles
+  // Email clients don't support <style> blocks well, so we need inline styles
+  userNotes = userNotes
+    // Convert <mark> to <span> with inline background color (email clients often don't support <mark>)
+    .replace(/<mark>/gi, '<span style="background-color: #fef08a; padding: 2px 4px; border-radius: 2px;">')
+    .replace(/<\/mark>/gi, '</span>')
+    // Add inline styles to other elements
+    .replace(/<strong>/gi, '<strong style="font-weight: 700;">')
+    .replace(/<em>/gi, '<em style="font-style: italic;">')
+    .replace(/<u>/gi, '<u style="text-decoration: underline;">')
+    .replace(/<s>/gi, '<s style="text-decoration: line-through;">')
+    .replace(/<h2>/gi, '<h2 style="font-size: 1.5em; font-weight: 700; margin: 1em 0 0.5em; color: #333;">')
+    .replace(/<h3>/gi, '<h3 style="font-size: 1.25em; font-weight: 600; margin: 0.75em 0 0.5em; color: #333;">')
+    .replace(/<ul>/gi, '<ul style="padding-left: 1.5em; margin: 0.5em 0;">')
+    .replace(/<ol>/gi, '<ol style="padding-left: 1.5em; margin: 0.5em 0;">')
+    .replace(/<li>/gi, '<li style="margin: 0.25em 0;">')
+    .replace(/<p>/gi, '<p style="margin: 0.5em 0;">')
 
   // Format bible references for HTML email
   let bibleReferencesText = ''
diff --git a/server/utils/email.ts b/server/utils/email.ts
index f0813a4..ababd2d 100644
--- a/server/utils/email.ts
+++ b/server/utils/email.ts
@@ -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>
 
