alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mail page fix design dang

Browse Source
This commit is contained in:
alma 2025-04-21 22:34:54 +02:00
parent 8747c1cab6
commit 3ef30ccab0
1 changed files with 29 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
components/ComposeEmail.tsx
View File

@ -82,59 +82,42 @@ export default function ComposeEmail({
useEffect(() => {
if (composeBodyRef.current) {
// Initialize the content structure
const originalContent = replyTo || forwardFrom ? `
<div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;"></div>
<div id="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
// Initialize the content structure with both new reply area and original content in a single contentEditable div
const content = replyTo || forwardFrom ? `
<br/>
<br/>
${forwardFrom ? `
---------- Forwarded message ---------<br/>
From: ${forwardFrom.from}<br/>
Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
Subject: ${forwardFrom.subject}<br/>
To: ${forwardFrom.to}<br/>
${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
<br/>
` : `
On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:<br/>
`}
<blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid rgb(204,204,204); padding-left: 1ex;">
${composeBody}
</div>
` : composeBody;
</blockquote>
` : '';
composeBodyRef.current.innerHTML = originalContent;
composeBodyRef.current.innerHTML = content;
// Place cursor at the beginning of new reply area
const newReplyArea = composeBodyRef.current.querySelector('#new-reply-area');
if (newReplyArea) {
const range = document.createRange();
const sel = window.getSelection();
range.setStart(newReplyArea, 0);
range.collapse(true);
sel?.removeAllRanges();
sel?.addRange(range);
}
// Place cursor at the beginning
const range = document.createRange();
const sel = window.getSelection();
range.setStart(composeBodyRef.current, 0);
range.collapse(true);
sel?.removeAllRanges();
sel?.addRange(range);
}
}, [composeBody, replyTo, forwardFrom]);
// Modified input handler to prevent nested structures
// Modified input handler to work with the single contentEditable area
const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
if (!composeBodyRef.current) return;
// Get the new reply content
const newReplyArea = composeBodyRef.current.querySelector('#new-reply-area');
const originalEmailArea = composeBodyRef.current.querySelector('#original-email');
if (!newReplyArea || !originalEmailArea) return;
const newReplyContent = newReplyArea.innerHTML;
const originalContent = originalEmailArea.innerHTML;
// Update local state
setComposeBody(newReplyContent);
// Combine both contents while maintaining formatting
const formattedContent = `
<div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;">
${newReplyContent}
</div>
<div id="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
${originalContent}
</div>
`;
// Update the compose form
if (onBodyChange) {
onBodyChange(formattedContent);
}
setComposeBody(composeBodyRef.current.innerHTML);
};
const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
@ -274,22 +257,7 @@ export default function ComposeEmail({
/>
</div>
{/* Original Email Content Preview - Move it above the message body */}
{(replyTo || forwardFrom) && (
<div className="flex-none border rounded-md p-4 bg-gray-50">
<div className="flex items-center justify-between mb-2">
<h4 className="text-sm font-medium text-gray-700">
{forwardFrom ? 'Forwarded Message' : 'Original Message'}
</h4>
</div>
<div
className="prose max-w-none text-sm text-gray-600"
dangerouslySetInnerHTML={{ __html: composeBody }}
/>
</div>
)}
{/* Message Body */}
{/* Message Body - Single contentEditable area */}
<div className="flex-1 min-h-[200px] flex flex-col">
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
<div