alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

courrier preview

Browse Source
This commit is contained in:
alma 2025-04-30 22:45:26 +02:00
parent 748d0bbff4
commit 567da9d741
3 changed files with 77 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/email/EmailContentDisplay.tsx
View File

@ -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 };

62
hooks/use-email-fetch.ts
View File

@ -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: {
text: data.content?.text || '',
html: data.content?.html || undefined,
isHtml: data.content?.html ? true : false,
direction: data.content?.direction || 'ltr'
}
content: processedContent
};
setState({ email: transformedEmail, loading: false, error: null });

18
lib/utils/email-utils.ts
View File

@ -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);
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>`;
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);