courrier preview

components/email/EmailContentDisplay.tsx

@@ -5,7 +5,7 @@ import { renderEmailContent } from '@/lib/utils/email-utils';
 import { EmailContent } from '@/types/email';
 
 interface EmailContentDisplayProps {
-  content: EmailContent;
+  content: EmailContent | null | undefined;
   className?: string;
   showQuotedText?: boolean;
   type?: 'html' | 'text' | 'auto';
@@ -33,13 +33,18 @@ const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
         direction: 'ltr'
       } as EmailContent;
     }
-    return content;
+    
+    // Ensure all required fields are present
+    return {
+      text: content.text || '',
+      html: content.html,
+      isHtml: !!content.isHtml,
+      direction: content.direction || 'ltr'
+    } as EmailContent;
   }, [content]);
   
   // Render the content with proper formatting
   const htmlContent = useMemo(() => {
-    if (!safeContent) return '';
-    
     try {
       // Override content type if specified
       let contentToRender: EmailContent = { ...safeContent };

hooks/use-email-fetch.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useToast } from './use-toast';
 import { EmailMessage, EmailContent } from '@/types/email';
+import { sanitizeHtml } from '@/lib/utils/email-utils';
 
 interface EmailFetchState {
   email: EmailMessage | null;
@@ -72,16 +73,63 @@ export function useEmailFetch({ onEmailLoaded, onError }: UseEmailFetchProps = {
 
       const data = await response.json();
       
+      // Process content based on what type it is
+      let processedContent: EmailContent;
+      
+      if (data.content) {
+        if (typeof data.content === 'object') {
+          // If data.content is already an object, normalize it
+          processedContent = {
+            text: data.content.text || '',
+            html: data.content.html || undefined,
+            isHtml: !!data.content.html,
+            direction: data.content.direction || 'ltr'
+          };
+        } else if (typeof data.content === 'string') {
+          // If data.content is a string, determine if it's HTML
+          const isHtml = data.content.trim().startsWith('<') && 
+                        (data.content.includes('<html') || 
+                         data.content.includes('<body') || 
+                         data.content.includes('<div') || 
+                         data.content.includes('<p>'));
+          
+          processedContent = {
+            text: isHtml ? data.content.replace(/<[^>]*>/g, '') : data.content,
+            html: isHtml ? sanitizeHtml(data.content) : undefined,
+            isHtml: isHtml,
+            direction: 'ltr'
+          };
+        } else {
+          // Fallback for any other case
+          processedContent = {
+            text: 'Unsupported content format',
+            html: undefined,
+            isHtml: false,
+            direction: 'ltr'
+          };
+        }
+      } else if (data.html || data.text) {
+        // Handle separate html/text properties
+        processedContent = {
+          text: data.text || (data.html ? data.html.replace(/<[^>]*>/g, '') : ''),
+          html: data.html ? sanitizeHtml(data.html) : undefined,
+          isHtml: !!data.html,
+          direction: 'ltr'
+        };
+      } else {
+        // No content at all
+        processedContent = {
+          text: 'No content available',
+          html: undefined,
+          isHtml: false,
+          direction: 'ltr'
+        };
+      }
+      
       // Create properly formatted email with all required fields
       const transformedEmail: EmailMessage = {
         ...data,
-        // Ensure content is properly formatted
+        content: processedContent
-        content: {
-          text: data.content?.text || '',
-          html: data.content?.html || undefined,
-          isHtml: data.content?.html ? true : false,
-          direction: data.content?.direction || 'ltr'
-        }
       };
       
       setState({ email: transformedEmail, loading: false, error: null });

lib/utils/email-utils.ts

@@ -145,7 +145,7 @@ export function sanitizeHtml(html: string): string {
 /**
  * Format plain text for HTML display with proper line breaks
  */
-export function formatPlainTextToHtml(text: string): string {
+export function formatPlainTextToHtml(text: string | null | undefined): string {
   if (!text) return '';
   
   // Escape HTML characters to prevent XSS
@@ -204,14 +204,22 @@ export function renderEmailContent(content: EmailContent): string {
   }
   
   try {
+    // Ensure content has all required fields with defaults
+    const safeContent = {
+      text: content.text || '',
+      html: content.html,
+      isHtml: !!content.isHtml,
+      direction: content.direction || 'ltr'
+    };
+    
     // Determine if we're rendering HTML or plain text
-    if (content.isHtml && content.html) {
+    if (safeContent.isHtml && safeContent.html) {
       // For HTML content, wrap it with proper styling
-      return `<div class="email-content" dir="${content.direction}" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; max-width: 100%; overflow-x: auto; overflow-wrap: break-word; word-wrap: break-word;">${content.html}</div>`;
+      return `<div class="email-content" dir="${safeContent.direction}" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; max-width: 100%; overflow-x: auto; overflow-wrap: break-word; word-wrap: break-word;">${safeContent.html}</div>`;
     } else {
       // For plain text, format it as HTML and wrap with monospace styling
-      const formattedText = formatPlainTextToHtml(content.text);
+      const formattedText = formatPlainTextToHtml(safeContent.text);
-      return `<div class="email-content plain-text" dir="${content.direction}" style="font-family: -apple-system, BlinkMacSystemFont, Menlo, Monaco, Consolas, 'Courier New', monospace; white-space: pre-wrap; line-height: 1.5; color: #333; padding: 15px; max-width: 100%; overflow-wrap: break-word;"><p>${formattedText}</p></div>`;
+      return `<div class="email-content plain-text" dir="${safeContent.direction}" style="font-family: -apple-system, BlinkMacSystemFont, Menlo, Monaco, Consolas, 'Courier New', monospace; white-space: pre-wrap; line-height: 1.5; color: #333; padding: 15px; max-width: 100%; overflow-wrap: break-word;"><p>${formattedText}</p></div>`;
     }
   } catch (error) {
     console.error('Error rendering email content:', error);