mail page fix design
This commit is contained in:
parent
0549e3f020
commit
69d4a69713
@ -328,93 +328,61 @@ const initialSidebarItems = [
|
||||
}
|
||||
];
|
||||
|
||||
function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward'): string {
|
||||
if (!email.body) return '';
|
||||
function getReplyBody(email: any, type: 'reply' | 'reply-all' | 'forward' = 'reply'): string {
|
||||
let content = '';
|
||||
|
||||
try {
|
||||
// Split email into headers and body
|
||||
const [headersPart, ...bodyParts] = email.body.split('\r\n\r\n');
|
||||
if (!headersPart || bodyParts.length === 0) {
|
||||
throw new Error('Invalid email format: missing headers or body');
|
||||
}
|
||||
|
||||
const body = bodyParts.join('\r\n\r\n');
|
||||
|
||||
// Parse headers using Infomaniak MIME decoder
|
||||
const headerInfo = parseEmailHeaders(headersPart);
|
||||
const boundary = extractBoundary(headersPart);
|
||||
|
||||
let content = '';
|
||||
|
||||
// If it's a multipart email
|
||||
if (boundary) {
|
||||
const parts = body.split(`--${boundary}`);
|
||||
|
||||
// Find HTML part first, fallback to text part
|
||||
const htmlPart = parts.find(part => part.toLowerCase().includes('content-type: text/html'));
|
||||
const textPart = parts.find(part => part.toLowerCase().includes('content-type: text/plain'));
|
||||
|
||||
const selectedPart = htmlPart || textPart;
|
||||
if (selectedPart) {
|
||||
const [partHeaders, ...partBodyParts] = selectedPart.split('\r\n\r\n');
|
||||
const partBody = partBodyParts.join('\r\n\r\n');
|
||||
const partHeaderInfo = parseEmailHeaders(partHeaders);
|
||||
|
||||
content = partHeaderInfo.encoding === 'quoted-printable'
|
||||
? decodeQuotedPrintable(partBody, partHeaderInfo.charset)
|
||||
: partBody;
|
||||
if (email.body) {
|
||||
// Handle multipart emails
|
||||
if (email.body.includes('Content-Type: multipart/alternative')) {
|
||||
const parts = email.body.split('--');
|
||||
for (const part of parts) {
|
||||
if (part.includes('Content-Type: text/html')) {
|
||||
content = part.split('\n\n')[1] || '';
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
content = headerInfo.encoding === 'quoted-printable'
|
||||
? decodeQuotedPrintable(body, headerInfo.charset)
|
||||
: body;
|
||||
content = email.body;
|
||||
}
|
||||
|
||||
// Convert plain text to HTML if needed
|
||||
if (!headerInfo.contentType.includes('text/html')) {
|
||||
content = content
|
||||
.split('\n')
|
||||
.map(line => {
|
||||
if (!line.trim()) return '<br>';
|
||||
if (line.startsWith('>')) {
|
||||
return `<p class="text-gray-600" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">${line}</p>`;
|
||||
}
|
||||
return `<p dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">${line}</p>`;
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
|
||||
// Clean HTML content
|
||||
content = cleanHtml(content);
|
||||
|
||||
const date = new Date(email.date).toLocaleString();
|
||||
|
||||
if (type === 'forward') {
|
||||
return `
|
||||
<div class="prose max-w-none" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">
|
||||
<div class="border-l-4 border-gray-300 pl-4 my-4">
|
||||
<p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;"><strong>From:</strong> ${email.from}</p>
|
||||
<p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;"><strong>Date:</strong> ${date}</p>
|
||||
<p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;"><strong>Subject:</strong> ${email.subject}</p>
|
||||
<p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;"><strong>To:</strong> ${Array.isArray(email.to) ? email.to.join(', ') : email.to}</p>
|
||||
<div class="mt-4 prose-sm" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">${content}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
return `
|
||||
<div class="prose max-w-none" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">
|
||||
<div class="border-l-4 border-gray-300 pl-4 my-4">
|
||||
<p class="text-sm text-gray-600 mb-2" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">On ${date}, ${email.from} wrote:</p>
|
||||
<div class="mt-4 prose-sm" dir="ltr" style="unicode-bidi: bidi-override; direction: ltr;">${content}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error processing email body:', error);
|
||||
return '';
|
||||
|
||||
// Clean and structure the content
|
||||
content = content
|
||||
.replace(/<br\s*\/?>/gi, '\n')
|
||||
.replace(/<p>/gi, '\n')
|
||||
.replace(/<\/p>/gi, '\n')
|
||||
.replace(/<div>/gi, '\n')
|
||||
.replace(/<\/div>/gi, '\n')
|
||||
.trim();
|
||||
|
||||
// Convert plain text to HTML while preserving formatting
|
||||
content = content
|
||||
.split('\n')
|
||||
.map(line => `<p>${line}</p>`)
|
||||
.join('');
|
||||
|
||||
// Add proper quoting structure
|
||||
const quotedContent = `
|
||||
<blockquote style="border-left: 2px solid #ccc; padding-left: 10px; margin: 10px 0 0 0">
|
||||
${content}
|
||||
</blockquote>
|
||||
`;
|
||||
|
||||
// Add metadata based on type
|
||||
const metadata = `
|
||||
<div style="color: #666; font-size: 0.9em; margin-bottom: 10px;">
|
||||
${type === 'forward' ? 'Forwarded message' : 'Original message'}<br/>
|
||||
From: ${email.from}<br/>
|
||||
Date: ${new Date(email.date).toLocaleString()}<br/>
|
||||
Subject: ${email.subject}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return type === 'forward'
|
||||
? `<div>${metadata}${quotedContent}</div>`
|
||||
: `<div><br/><br/>${metadata}${quotedContent}</div>`;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
export default function CourrierPage() {
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Paperclip, X } from 'lucide-react';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
// Direction detection utility
|
||||
function detectDirection(text: string): 'rtl' | 'ltr' {
|
||||
const rtlChars = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
|
||||
return rtlChars.test(text) ? 'rtl' : 'ltr';
|
||||
}
|
||||
|
||||
interface ComposeEmailProps {
|
||||
showCompose: boolean;
|
||||
@ -49,17 +56,22 @@ export default function ComposeEmail({
|
||||
setAttachments,
|
||||
handleSend
|
||||
}: ComposeEmailProps) {
|
||||
const composeBodyRef = useRef<HTMLDivElement>(null);
|
||||
const editorRef = useRef<HTMLDivElement>(null);
|
||||
const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr');
|
||||
|
||||
useEffect(() => {
|
||||
if (composeBodyRef.current) {
|
||||
composeBodyRef.current.innerHTML = composeBody;
|
||||
if (editorRef.current) {
|
||||
editorRef.current.innerHTML = composeBody;
|
||||
const plainText = editorRef.current.textContent || '';
|
||||
setDirection(detectDirection(plainText));
|
||||
}
|
||||
}, [composeBody]);
|
||||
|
||||
const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
|
||||
if (composeBodyRef.current) {
|
||||
setComposeBody(composeBodyRef.current.innerHTML);
|
||||
const handleInput = () => {
|
||||
if (editorRef.current) {
|
||||
const plainText = editorRef.current.textContent || '';
|
||||
setDirection(detectDirection(plainText));
|
||||
setComposeBody(editorRef.current.innerHTML);
|
||||
}
|
||||
};
|
||||
|
||||
@ -213,7 +225,7 @@ export default function ComposeEmail({
|
||||
{/* Message Body */}
|
||||
<div className="flex-1 min-h-[200px] overflow-auto">
|
||||
<div
|
||||
ref={composeBodyRef}
|
||||
ref={editorRef}
|
||||
contentEditable
|
||||
className="prose max-w-none min-h-[200px] p-4 border border-gray-300 rounded-lg bg-white"
|
||||
style={{
|
||||
@ -224,11 +236,9 @@ export default function ComposeEmail({
|
||||
fontFamily: 'inherit',
|
||||
fontSize: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
textAlign: 'left',
|
||||
direction: 'ltr',
|
||||
unicodeBidi: 'bidi-override'
|
||||
textAlign: 'left'
|
||||
}}
|
||||
dir="ltr"
|
||||
dir={direction}
|
||||
onInput={handleInput}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user