109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { useMemo, CSSProperties } from 'react';
|
|
import { renderEmailContent, normalizeEmailContent } from '@/lib/utils/email-utils';
|
|
import { EmailContent } from '@/types/email';
|
|
|
|
interface EmailContentDisplayProps {
|
|
content: EmailContent | any;
|
|
className?: string;
|
|
showQuotedText?: boolean;
|
|
type?: 'html' | 'text' | 'auto';
|
|
}
|
|
|
|
/**
|
|
* Unified component for displaying email content in a consistent way
|
|
* This handles both HTML and plain text content with proper styling
|
|
*/
|
|
const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
|
|
content,
|
|
className = '',
|
|
showQuotedText = true,
|
|
type = 'auto'
|
|
}) => {
|
|
// Normalize the content to our standard format if needed
|
|
const normalizedContent = useMemo(() => {
|
|
// If content is already in our EmailContent format
|
|
if (content &&
|
|
typeof content === 'object' &&
|
|
'text' in content &&
|
|
'isHtml' in content) {
|
|
return content as EmailContent;
|
|
}
|
|
|
|
// Otherwise normalize it
|
|
return normalizeEmailContent(content);
|
|
}, [content]);
|
|
|
|
// Render the normalized content
|
|
const htmlContent = useMemo(() => {
|
|
if (!normalizedContent) return '';
|
|
|
|
// Override content type if specified
|
|
let contentToRender: EmailContent = { ...normalizedContent };
|
|
|
|
if (type === 'html' && !contentToRender.isHtml) {
|
|
// Force HTML rendering for text content
|
|
contentToRender = {
|
|
...contentToRender,
|
|
isHtml: true,
|
|
html: `<p>${contentToRender.text.replace(/\n/g, '<br>')}</p>`
|
|
};
|
|
} else if (type === 'text' && contentToRender.isHtml) {
|
|
// Force text rendering
|
|
contentToRender = {
|
|
...contentToRender,
|
|
isHtml: false
|
|
};
|
|
}
|
|
|
|
return renderEmailContent(contentToRender);
|
|
}, [normalizedContent, type]);
|
|
|
|
// Apply quoted text styling if needed
|
|
const containerStyle: CSSProperties = showQuotedText
|
|
? {}
|
|
: { maxHeight: '400px', overflowY: 'auto' };
|
|
|
|
return (
|
|
<div
|
|
className={`email-content-display ${className} ${showQuotedText ? 'quoted-text' : ''}`}
|
|
style={containerStyle}
|
|
>
|
|
<div
|
|
className="email-content-inner"
|
|
dangerouslySetInnerHTML={{ __html: htmlContent }}
|
|
/>
|
|
|
|
<style jsx>{`
|
|
.email-content-display {
|
|
width: 100%;
|
|
}
|
|
|
|
.email-content-display.quoted-text {
|
|
opacity: 0.85;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.email-content-inner :global(img) {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.email-content-inner :global(table) {
|
|
max-width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.email-content-inner :global(td),
|
|
.email-content-inner :global(th) {
|
|
padding: 0.5rem;
|
|
border: 1px solid #ddd;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmailContentDisplay;
|