mail page rest
This commit is contained in:
parent
b5ba7ef508
commit
faa43d8ff4
@ -272,41 +272,38 @@ function decodeMimeContent(content: string): string {
|
||||
|
||||
function renderEmailContent(email: Email) {
|
||||
try {
|
||||
// First try to parse the full email
|
||||
// Parse the full email content
|
||||
const parsed = parseFullEmail(email.body);
|
||||
|
||||
// If we have HTML content, display it
|
||||
if (parsed.html) {
|
||||
const decodedHtml = decodeMIME(parsed.html, 'quoted-printable', 'utf-8');
|
||||
return (
|
||||
<div
|
||||
className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl dark:prose-invert max-w-none"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: decodedHtml
|
||||
.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
|
||||
.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
|
||||
.replace(/<base[^>]*>/gi, '')
|
||||
.replace(/<meta[^>]*>/gi, '')
|
||||
.replace(/<link[^>]*>/gi, '')
|
||||
.replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '')
|
||||
.replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '')
|
||||
.replace(/<body[^>]*>/gi, '')
|
||||
.replace(/<\/body>/gi, '')
|
||||
.replace(/<html[^>]*>/gi, '')
|
||||
.replace(/<\/html>/gi, '')
|
||||
}}
|
||||
/>
|
||||
<div className="prose max-w-none">
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: parsed.html
|
||||
.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
|
||||
.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
|
||||
.replace(/<base[^>]*>/gi, '')
|
||||
.replace(/<meta[^>]*>/gi, '')
|
||||
.replace(/<link[^>]*>/gi, '')
|
||||
.replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '')
|
||||
.replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '')
|
||||
.replace(/<body[^>]*>/gi, '')
|
||||
.replace(/<\/body>/gi, '')
|
||||
.replace(/<html[^>]*>/gi, '')
|
||||
.replace(/<\/html>/gi, '')
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// If we have text content, display it
|
||||
// If we have text content, display it with proper formatting
|
||||
if (parsed.text) {
|
||||
const decodedText = decodeMIME(parsed.text, 'quoted-printable', 'utf-8');
|
||||
return (
|
||||
<div className="whitespace-pre-wrap font-sans text-base leading-relaxed">
|
||||
{decodedText.split('\n').map((line: string, i: number) => (
|
||||
<p key={i} className="mb-2">{line}</p>
|
||||
))}
|
||||
<div className="whitespace-pre-wrap">
|
||||
{parsed.text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -314,44 +311,53 @@ function renderEmailContent(email: Email) {
|
||||
// If we have attachments, display them
|
||||
if (parsed.attachments && parsed.attachments.length > 0) {
|
||||
return (
|
||||
<div className="mt-6 border-t border-gray-200 pt-6">
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
|
||||
<div className="space-y-2">
|
||||
{parsed.attachments.map((attachment: { filename: string }, index: number) => (
|
||||
<div key={index} className="flex items-center space-x-2 p-2 border rounded">
|
||||
<Paperclip className="h-4 w-4 text-gray-400" />
|
||||
<span className="text-sm text-gray-600 truncate">
|
||||
{attachment.filename}
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
{parsed.attachments.map((attachment, index) => (
|
||||
<div key={index} className="flex items-center gap-2 p-2 border rounded">
|
||||
<span className="text-sm">{attachment.filename}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({attachment.contentType})
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{parsed.body && (
|
||||
<div className="whitespace-pre-wrap">
|
||||
{parsed.body}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// If we couldn't parse the content, try to clean and display the raw body
|
||||
const decodedBody = decodeMIME(email.body, 'quoted-printable', 'utf-8');
|
||||
const cleanedContent = decodedBody
|
||||
.replace(/Content-Type:[^\n]+/g, '')
|
||||
.replace(/Content-Transfer-Encoding:[^\n]+/g, '')
|
||||
.replace(/MIME-Version:[^\n]+/g, '')
|
||||
.replace(/--[a-zA-Z0-9]+(-[a-zA-Z0-9]+)?/g, '')
|
||||
.replace(/boundary=[^\n]+/g, '')
|
||||
.replace(/charset=[^\n]+/g, '')
|
||||
.replace(/[\r\n]+/g, '\n')
|
||||
.trim();
|
||||
// If parsing failed, try to clean and display the raw body
|
||||
const cleanedBody = email.body
|
||||
.replace(/Content-Type:.*?\r\n/g, '')
|
||||
.replace(/Content-Transfer-Encoding:.*?\r\n/g, '')
|
||||
.replace(/MIME-Version:.*?\r\n/g, '')
|
||||
.replace(/--.*?--\r\n/g, '')
|
||||
.replace(/--.*?\r\n/g, '')
|
||||
.replace(/=\r\n/g, '')
|
||||
.replace(/=3D/g, '=')
|
||||
.replace(/=20/g, ' ')
|
||||
.replace(/=09/g, '\t')
|
||||
.replace(/=0A/g, '\n')
|
||||
.replace(/=0D/g, '\r')
|
||||
.replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
|
||||
|
||||
return (
|
||||
<div className="whitespace-pre-wrap font-sans text-base leading-relaxed">
|
||||
{cleanedContent.split('\n').map((line: string, i: number) => (
|
||||
<p key={i} className="mb-2">{line}</p>
|
||||
))}
|
||||
<div className="whitespace-pre-wrap">
|
||||
{cleanedBody}
|
||||
</div>
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error rendering email content:', error);
|
||||
return (
|
||||
<div className="text-muted-foreground">
|
||||
Unable to display email content
|
||||
</div>
|
||||
);
|
||||
} catch (e) {
|
||||
console.error('Error parsing email:', e);
|
||||
return <div className="text-gray-500">Error displaying email content</div>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user