112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import React, { useMemo } from 'react';
|
|
import { EmailContent } from '@/types/email';
|
|
import { processContentWithDirection } from '@/lib/utils/text-direction';
|
|
|
|
interface EmailContentDisplayProps {
|
|
content: EmailContent | null | undefined;
|
|
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 with centralized utility
|
|
const processedContent = useMemo(() => {
|
|
// Default empty content
|
|
if (!content) {
|
|
return {
|
|
text: '',
|
|
html: '<div class="text-gray-400">No content available</div>',
|
|
direction: 'ltr' as const
|
|
};
|
|
}
|
|
|
|
// For text-only display, convert plain text to HTML first
|
|
if (type === 'text') {
|
|
const textContent = content.text || '';
|
|
const formattedText = textContent
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/\n/g, '<br>');
|
|
|
|
return processContentWithDirection(formattedText);
|
|
}
|
|
|
|
// For auto mode, let the centralized function handle the content
|
|
return processContentWithDirection(content);
|
|
}, [content, type]);
|
|
|
|
// Handle quoted text display
|
|
const displayHTML = useMemo(() => {
|
|
if (!showQuotedText) {
|
|
// This is simplified - a more robust approach would parse and handle
|
|
// quoted sections more intelligently
|
|
return processedContent.html.replace(/<blockquote[^>]*>[\s\S]*?<\/blockquote>/gi,
|
|
'<div class="text-gray-400">[Quoted text hidden]</div>');
|
|
}
|
|
return processedContent.html;
|
|
}, [processedContent.html, showQuotedText]);
|
|
|
|
return (
|
|
<div className={`email-content-display ${className}`}>
|
|
<div
|
|
className="email-content-inner"
|
|
dangerouslySetInnerHTML={{ __html: displayHTML }}
|
|
/>
|
|
|
|
{/* Debug output if enabled */}
|
|
{debug && (
|
|
<div className="mt-4 p-2 text-xs bg-gray-100 border rounded">
|
|
<p><strong>Content Type:</strong> {content?.isHtml ? 'HTML' : 'Text'}</p>
|
|
<p><strong>Direction:</strong> {processedContent.direction}</p>
|
|
<p><strong>HTML Length:</strong> {content?.html?.length || 0}</p>
|
|
<p><strong>Text Length:</strong> {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;
|