mail page rest
This commit is contained in:
parent
269b971ac6
commit
c039291aea
@ -74,6 +74,13 @@ interface Attachment {
|
||||
interface ParsedEmailContent {
|
||||
headers: string;
|
||||
body: string;
|
||||
html?: string;
|
||||
text?: string;
|
||||
attachments?: Array<{
|
||||
filename: string;
|
||||
content: string;
|
||||
contentType: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface ParsedEmailMetadata {
|
||||
@ -245,89 +252,79 @@ function decodeMimeContent(content: string): string {
|
||||
}
|
||||
|
||||
function renderEmailContent(email: Email) {
|
||||
console.log('=== renderEmailContent Debug ===');
|
||||
console.log('Email ID:', email.id);
|
||||
console.log('Subject:', email.subject);
|
||||
console.log('Body length:', email.body.length);
|
||||
console.log('First 100 chars:', email.body.substring(0, 100));
|
||||
|
||||
try {
|
||||
// First try to parse the full email
|
||||
const parsed = parseFullEmail(email.body);
|
||||
console.log('Parsed content:', {
|
||||
hasText: !!parsed.body,
|
||||
hasHtml: !!parsed.headers,
|
||||
hasAttachments: parsed.headers.length > 0
|
||||
});
|
||||
|
||||
// Determine content and type
|
||||
let content = '';
|
||||
let isHtml = false;
|
||||
|
||||
if (parsed.headers) {
|
||||
// Use our existing MIME decoding for HTML content
|
||||
content = decodeMIME(parsed.headers, 'quoted-printable', 'utf-8');
|
||||
isHtml = true;
|
||||
} else if (parsed.body) {
|
||||
// Use our existing MIME decoding for plain text content
|
||||
content = decodeMIME(parsed.body, 'quoted-printable', 'utf-8');
|
||||
isHtml = false;
|
||||
} else {
|
||||
// Try to extract content directly from body using our existing functions
|
||||
const htmlMatch = email.body.match(/<html[^>]*>[\s\S]*?<\/html>/i);
|
||||
if (htmlMatch) {
|
||||
content = decodeMIME(htmlMatch[0], 'quoted-printable', 'utf-8');
|
||||
isHtml = true;
|
||||
} else {
|
||||
// Use our existing text extraction function
|
||||
content = extractTextFromHtml(email.body);
|
||||
isHtml = false;
|
||||
}
|
||||
|
||||
// If we have HTML content, display it
|
||||
if (parsed.html) {
|
||||
return (
|
||||
<div
|
||||
className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl dark:prose-invert max-w-none"
|
||||
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, '')
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!content) {
|
||||
console.log('No content available after all attempts');
|
||||
return <div className="text-gray-500">No content available</div>;
|
||||
// If we have text content, display it
|
||||
if (parsed.text) {
|
||||
return (
|
||||
<div className="whitespace-pre-wrap font-sans text-base leading-relaxed">
|
||||
{parsed.text.split('\n').map((line: string, i: number) => (
|
||||
<p key={i} className="mb-2">{line}</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle attachments
|
||||
const attachmentElements = parsed.headers.split('\n').filter(header => header.startsWith('Content-Type:')).map((header, index) => (
|
||||
<div key={index} className="mt-4 p-4 border rounded-lg bg-gray-50">
|
||||
<div className="flex items-center">
|
||||
<Paperclip className="h-5 w-5 text-gray-400 mr-2" />
|
||||
<span className="text-sm text-gray-600">{header.split(': ')[1]}</span>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className="prose max-w-none dark:prose-invert">
|
||||
{isHtml ? (
|
||||
<div
|
||||
className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl dark:prose-invert max-w-none"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: content
|
||||
.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="whitespace-pre-wrap font-sans text-base leading-relaxed">
|
||||
{content.split('\n').map((line, i) => (
|
||||
<p key={i} className="mb-2">{line}</p>
|
||||
// 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}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{attachmentElements}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// If we couldn't parse the content, try to clean and display the raw body
|
||||
const cleanedContent = email.body
|
||||
.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();
|
||||
|
||||
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>
|
||||
);
|
||||
} catch (e) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user