courrier preview
This commit is contained in:
parent
567da9d741
commit
bd1b4c9a22
@ -23,51 +23,21 @@ const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
|
||||
type = 'auto',
|
||||
debug = false
|
||||
}) => {
|
||||
// Ensure we have valid content to work with
|
||||
const safeContent = useMemo(() => {
|
||||
if (!content) {
|
||||
return {
|
||||
html: undefined,
|
||||
text: 'No content available',
|
||||
isHtml: false,
|
||||
direction: 'ltr'
|
||||
} as EmailContent;
|
||||
}
|
||||
|
||||
// Ensure all required fields are present
|
||||
return {
|
||||
text: content.text || '',
|
||||
html: content.html,
|
||||
isHtml: !!content.isHtml,
|
||||
direction: content.direction || 'ltr'
|
||||
} as EmailContent;
|
||||
}, [content]);
|
||||
// Basic fallback for missing content
|
||||
const safeContent = content || {
|
||||
text: 'No content available',
|
||||
html: '',
|
||||
isHtml: false,
|
||||
direction: 'ltr'
|
||||
};
|
||||
|
||||
// Render the content with proper formatting
|
||||
// Render the content with basic error handling
|
||||
const htmlContent = useMemo(() => {
|
||||
try {
|
||||
// Override content type if specified
|
||||
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);
|
||||
return renderEmailContent(safeContent);
|
||||
} 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]);
|
||||
|
||||
|
||||
@ -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
|
||||
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
|
||||
// Simple normalization of content structure
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,28 +203,20 @@ export function renderEmailContent(content: EmailContent): string {
|
||||
return '<div class="email-content-empty">No content available</div>';
|
||||
}
|
||||
|
||||
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 (safeContent.isHtml && safeContent.html) {
|
||||
// For HTML content, wrap it with proper styling
|
||||
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(safeContent.text);
|
||||
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);
|
||||
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>`;
|
||||
// If we have HTML content and isHtml flag is true, use it
|
||||
if (content.isHtml && content.html) {
|
||||
return `<div class="email-content" dir="${content.direction || 'ltr'}">${content.html}</div>`;
|
||||
}
|
||||
|
||||
// Otherwise, format the text content with basic HTML
|
||||
const text = content.text || '';
|
||||
const formattedText = text
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/\n/g, '<br>');
|
||||
|
||||
return `<div class="email-content plain-text" dir="${content.direction || 'ltr'}">${formattedText}</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user