courrier clean 2
This commit is contained in:
parent
3f5e3097d3
commit
a9dc2da891
@ -90,6 +90,7 @@ export default function ComposeEmail({
|
||||
const [useRichEditor, setUseRichEditor] = useState(false);
|
||||
const [userMessage, setUserMessage] = useState('');
|
||||
const [quotedContent, setQuotedContent] = useState('');
|
||||
const [hasStartedTyping, setHasStartedTyping] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// When forwarding or replying, use rich editor
|
||||
@ -130,6 +131,7 @@ export default function ComposeEmail({
|
||||
const formattedEmail = formatEmailForForward(emailForFormatting);
|
||||
|
||||
setComposeSubject(formattedEmail.subject);
|
||||
// The email-formatter already adds proper direction, no need for extra wrappers
|
||||
setQuotedContent(formattedEmail.body);
|
||||
setComposeBody(''); // Clear user message when forwarding
|
||||
} catch (error) {
|
||||
@ -179,6 +181,7 @@ export default function ComposeEmail({
|
||||
setShowCc(true);
|
||||
}
|
||||
|
||||
// The email-formatter already adds proper direction, no need for extra wrappers
|
||||
setQuotedContent(formattedEmail.body);
|
||||
setComposeBody(''); // Clear user message when replying
|
||||
} catch (error) {
|
||||
@ -202,10 +205,17 @@ export default function ComposeEmail({
|
||||
// Handle contentEditable input changes
|
||||
const handleUserMessageChange = () => {
|
||||
if (contentEditableRef.current) {
|
||||
setUserMessage(contentEditableRef.current.innerHTML);
|
||||
const content = contentEditableRef.current.innerHTML;
|
||||
|
||||
// Check if this is the initial state or if the user has actually typed something
|
||||
if (content && content !== '<p>Write your message here...</p>') {
|
||||
setHasStartedTyping(true);
|
||||
}
|
||||
|
||||
setUserMessage(content);
|
||||
|
||||
// Combine user message with quoted content for the full email body
|
||||
const combined = `${contentEditableRef.current.innerHTML}${quotedContent ? quotedContent : ''}`;
|
||||
const combined = `${content}${quotedContent ? quotedContent : ''}`;
|
||||
setComposeBody(combined);
|
||||
}
|
||||
};
|
||||
@ -372,13 +382,27 @@ export default function ComposeEmail({
|
||||
contentEditable="true"
|
||||
className="w-full p-3 bg-white min-h-[100px] text-gray-900 email-editor"
|
||||
onInput={handleUserMessageChange}
|
||||
dangerouslySetInnerHTML={userMessage ? { __html: userMessage } : { __html: '<p>Write your message here...</p>' }}
|
||||
onFocus={() => {
|
||||
// Clear placeholder text when user focuses if they haven't started typing
|
||||
if (!hasStartedTyping && contentEditableRef.current) {
|
||||
contentEditableRef.current.innerHTML = '';
|
||||
}
|
||||
}}
|
||||
onBlur={() => {
|
||||
// Restore placeholder if user hasn't typed anything
|
||||
if (!hasStartedTyping && contentEditableRef.current && !contentEditableRef.current.innerHTML.trim()) {
|
||||
contentEditableRef.current.innerHTML = '<p>Write your message here...</p>';
|
||||
}
|
||||
}}
|
||||
dangerouslySetInnerHTML={hasStartedTyping ? { __html: userMessage } : { __html: '<p>Write your message here...</p>' }}
|
||||
style={{ direction: 'ltr', textAlign: 'left' }}
|
||||
/>
|
||||
|
||||
{/* Original email content - also editable */}
|
||||
{quotedContent && (
|
||||
<div
|
||||
className="w-full bg-gray-50 border-t border-gray-300 email-content-wrapper"
|
||||
style={{ direction: 'ltr' }}
|
||||
>
|
||||
<div
|
||||
className="p-3 opacity-90 text-sm email-content"
|
||||
@ -387,7 +411,13 @@ export default function ComposeEmail({
|
||||
onInput={(e) => {
|
||||
const target = e.currentTarget;
|
||||
setQuotedContent(target.innerHTML);
|
||||
// Update the combined content
|
||||
if (contentEditableRef.current) {
|
||||
const combined = `${contentEditableRef.current.innerHTML}${target.innerHTML}`;
|
||||
setComposeBody(combined);
|
||||
}
|
||||
}}
|
||||
style={{ direction: 'ltr', textAlign: 'left' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -399,6 +429,7 @@ 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"
|
||||
style={{ direction: 'ltr', textAlign: 'left' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -85,13 +85,13 @@ export function formatEmailForReply(
|
||||
originalContent = originalEmail.text.replace(/\n/g, '<br>');
|
||||
}
|
||||
|
||||
// Combine the header with the original content
|
||||
// Combine the header with the original content, ensuring proper direction
|
||||
const body = `
|
||||
<div>
|
||||
<div dir="ltr" style="text-align: left;">
|
||||
<br>
|
||||
<blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid #ccc; padding-left: 1ex;">
|
||||
${quoteHeader}
|
||||
<div>${originalContent || 'No content available'}</div>
|
||||
<div style="direction: ltr; text-align: left;">${originalContent || 'No content available'}</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
`;
|
||||
@ -171,9 +171,9 @@ export function createQuoteHeader(email: EmailMessageForFormatting): string {
|
||||
}
|
||||
}
|
||||
|
||||
// Create the header HTML
|
||||
// Create the header HTML with explicit LTR direction
|
||||
return `
|
||||
<div style="margin-bottom: 10px; color: #555; font-size: 0.9em;">
|
||||
<div style="margin-bottom: 10px; color: #555; font-size: 0.9em; direction: ltr; text-align: left;">
|
||||
<div><strong>From:</strong> ${fromName} <${fromEmail}></div>
|
||||
${dateFormatted ? `<div><strong>Date:</strong> ${dateFormatted}</div>` : ''}
|
||||
<div><strong>Subject:</strong> ${email.subject || 'No Subject'}</div>
|
||||
@ -206,14 +206,14 @@ export function formatEmailForForward(email: EmailMessageForFormatting): Formatt
|
||||
originalContent = email.text.replace(/\n/g, '<br>');
|
||||
}
|
||||
|
||||
// Combine the header with the original content
|
||||
// Combine the header with the original content, ensuring proper direction
|
||||
const body = `
|
||||
<div>
|
||||
<div dir="ltr" style="text-align: left;">
|
||||
<br>
|
||||
<div style="border-left: 1px solid #ccc; padding-left: 1ex; margin-left: 0.8ex;">
|
||||
<div style="font-weight: bold; margin-bottom: 10px;">---------- Forwarded message ---------</div>
|
||||
<div style="border-left: 1px solid #ccc; padding-left: 1ex; margin-left: 0.8ex; direction: ltr; text-align: left;">
|
||||
<div style="font-weight: bold; margin-bottom: 10px; direction: ltr; text-align: left;">---------- Forwarded message ---------</div>
|
||||
${forwardHeader}
|
||||
<div>${originalContent || '<div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">No content available</div>'}</div>
|
||||
<div style="direction: ltr; text-align: left;">${originalContent || '<div style="padding: 10px; text-align: center; background-color: #f8f8f8; border: 1px dashed #ccc; margin: 10px 0;">No content available</div>'}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user