courrier refactor rebuild preview

This commit is contained in:
alma 2025-04-27 00:42:46 +02:00
parent bb97f9b364
commit 1d7f0b2b69

View File

@ -6,9 +6,7 @@ import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
sanitizeHtml,
formatReplyEmail,
formatForwardedEmail,
EmailMessage as FormatterEmailMessage
} from '@/lib/utils/email-formatter';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
@ -103,7 +101,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
.slice(0, 2);
};
// Format the email content using the same formatter as ComposeEmail
// Format the email content using the EXACT same formatter as ComposeEmail
useEffect(() => {
if (email) {
try {
@ -123,24 +121,11 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
hasAttachments: email.hasAttachments || false
};
// Get the raw content directly
const rawContent = email.content || email.html || email.text || '';
// Use EXACTLY the same formatter function as ComposeEmail uses
const { content } = formatReplyEmail(formatterEmail, 'reply');
// First try to use the raw content, but apply the same styling
const formattedWithStyles = `
<div style="min-height: 20px;" dir="rtl">
<div class="reply-body">
<div class="email-original-content" dir="rtl">
${rawContent}
</div>
</div>
</div>
`;
console.log("Formatted content for display");
// Use the formatted content with proper structure
setFormattedContent(formattedWithStyles);
// Set the identical formatted content
setFormattedContent(content);
} catch (error) {
console.error('Error formatting email content:', error);
// Fallback to raw content if formatting fails
@ -251,7 +236,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
)}
</div>
{/* Email content - using EXACTLY the same approach as ComposeEmail */}
{/* Email content - IDENTICAL to what ComposeEmail would show when replying */}
<ScrollArea className="flex-1">
<div className="space-y-2 p-6">
<div className="border rounded-md overflow-hidden">