diff --git a/components/email/EmailPanel.tsx b/components/email/EmailPanel.tsx index c52aca96..68b3a62f 100644 --- a/components/email/EmailPanel.tsx +++ b/components/email/EmailPanel.tsx @@ -7,6 +7,7 @@ import { Loader2 } from 'lucide-react'; import { formatReplyEmail, EmailMessage as FormatterEmailMessage } from '@/lib/utils/email-formatter'; import { useEmailFetch } from '@/hooks/use-email-fetch'; import { debounce } from '@/lib/utils/debounce'; +import { formatEmailContent } from '@/lib/utils/email-content'; // Add local EmailMessage interface interface EmailAddress { @@ -77,31 +78,7 @@ export default function EmailPanel({ } try { - console.log('EmailPanel: Raw email content:', { - content: email.content, - html: email.html, - text: email.text, - formattedContent: email.formattedContent - }); - - // Handle different content structures - let content = ''; - - if (email.formattedContent) { - console.log('EmailPanel: Using formattedContent'); - content = email.formattedContent; - } else if (typeof email.content === 'string') { - console.log('EmailPanel: Using direct string content'); - content = email.content; - } else if (email.content && typeof email.content === 'object') { - console.log('EmailPanel: Using object content:', email.content); - content = email.content.html || email.content.text || ''; - } else { - console.log('EmailPanel: Using fallback content'); - content = email.html || email.text || ''; - } - - console.log('EmailPanel: Final formatted content:', content); + const content = formatEmailContent(email); // Return a new email object with the formatted content return { diff --git a/components/email/EmailPreview.tsx b/components/email/EmailPreview.tsx index f817b7ff..139c55ef 100644 --- a/components/email/EmailPreview.tsx +++ b/components/email/EmailPreview.tsx @@ -18,6 +18,7 @@ import { Card } from '@/components/ui/card'; import { cn } from '@/lib/utils'; import { CalendarIcon, PaperclipIcon } from 'lucide-react'; import Link from 'next/link'; +import DOMPurify from 'dompurify'; interface EmailAddress { name: string; @@ -134,7 +135,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP console.log('EmailPreview: Content before sanitization:', content); // Sanitize the content for display - const sanitizedContent = sanitizeHtml(content); + const sanitizedContent = DOMPurify.sanitize(content); console.log('EmailPreview: Final sanitized content:', sanitizedContent); diff --git a/lib/utils/email-content.ts b/lib/utils/email-content.ts new file mode 100644 index 00000000..4a9de2c0 --- /dev/null +++ b/lib/utils/email-content.ts @@ -0,0 +1,46 @@ +import DOMPurify from 'dompurify'; + +export function formatEmailContent(email: any): string { + if (!email) { + console.log('formatEmailContent: No email provided'); + return ''; + } + + try { + console.log('formatEmailContent: Raw email content:', { + content: email.content, + html: email.html, + text: email.text, + formattedContent: email.formattedContent + }); + + // Get the content in order of preference + let content = ''; + + if (email.formattedContent) { + console.log('formatEmailContent: Using formattedContent'); + content = email.formattedContent; + } else if (typeof email.content === 'string') { + console.log('formatEmailContent: Using direct string content'); + content = email.content; + } else if (email.content && typeof email.content === 'object') { + console.log('formatEmailContent: Using object content:', email.content); + content = email.content.html || email.content.text || ''; + } else { + console.log('formatEmailContent: Using fallback content'); + content = email.html || email.text || ''; + } + + console.log('formatEmailContent: Content before sanitization:', content); + + // Sanitize the content for display + const sanitizedContent = DOMPurify.sanitize(content); + + console.log('formatEmailContent: Final sanitized content:', sanitizedContent); + + return sanitizedContent; + } catch (error) { + console.error('formatEmailContent: Error formatting email content:', error); + return ''; + } +} \ No newline at end of file