courrier multi account restore compose

components/email/EmailPanel.tsx

@@ -7,6 +7,7 @@ import { Loader2 } from 'lucide-react';
 import { formatReplyEmail, EmailMessage as FormatterEmailMessage } from '@/lib/utils/email-formatter';
 import { useEmailFetch } from '@/hooks/use-email-fetch';
 import { debounce } from '@/lib/utils/debounce';
+import { formatEmailContent } from '@/lib/utils/email-content';
 
 // Add local EmailMessage interface
 interface EmailAddress {
@@ -77,31 +78,7 @@ export default function EmailPanel({
     }
     
     try {
-      console.log('EmailPanel: Raw email content:', {
+      const content = formatEmailContent(email);
-        content: email.content,
-        html: email.html,
-        text: email.text,
-        formattedContent: email.formattedContent
-      });
-      
-      // Handle different content structures
-      let content = '';
-      
-      if (email.formattedContent) {
-        console.log('EmailPanel: Using formattedContent');
-        content = email.formattedContent;
-      } else if (typeof email.content === 'string') {
-        console.log('EmailPanel: Using direct string content');
-        content = email.content;
-      } else if (email.content && typeof email.content === 'object') {
-        console.log('EmailPanel: Using object content:', email.content);
-        content = email.content.html || email.content.text || '';
-      } else {
-        console.log('EmailPanel: Using fallback content');
-        content = email.html || email.text || '';
-      }
-      
-      console.log('EmailPanel: Final formatted content:', content);
       
       // Return a new email object with the formatted content
       return {

components/email/EmailPreview.tsx

@@ -18,6 +18,7 @@ import { Card } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
 import { CalendarIcon, PaperclipIcon } from 'lucide-react';
 import Link from 'next/link';
+import DOMPurify from 'dompurify';
 
 interface EmailAddress {
   name: string;
@@ -134,7 +135,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
       console.log('EmailPreview: Content before sanitization:', content);
       
       // Sanitize the content for display
-      const sanitizedContent = sanitizeHtml(content);
+      const sanitizedContent = DOMPurify.sanitize(content);
       
       console.log('EmailPreview: Final sanitized content:', sanitizedContent);
       

lib/utils/email-content.ts

@@ -0,0 +1,46 @@
+import DOMPurify from 'dompurify';
+
+export function formatEmailContent(email: any): string {
+  if (!email) {
+    console.log('formatEmailContent: No email provided');
+    return '';
+  }
+  
+  try {
+    console.log('formatEmailContent: Raw email content:', {
+      content: email.content,
+      html: email.html,
+      text: email.text,
+      formattedContent: email.formattedContent
+    });
+    
+    // Get the content in order of preference
+    let content = '';
+    
+    if (email.formattedContent) {
+      console.log('formatEmailContent: Using formattedContent');
+      content = email.formattedContent;
+    } else if (typeof email.content === 'string') {
+      console.log('formatEmailContent: Using direct string content');
+      content = email.content;
+    } else if (email.content && typeof email.content === 'object') {
+      console.log('formatEmailContent: Using object content:', email.content);
+      content = email.content.html || email.content.text || '';
+    } else {
+      console.log('formatEmailContent: Using fallback content');
+      content = email.html || email.text || '';
+    }
+    
+    console.log('formatEmailContent: Content before sanitization:', content);
+    
+    // Sanitize the content for display
+    const sanitizedContent = DOMPurify.sanitize(content);
+    
+    console.log('formatEmailContent: Final sanitized content:', sanitizedContent);
+    
+    return sanitizedContent;
+  } catch (error) {
+    console.error('formatEmailContent: Error formatting email content:', error);
+    return '';
+  }
+}