courrier clean 2

This commit is contained in:
alma 2025-04-26 14:45:14 +02:00
parent 090e703214
commit 626b35bb40

View File

@ -413,12 +413,12 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
);
}
// In forwarding, we'll make the entire content editable, not just the user message area
const completeContent = `<br/>${headerHtml}<div class="forwarded-content" style="color: #333;">${contentHtml}</div>`;
// Set the original content for display
setOriginalContent(`${headerHtml}<div class="forwarded-content" style="color: #333;">${contentHtml}</div>`);
// Don't separate original content, allow editing the entire body
setUserMessage(completeContent);
setBody(completeContent);
// Leave the editorRef empty to allow user to type their message
setUserMessage('');
setBody('');
} catch (error) {
console.error('Error formatting forwarded email:', error);
@ -505,11 +505,14 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
const handleEditorInput = (e: React.FormEvent<HTMLDivElement>) => {
if (editorRef.current) {
const content = editorRef.current.innerHTML;
// For forwarded messages, the entire content is now editable
// No need to separate user message from original content
setUserMessage(content);
setBody(content);
// Combine user message with original content
if (originalContent) {
setBody(`${content}<div class="quote-divider"></div>${originalContent}`);
} else {
setBody(content);
}
}
};
@ -633,18 +636,39 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
{/* Email editor with clear separation between user message and original content */}
<div className="border rounded-md overflow-hidden">
{/* Combined editable area that includes both user message and original content */}
{/* User's editable message area */}
<div
ref={editorRef}
contentEditable={!sending}
className="w-full p-4 min-h-[200px] focus:outline-none"
className="w-full p-4 min-h-[100px] focus:outline-none"
onInput={handleEditorInput}
style={{
direction: isRTL ? 'rtl' : 'ltr',
textAlign: isRTL ? 'right' : 'left'
}}
dangerouslySetInnerHTML={type !== 'new' ? { __html: body } : undefined}
/>
{/* Original content display with visual separation - editable for replies/forwards */}
{type !== 'new' && originalContent && (
<div className="border-t">
<div className="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500">
{type === 'forward' ? 'Forwarded content (editable)' : 'Original message (editable)'}
</div>
<div
className="p-4 bg-gray-50 text-sm original-content"
contentEditable={!sending}
dangerouslySetInnerHTML={{ __html: originalContent }}
style={{ opacity: 1.0 }}
onInput={(e) => {
const target = e.target as HTMLDivElement;
setOriginalContent(target.innerHTML);
// Update the complete body
const userPart = editorRef.current?.innerHTML || '';
setBody(`${userPart}<div class="quote-divider"></div>${target.innerHTML}`);
}}
/>
</div>
)}
</div>
</div>