# 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>` - <u>Underlined text</u>  
✅ `<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:
```html
<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:**

```typescript
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**

```typescript
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:**

```bash
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:**

```html
<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**
```typescript
const cleanHTML = DOMPurify.sanitize(userInput);
```

### **2. Use wrapRichText Helper**
```typescript
${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:

```typescript
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:
1. ✅ Plain text descriptions
2. ✅ Rich HTML from editors
3. ✅ Mobile responsive viewing
4. ✅ Royal Enfield branded styling
5. ✅ Safe, sanitized content

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