courrier preview

components/email/EmailContentDisplay.tsx

@@ -23,51 +23,21 @@ const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
   type = 'auto',
   debug = false
 }) => {
-  // Ensure we have valid content to work with
+  // Basic fallback for missing content
-  const safeContent = useMemo(() => {
+  const safeContent = content || {
-    if (!content) {
-      return {
-        html: undefined,
     text: 'No content available',
+    html: '',
     isHtml: false,
     direction: 'ltr'
-      } as EmailContent;
+  };
-    }
   
-    // Ensure all required fields are present
+  // Render the content with basic error handling
-    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(() => {
     try {
-      // Override content type if specified
+      return renderEmailContent(safeContent);
-      let contentToRender: EmailContent = { ...safeContent };
-      
-      if (type === 'html' && !contentToRender.isHtml) {
-        // Force HTML rendering for text content
-        contentToRender = {
-          ...contentToRender,
-          isHtml: true,
-          html: `<p>${contentToRender.text.replace(/\n/g, '<br>')}</p>`
-        };
-      } else if (type === 'text' && contentToRender.isHtml) {
-        // Force text rendering
-        contentToRender = {
-          ...contentToRender,
-          isHtml: false
-        };
-      }
-      
-      return renderEmailContent(contentToRender);
     } catch (error) {
       console.error('Error rendering content:', error);
-      return `<div class="error-message p-4 text-red-500">Error rendering email content: ${error instanceof Error ? error.message : 'Unknown error'}</div>`;
+      return `<div class="error-message p-4 text-red-500">Error rendering email content</div>`;
     }
   }, [safeContent, type]);
   

hooks/use-email-fetch.ts

@@ -1,7 +1,6 @@
 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;
@@ -73,63 +72,15 @@ export function useEmailFetch({ onEmailLoaded, onError }: UseEmailFetchProps = {
 
       const data = await response.json();
       
-      // Process content based on what type it is
+      // Simple normalization of content structure
-      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,
-        content: processedContent
+        content: {
+          text: data.content?.text || data.text || '',
+          html: data.content?.html || data.html,
+          isHtml: !!(data.content?.html || data.html),
+          direction: data.content?.direction || 'ltr'
+        }
       };
       
       setState({ email: transformedEmail, loading: false, error: null });
@@ -143,7 +94,7 @@ export function useEmailFetch({ onEmailLoaded, onError }: UseEmailFetchProps = {
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ action: 'mark-read' })
           });
-        } catch (err) {
+        } catch (err: any) {
           console.error('Error marking email as read:', err);
         }
       }

lib/utils/email-utils.ts

@@ -203,28 +203,20 @@ export function renderEmailContent(content: EmailContent): string {
     return '<div class="email-content-empty">No content available</div>';
   }
   
-  try {
+  // If we have HTML content and isHtml flag is true, use it
-    // Ensure content has all required fields with defaults
+  if (content.isHtml && content.html) {
-    const safeContent = {
+    return `<div class="email-content" dir="${content.direction || 'ltr'}">${content.html}</div>`;
-      text: content.text || '',
+  }
-      html: content.html,
-      isHtml: !!content.isHtml,
-      direction: content.direction || 'ltr'
-    };
   
-    // Determine if we're rendering HTML or plain text
+  // Otherwise, format the text content with basic HTML
-    if (safeContent.isHtml && safeContent.html) {
+  const text = content.text || '';
-      // For HTML content, wrap it with proper styling
+  const formattedText = text
-      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>`;
+    .replace(/&/g, '&amp;')
-    } else {
+    .replace(/</g, '&lt;')
-      // For plain text, format it as HTML and wrap with monospace styling
+    .replace(/>/g, '&gt;')
-      const formattedText = formatPlainTextToHtml(safeContent.text);
+    .replace(/\n/g, '<br>');
-      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>`;
+    
-    }
+  return `<div class="email-content plain-text" dir="${content.direction || 'ltr'}">${formattedText}</div>`;
-  } catch (error) {
-    console.error('Error rendering email content:', error);
-    return `<div class="email-content-error" style="padding: 15px; color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;"><p>Error displaying email content</p><p style="font-size: 12px; margin-top: 10px;">${error instanceof Error ? error.message : 'Unknown error'}</p></div>`;
-  }
 }
 
 /**