laxmanhalaki/Re_Backend

Fork 0

laxmanhalaki 9089e8c035 email template flow added with test account and templates for all cenerios

2025-12-04 20:58:32 +05:30

6.5 KiB

Raw Blame History

Rich Text Editor Support in Email Templates

✅ Rich Text Format Ready

Your email templates now support HTML content from rich text editors like:

Quill
TinyMCE
CKEditor
Draft.js
Slate
Tiptap

🎨 Supported HTML Elements

Text Formatting

✅ <strong>, <b> - Bold text
✅ <em>, <i> - Italic text
✅ <u> - Underlined text
✅ <p> - Paragraphs with spacing
✅ <br> - Line breaks

Lists

✅ <ul>, <li> - Bulleted lists
✅ <ol>, <li> - Numbered lists

Headings

✅ <h1> - 20px heading
✅ <h2> - 18px heading
✅ <h3> - 16px heading
✅ <h4> - 14px heading

Links

✅ <a href=""> - Clickable links (Royal Enfield Red color)

Special Elements

✅ <blockquote> - Quote blocks with gold accent
✅ <code> - Inline code snippets
✅ <pre> - Code blocks
✅ <hr> - Horizontal dividers
✅ <img> - Images (auto-scaled for mobile)

📝 Usage Example

From Rich Text Editor:

Your rich text editor might output:

<p>This is a <strong>purchase request</strong> for new equipment.</p>
<ul>
  <li>Item 1: Motorcycle helmet</li>
  <li>Item 2: Safety gear</li>
</ul>
<p>Total cost: <strong>$5,000</strong></p>

In Your Code:

import { getApprovalRequestEmail } from '@/emailtemplates';

const data = {
  // ... other fields
  requestDescription: editorHtmlContent, // Pass HTML directly
  // ... other fields
};

const html = getApprovalRequestEmail(data);

Result in Email:

The HTML will be properly styled with:

Royal Enfield brand colors
Proper spacing and line heights
Mobile-responsive fonts
Email-safe formatting

🔒 Security - HTML Sanitization

IMPORTANT: Always sanitize HTML content before using in emails!

Recommended: Use DOMPurify or similar

import DOMPurify from 'isomorphic-dompurify';

// Sanitize rich text content
const sanitizedDescription = DOMPurify.sanitize(editorHtmlContent, {
  ALLOWED_TAGS: [
    'p', 'br', 'strong', 'b', 'em', 'i', 'u', 
    'ul', 'ol', 'li', 'a', 'h1', 'h2', 'h3', 'h4',
    'blockquote', 'code', 'pre', 'hr', 'img'
  ],
  ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'target'],
  ALLOW_DATA_ATTR: false
});

const data = {
  requestDescription: sanitizedDescription,
  // ... other fields
};

Install DOMPurify:

npm install isomorphic-dompurify
npm install --save-dev @types/dompurify

🎯 Rich Text Styling

Brand Colors Applied:

Element	Color	Usage
Links	#DB281B (RE Red)	Clickable links
Strong text	#1a1a1a (Black)	Bold emphasis
Blockquotes	Gold border (#DEB219)	Quoted text
Code	#DB281B (RE Red)	Code snippets
Headings	#1a1a1a (Black)	Section titles

Spacing:

Paragraphs: 12px bottom margin
Lists: 25px left padding, 8px item spacing
Headings: 12px bottom margin
Blockquotes: 12px padding, gold left border
Images: Auto-scaled, 12px margin

📱 Mobile Responsive

Rich text content automatically adjusts for mobile:

Element	Desktop	Mobile
Paragraphs	14px	13px
Headings H1	20px	18px
Headings H2	18px	16px
Lists	14px	13px
Images	100% width	100% width

💡 Example Rich Text Content

Complex Example:

<h2>Equipment Purchase Request</h2>

<p>We need to purchase the following items for the <strong>testing department</strong>:</p>

<ul>
  <li><strong>2× Royal Enfield Himalayan</strong> - Latest model</li>
  <li><strong>Safety gear</strong> - Helmets and protective equipment</li>
  <li><strong>Maintenance tools</strong> - Standard toolkit</li>
</ul>

<h3>Budget Breakdown</h3>

<p>Total estimated cost: <strong>$15,000</strong></p>

<blockquote>
  This purchase is critical for our Q1 testing schedule and has been approved by the department head.
</blockquote>

<p>Please review and approve at your earliest convenience.</p>

<p>For questions, contact: <a href="mailto:john@example.com">john@example.com</a></p>

Will Render As:

✅ Styled headings with proper hierarchy
✅ Formatted lists with Royal Enfield accents
✅ Bold text in black
✅ Gold-bordered quote box
✅ Red links
✅ Proper spacing throughout
✅ Mobile-optimized fonts

🛡️ Best Practices

1. Sanitize User Input

const cleanHTML = DOMPurify.sanitize(userInput);

2. Use wrapRichText Helper

${wrapRichText(data.requestDescription)}

3. Test with Rich Content

Test emails with:

Multiple paragraphs
Lists (bulleted and numbered)
Links
Bold and italic text
Headings at different levels

4. Avoid These in Emails

❌ JavaScript or <script> tags
❌ External stylesheets
❌ Forms or input elements
❌ iframes
❌ SVG graphics (use PNG/JPG instead)
❌ Web fonts (use system fonts)

5. Image Handling

If users can add images in rich text:

✅ Use CDN or hosted images (not base64)
✅ Set max-width: 100% for mobile
✅ Add alt text for accessibility
✅ Optimize image file sizes

🧪 Test Rich Text

Update the test file to include rich HTML:

const approvalRequestData: ApprovalRequestData = {
  // ... other fields
  requestDescription: `
    <h3>Equipment Purchase</h3>
    <p>Requesting approval for <strong>new equipment</strong>:</p>
    <ul>
      <li>2× Motorcycles</li>
      <li>Safety gear</li>
    </ul>
    <p>Total: <strong>$15,000</strong></p>
  `,
  // ... other fields
};

📊 Email Client Compatibility

Full Rich Text Support:

✅ Gmail (Desktop & Mobile)
✅ Outlook 2016+ (Desktop & Mobile)
✅ Apple Mail (macOS & iOS)
✅ Yahoo Mail
✅ ProtonMail

Partial Support:

⚠️ Outlook 2007-2013 (limited CSS)
⚠️ Lotus Notes (basic HTML only)

Not Supported:

❌ Plain text email clients

✅ Templates Updated

Templates now include:

✅ getResponsiveStyles() - Mobile + Rich text CSS
✅ wrapRichText() - Wraps HTML with styling
✅ getRichTextStyles() - Styles for editor content
✅ Responsive classes on all elements
✅ Royal Enfield brand colors in rich text

🚀 Ready to Use

Your email templates can now handle:

✅ Plain text descriptions
✅ Rich HTML from editors
✅ Mobile responsive viewing
✅ Royal Enfield branded styling
✅ Safe, sanitized content

Just pass the HTML from your rich text editor directly! 🎯

6.5 KiB Raw Blame History Unescape Escape