panel 2 courier api restore
This commit is contained in:
parent
c81a74aaec
commit
fb36344577
@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
|
||||
import { decodeEmail } from '@/lib/mail-parser-wrapper';
|
||||
import DOMPurify from 'isomorphic-dompurify';
|
||||
|
||||
interface ComposeEmailProps {
|
||||
initialEmail?: EmailMessage | null;
|
||||
@ -94,9 +95,9 @@ export default function ComposeEmail({
|
||||
|
||||
// New function to initialize forwarded email using same approach as Panel 3
|
||||
const initializeForwardedEmail = async () => {
|
||||
if (!initialEmail || !initialEmail.content) {
|
||||
console.error('No email content available for forwarding');
|
||||
setBody('<div>No content available</div>');
|
||||
if (!initialEmail) {
|
||||
console.error('No email available for forwarding');
|
||||
setBody('<div style="color: #666; font-style: italic;">No email available for forwarding</div>');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -128,25 +129,65 @@ export default function ComposeEmail({
|
||||
}
|
||||
};
|
||||
|
||||
// Create a simple forwarded message header with proper formatting
|
||||
// Create a forwarded message header with proper formatting
|
||||
const headerContent = `
|
||||
<div>
|
||||
<br>
|
||||
---------- Forwarded message ---------<br>
|
||||
From: ${initialEmail.from || ''}<br>
|
||||
Date: ${formatDate(initialEmail.date)}<br>
|
||||
Subject: ${initialEmail.subject || ''}<br>
|
||||
To: ${initialEmail.to || ''}<br>
|
||||
<br>
|
||||
</div>
|
||||
`;
|
||||
<div style="border-bottom: 1px solid #e2e2e2; margin-bottom: 15px; padding-bottom: 15px; font-family: Arial, sans-serif; color: #333;">
|
||||
<p style="margin: 5px 0; font-size: 14px;">---------- Forwarded message ---------</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;"><b>From:</b> ${initialEmail.from || ''}</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;"><b>Date:</b> ${formatDate(initialEmail.date)}</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;"><b>Subject:</b> ${initialEmail.subject || ''}</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;"><b>To:</b> ${initialEmail.to || ''}</p>
|
||||
</div>`;
|
||||
|
||||
// Instead of trying to parse and clean the HTML, directly use the raw content
|
||||
// This preserves all original formatting, CSS, and HTML structure
|
||||
setBody(headerContent + initialEmail.content);
|
||||
// Process content based on its type
|
||||
let contentBody = '';
|
||||
|
||||
// Check if email content exists
|
||||
if (!initialEmail.content || initialEmail.content.trim() === '') {
|
||||
contentBody = '<div style="color: #666; font-style: italic; margin-top: 10px;">No content available</div>';
|
||||
} else if (initialEmail.content.trim().startsWith('<') && initialEmail.content.includes('</')) {
|
||||
// It's probably HTML, sanitize it before using
|
||||
try {
|
||||
// Use DOMPurify to sanitize HTML content
|
||||
const sanitizedContent = DOMPurify.sanitize(initialEmail.content, {
|
||||
ADD_TAGS: ['style', 'meta', 'link', 'table', 'thead', 'tbody', 'tr', 'td', 'th', 'hr', 'font', 'div', 'span', 'a', 'img', 'b', 'strong', 'i', 'em', 'u', 'br', 'p', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'code', 'center', 'section', 'header', 'footer', 'article', 'nav'],
|
||||
ADD_ATTR: ['colspan', 'rowspan', 'cellpadding', 'cellspacing', 'border', 'bgcolor', 'width', 'height', 'align', 'valign', 'class', 'style', 'color', 'face', 'size', 'background', 'src', 'href', 'target', 'rel', 'alt', 'title'],
|
||||
ALLOW_UNKNOWN_PROTOCOLS: true,
|
||||
WHOLE_DOCUMENT: false,
|
||||
RETURN_DOM: false,
|
||||
FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'select', 'option', 'textarea', 'canvas', 'video', 'audio'],
|
||||
FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onchange', 'onsubmit'],
|
||||
});
|
||||
contentBody = sanitizedContent;
|
||||
} catch (e) {
|
||||
console.error('Error sanitizing HTML content:', e);
|
||||
contentBody = '<div style="color: #666; font-style: italic; margin-top: 10px;">Error processing original content</div>';
|
||||
}
|
||||
} else {
|
||||
// It's plain text, convert newlines to <br> tags and wrap in a div
|
||||
contentBody = `<div style="font-family: Arial, sans-serif; white-space: pre-wrap;">${initialEmail.content.replace(/\n/g, '<br>')}</div>`;
|
||||
}
|
||||
|
||||
// If content seems empty or invalid after processing, provide a fallback
|
||||
if (!contentBody.trim() || contentBody.trim() === '<div></div>') {
|
||||
contentBody = '<div style="color: #666; font-style: italic; margin-top: 10px;">No content available</div>';
|
||||
}
|
||||
|
||||
// Set the complete forwarded email
|
||||
setBody(headerContent + contentBody);
|
||||
} catch (error) {
|
||||
console.error('Error initializing forwarded email:', error);
|
||||
setBody('<div>Error loading forwarded content</div>');
|
||||
// Still provide the headers even if there's an error with the content
|
||||
const errorHeaderContent = `
|
||||
<div style="border-bottom: 1px solid #e2e2e2; margin-bottom: 15px; padding-bottom: 15px; font-family: Arial, sans-serif; color: #333;">
|
||||
<p style="margin: 5px 0; font-size: 14px;">---------- Forwarded message ---------</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;"><b>From:</b> ${initialEmail.from || ''}</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;"><b>Date:</b> ${formatDate(initialEmail.date)}</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;"><b>Subject:</b> ${initialEmail.subject || ''}</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;"><b>To:</b> ${initialEmail.to || ''}</p>
|
||||
</div>
|
||||
<div style="color: #ef4444; font-style: italic; margin-top: 10px;">Error loading forwarded content</div>`;
|
||||
setBody(errorHeaderContent);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import { EmailMessage } from '@/lib/services/email-service';
|
||||
import { Loader2, Paperclip, Download } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { cleanHtml } from '@/lib/mail-parser-wrapper';
|
||||
|
||||
interface EmailPreviewProps {
|
||||
email: EmailMessage | null;
|
||||
@ -20,18 +21,31 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
|
||||
const renderContent = () => {
|
||||
if (!email?.content) return <p>No content available</p>;
|
||||
|
||||
// Sanitize HTML content
|
||||
const sanitizedContent = DOMPurify.sanitize(email.content, {
|
||||
ADD_TAGS: ['style', 'table', 'thead', 'tbody', 'tr', 'td', 'th'],
|
||||
ADD_ATTR: ['colspan', 'rowspan', 'style', 'width', 'height']
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="email-content prose max-w-none dark:prose-invert"
|
||||
dangerouslySetInnerHTML={{ __html: sanitizedContent }}
|
||||
/>
|
||||
);
|
||||
try {
|
||||
// Use DOMPurify directly with enhanced sanitization options
|
||||
const sanitizedContent = DOMPurify.sanitize(email.content, {
|
||||
ADD_TAGS: ['style', 'meta', 'link', 'table', 'thead', 'tbody', 'tr', 'td', 'th', 'hr', 'font', 'div', 'span', 'a', 'img', 'b', 'strong', 'i', 'em', 'u', 'br', 'p', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'code', 'center', 'section', 'header', 'footer', 'article', 'nav', 'keyframes'],
|
||||
ADD_ATTR: ['*', 'colspan', 'rowspan', 'cellpadding', 'cellspacing', 'border', 'bgcolor', 'width', 'height', 'align', 'valign', 'class', 'id', 'style', 'color', 'face', 'size', 'background', 'src', 'href', 'target', 'rel', 'alt', 'title', 'name', 'animation', 'animation-name', 'animation-duration', 'animation-fill-mode'],
|
||||
ALLOW_UNKNOWN_PROTOCOLS: true,
|
||||
WHOLE_DOCUMENT: true,
|
||||
KEEP_CONTENT: true,
|
||||
RETURN_DOM: false,
|
||||
FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'select', 'option', 'textarea', 'canvas', 'video', 'audio'],
|
||||
FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onchange', 'onsubmit'],
|
||||
USE_PROFILES: { html: true, svg: false, svgFilters: false, mathMl: false },
|
||||
FORCE_BODY: true
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="email-content prose max-w-none dark:prose-invert"
|
||||
dangerouslySetInnerHTML={{ __html: sanitizedContent }}
|
||||
/>
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error rendering email content:', error);
|
||||
return <p>Error displaying email content</p>;
|
||||
}
|
||||
};
|
||||
|
||||
// Format the date
|
||||
|
||||
@ -105,14 +105,16 @@ export function cleanHtml(html: string): string {
|
||||
try {
|
||||
// Enhanced configuration to preserve more HTML elements for complex emails
|
||||
return DOMPurify.sanitize(html, {
|
||||
ADD_TAGS: ['style', 'meta', 'link', 'table', 'thead', 'tbody', 'tr', 'td', 'th', 'hr', 'font', 'div', 'span', 'a', 'img', 'b', 'strong', 'i', 'em', 'u', 'br', 'p', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'code', 'center', 'section', 'header', 'footer', 'article', 'nav'],
|
||||
ADD_ATTR: ['*', 'colspan', 'rowspan', 'cellpadding', 'cellspacing', 'border', 'bgcolor', 'width', 'height', 'align', 'valign', 'class', 'id', 'style', 'color', 'face', 'size', 'background', 'src', 'href', 'target', 'rel', 'alt', 'title', 'name'],
|
||||
ADD_TAGS: ['style', 'meta', 'link', 'table', 'thead', 'tbody', 'tr', 'td', 'th', 'hr', 'font', 'div', 'span', 'a', 'img', 'b', 'strong', 'i', 'em', 'u', 'br', 'p', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'code', 'center', 'section', 'header', 'footer', 'article', 'nav', 'keyframes'],
|
||||
ADD_ATTR: ['*', 'colspan', 'rowspan', 'cellpadding', 'cellspacing', 'border', 'bgcolor', 'width', 'height', 'align', 'valign', 'class', 'id', 'style', 'color', 'face', 'size', 'background', 'src', 'href', 'target', 'rel', 'alt', 'title', 'name', 'animation', 'animation-name', 'animation-duration', 'animation-fill-mode'],
|
||||
ALLOW_UNKNOWN_PROTOCOLS: true,
|
||||
WHOLE_DOCUMENT: true,
|
||||
KEEP_CONTENT: true,
|
||||
RETURN_DOM: false,
|
||||
FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'select', 'option', 'textarea', 'canvas', 'video', 'audio'],
|
||||
FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onchange', 'onsubmit']
|
||||
FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onchange', 'onsubmit'],
|
||||
USE_PROFILES: { html: true, svg: false, svgFilters: false, mathMl: false },
|
||||
FORCE_BODY: true
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error cleaning HTML:', error);
|
||||
|
||||
@ -1,20 +1,16 @@
|
||||
import { simpleParser } from 'mailparser';
|
||||
|
||||
function cleanHtml(html: string): string {
|
||||
export function cleanHtml(html: string): string {
|
||||
try {
|
||||
// Basic HTML cleaning without DOMPurify
|
||||
// More permissive cleaning that preserves styling but removes potentially harmful elements
|
||||
return html
|
||||
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '') // Remove script tags
|
||||
.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '') // Remove style tags
|
||||
.replace(/<meta[^>]*>/gi, '') // Remove meta tags
|
||||
.replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '') // Remove head
|
||||
.replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '') // Remove title
|
||||
.replace(/<body[^>]*>/gi, '') // Remove body opening tag
|
||||
.replace(/<\/body>/gi, '') // Remove body closing tag
|
||||
.replace(/<html[^>]*>/gi, '') // Remove html opening tag
|
||||
.replace(/<\/html>/gi, '') // Remove html closing tag
|
||||
.replace(/\s+/g, ' ') // Clean up whitespace
|
||||
.trim();
|
||||
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
|
||||
.replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
|
||||
.replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object>/gi, '')
|
||||
.replace(/<embed\b[^<]*(?:(?!<\/embed>)<[^<]*)*<\/embed>/gi, '')
|
||||
.replace(/<form\b[^<]*(?:(?!<\/form>)<[^<]*)*<\/form>/gi, '')
|
||||
.replace(/on\w+="[^"]*"/gi, '') // Remove inline event handlers (onclick, onload, etc.)
|
||||
.replace(/on\w+='[^']*'/gi, '');
|
||||
} catch (error) {
|
||||
console.error('Error cleaning HTML:', error);
|
||||
return html;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user