121 lines
3.9 KiB
TypeScript
121 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { useMemo } from 'react';
|
|
import { EmailContent } from '@/types/email';
|
|
import { formatEmailContent } from '@/lib/utils/email-content';
|
|
|
|
interface EmailContentDisplayProps {
|
|
content: EmailContent | string | null;
|
|
className?: string;
|
|
showQuotedText?: boolean;
|
|
type?: 'html' | 'text' | 'auto';
|
|
debug?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Unified component for displaying email content in a consistent way
|
|
* This handles both HTML and plain text content with proper styling and RTL support
|
|
*/
|
|
const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
|
|
content,
|
|
className = '',
|
|
showQuotedText = true,
|
|
type = 'auto',
|
|
debug = false
|
|
}) => {
|
|
// Process content if provided
|
|
const processedContent = useMemo(() => {
|
|
if (!content) {
|
|
console.log('EmailContentDisplay: No content provided');
|
|
return { __html: '<div class="email-content-empty">No content available</div>' };
|
|
}
|
|
|
|
try {
|
|
console.log('EmailContentDisplay processing:', {
|
|
contentType: typeof content,
|
|
isNull: content === null,
|
|
isString: typeof content === 'string',
|
|
isObject: typeof content === 'object',
|
|
length: typeof content === 'string' ? content.length : null
|
|
});
|
|
|
|
let formattedContent: string;
|
|
|
|
// If it's a string, we need to determine if it's HTML or plain text
|
|
if (typeof content === 'string') {
|
|
formattedContent = formatEmailContent({ content });
|
|
}
|
|
// If it's an EmailContent object
|
|
else {
|
|
formattedContent = formatEmailContent({ content });
|
|
}
|
|
|
|
console.log('EmailContentDisplay processed result length:', formattedContent.length);
|
|
return { __html: formattedContent };
|
|
} catch (error) {
|
|
console.error('Error processing email content:', error);
|
|
return { __html: '<div class="email-content-error">Error displaying email content</div>' };
|
|
}
|
|
}, [content]);
|
|
|
|
// Handle quoted text display
|
|
const displayHTML = useMemo(() => {
|
|
if (!showQuotedText) {
|
|
// Hide quoted text (usually in blockquotes)
|
|
// This is simplified - a more robust approach would parse and handle
|
|
// quoted sections more intelligently
|
|
const htmlWithoutQuotes = processedContent.__html.replace(/<blockquote[^>]*>[\s\S]*?<\/blockquote>/gi,
|
|
'<div class="text-gray-400">[Quoted text hidden]</div>');
|
|
return { __html: htmlWithoutQuotes };
|
|
}
|
|
return processedContent;
|
|
}, [processedContent, showQuotedText]);
|
|
|
|
return (
|
|
<div className={`email-content-display ${className}`}>
|
|
<div
|
|
className="email-content-inner"
|
|
dangerouslySetInnerHTML={displayHTML}
|
|
/>
|
|
|
|
{/* Debug output if enabled */}
|
|
{debug && (
|
|
<div className="mt-4 p-2 text-xs bg-gray-100 border rounded">
|
|
<p><strong>Content Type:</strong> {typeof content === 'string' ? 'Text' : 'HTML'}</p>
|
|
<p><strong>HTML Length:</strong> {typeof content === 'string' ? content.length : content?.html?.length || 0}</p>
|
|
<p><strong>Text Length:</strong> {typeof content === 'string' ? content.length : content?.text?.length || 0}</p>
|
|
</div>
|
|
)}
|
|
|
|
<style jsx>{`
|
|
.email-content-display {
|
|
width: 100%;
|
|
}
|
|
|
|
.email-content-inner img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.email-content-inner blockquote {
|
|
margin: 10px 0;
|
|
padding-left: 15px;
|
|
border-left: 2px solid #ddd;
|
|
color: #666;
|
|
background-color: #f9f9f9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* RTL blockquote styling will be handled by the direction attribute now */
|
|
[dir="rtl"] blockquote {
|
|
padding-left: 0;
|
|
padding-right: 15px;
|
|
border-left: none;
|
|
border-right: 2px solid #ddd;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmailContentDisplay;
|