- ${headerHtml}
-
-
- ${contentHtml}
-
+ // Use the client-side formatter
+ const formattedEmail = formatEmailForForward(emailForFormatting);
+
+ setComposeSubject(formattedEmail.subject);
+ setQuotedContent(formattedEmail.body);
+ setComposeBody(''); // Clear user message when forwarding
+ } catch (error) {
+ console.error("Error initializing forwarded email:", error);
+ setQuotedContent(`
+
+ Error loading original message content
-
- `;
-
- setQuotedContent(formattedQuote);
- setUserMessage(''); // Clear user input
-
- // Keep composeBody for backwards compatibility
- setComposeBody(formattedQuote);
+ `);
+ }
+ };
+
+ // Initialize reply email content
+ const initializeReplyEmail = async (email: any, replyType: 'reply' | 'replyAll' = 'reply') => {
+ console.log("Initializing reply email", email, replyType);
+ try {
+ // Convert the email to the format expected by our formatter
+ const emailForFormatting: EmailMessageForFormatting = {
+ subject: email.subject,
+ from: email.from,
+ to: email.to,
+ date: email.date,
+ html: email.html || email.content,
+ text: email.text,
+ cc: email.cc,
+ bcc: email.bcc
+ };
+
+ // Use the client-side formatter
+ const formattedEmail = formatEmailForReply(emailForFormatting, replyType);
+
+ setComposeSubject(formattedEmail.subject);
+
+ // Set recipients
+ if (formattedEmail.to) {
+ const toAddresses = formattedEmail.to.map(recipient =>
+ recipient.name ? `${recipient.name} <${recipient.address}>` : recipient.address
+ ).join(', ');
+ setComposeTo(toAddresses);
+ }
+
+ if (formattedEmail.cc && formattedEmail.cc.length > 0) {
+ const ccAddresses = formattedEmail.cc.map(recipient =>
+ recipient.name ? `${recipient.name} <${recipient.address}>` : recipient.address
+ ).join(', ');
+ setComposeCc(ccAddresses);
+ setShowCc(true);
+ }
+
+ setQuotedContent(formattedEmail.body);
+ setComposeBody(''); // Clear user message when replying
+ } catch (error) {
+ console.error("Error initializing reply email:", error);
+ setQuotedContent(`
+
+ Error loading original message content
+
+ `);
+ }
};
// Handle file attachment selection
@@ -196,39 +206,54 @@ export default function ComposeEmail({
setUserMessage(contentEditableRef.current.innerHTML);
// Combine user message with quoted content for the full email body
- const combined = `
-
- ${contentEditableRef.current.innerHTML}
-
- ${quotedContent}
- `;
-
+ const combined = `${contentEditableRef.current.innerHTML}${quotedContent ? quotedContent : ''}`;
setComposeBody(combined);
}
};
- // Handle sending with combined content
+ // Handle sending email with combined content
const handleSendWithCombinedContent = async () => {
- // For rich editor mode, ensure we combine user message with quoted content
- if (useRichEditor) {
- // Create the final combined email body
- const finalBody = `
-
- ${userMessage || ''}
-
- ${quotedContent || ''}
- `;
+ if (isSending) return;
+
+ try {
+ setIsSending(true);
- // Set the complete body and send after a brief delay to ensure state is updated
- setComposeBody(finalBody);
+ // For rich editor, combine user message with quoted content
+ if (useRichEditor) {
+ const combinedContent = `${userMessage || ''}${quotedContent ? quotedContent : ''}`;
+ setComposeBody(combinedContent);
+
+ // Wait for state update to complete
+ await new Promise(resolve => setTimeout(resolve, 0));
+ }
- // Small delay to ensure state update completes
- setTimeout(() => {
- handleSend();
- }, 50);
- } else {
- // For normal textarea mode, just use the existing handler
- handleSend();
+ // Call the provided onSend function
+ await onSend({
+ to: composeTo,
+ cc: composeCc,
+ bcc: composeBcc,
+ subject: composeSubject,
+ body: composeBody,
+ attachments: attachments
+ });
+
+ // Reset the compose state
+ setShowCompose(false);
+ setComposeTo('');
+ setComposeCc('');
+ setComposeBcc('');
+ setComposeSubject('');
+ setComposeBody('');
+ setShowCc(false);
+ setShowBcc(false);
+ setAttachments([]);
+ setUserMessage('');
+ setQuotedContent('');
+
+ } catch (error) {
+ console.error('Failed to send email:', error);
+ } finally {
+ setIsSending(false);
}
};
@@ -347,34 +372,18 @@ export default function ComposeEmail({
ref={contentEditableRef}
contentEditable="true"
className="w-full p-3 bg-white min-h-[100px] text-gray-900 email-editor"
- style={{
- direction: 'ltr',
- unicodeBidi: 'isolate',
- textAlign: 'left'
- }}
onInput={handleUserMessageChange}
- dir="ltr"
- dangerouslySetInnerHTML={userMessage ? { __html: userMessage } : { __html: '
Write your message here...
' }}
+ dangerouslySetInnerHTML={userMessage ? { __html: userMessage } : { __html: '
Write your message here...
' }}
/>
{/* Original email content - also editable */}
{quotedContent && (
{
const target = e.currentTarget;
@@ -391,8 +400,6 @@ export default function ComposeEmail({
onChange={(e) => setComposeBody(e.target.value)}
placeholder="Write your message..."
className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none email-editor"
- dir="ltr"
- style={{ direction: 'ltr', unicodeBidi: 'isolate', textAlign: 'left' }}
/>
)}
diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 5bfb89fb..5f049d11 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -2,7 +2,7 @@
import { useState, useRef, useEffect } from 'react';
import { formatEmailForReplyOrForward, EmailMessage, EmailAddress } from '@/lib/services/email-service';
-import { X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2 } from 'lucide-react';
+import { X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2, TextAlignLeft, TextAlignRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
@@ -41,6 +41,7 @@ export default function ComposeEmail({
const [showCc, setShowCc] = useState
(false);
const [showBcc, setShowBcc] = useState(false);
const [sending, setSending] = useState(false);
+ const [isRTL, setIsRTL] = useState(false);
const [attachments, setAttachments] = useState {
+ setIsRTL(!isRTL);
+ if (editorRef.current) {
+ editorRef.current.dir = !isRTL ? 'rtl' : 'ltr';
+ }
+ };
+
return (
@@ -468,6 +477,19 @@ export default function ComposeEmail({
-
On ${date}, ${from} wrote:
+
+
From: ${fromName} <${fromEmail}>
+ ${dateFormatted ? `
Date: ${dateFormatted}
` : ''}
+
Subject: ${email.subject || 'No Subject'}
+
To: ${recipients || 'No Recipients'}
+ ${email.cc ? `
Cc: ${Array.isArray(email.cc) ?
+ email.cc.map(r => r.name || r.address).join(', ') :
+ (email.cc.name || email.cc.address)}
` : ''}
+
`;
}
/**
* Format an email for forwarding
*/
-export function formatEmailForForward(email: any): {
- subject: string;
- headerHtml: string;
-} {
- // Format subject with Fwd: prefix
- const subject = formatSubject(email.subject || '(No subject)', 'forward');
+export function formatEmailForForward(email: EmailMessageForFormatting): FormattedEmail {
+ // Format the subject with Fwd: prefix
+ const subject = formatSubject(email.subject || '', 'forward');
- // Get sender information
- let fromString = 'Unknown Sender';
- if (typeof email.from === 'string') {
- fromString = email.from;
- } else if (Array.isArray(email.from)) {
- fromString = email.from.map((addr: EmailAddress) =>
- addr.name ? `${addr.name} <${addr.address}>` : addr.address
- ).join(', ');
- } else if (email.fromName && email.from) {
- fromString = email.fromName !== email.from
- ? `${email.fromName} <${email.from}>`
- : email.from;
+ // Create the forward header
+ const forwardHeader = createQuoteHeader(email);
+
+ // Get the original content, preferring HTML over plain text
+ let originalContent = '';
+ if (email.html) {
+ // Sanitize any potentially unsafe HTML
+ originalContent = DOMPurify.sanitize(email.html);
+ } else if (email.text) {
+ // Convert text to HTML by replacing newlines with br tags
+ originalContent = email.text.replace(/\n/g, '
');
}
- // Get recipient information
- let toString = '';
- if (typeof email.to === 'string') {
- toString = email.to;
- } else if (Array.isArray(email.to)) {
- toString = email.to.map((addr: EmailAddress) =>
- addr.name ? `${addr.name} <${addr.address}>` : addr.address
- ).join(', ');
- }
-
- // Create header for forwarded email
- const headerHtml = `
-
-
-
---------- Forwarded message ---------
-
From: ${fromString}
-
Date: ${email.date ? new Date(email.date).toLocaleString() : 'Unknown Date'}
-
Subject: ${email.subject || '(No subject)'}
-
To: ${toString || 'Unknown Recipient'}
+ // Combine the header with the original content
+ const body = `
+
+
+
+
---------- Forwarded message ---------
+ ${forwardHeader}
+
${originalContent || '
No content available
'}
`;
return {
subject,
- headerHtml
+ body
};
}
\ No newline at end of file