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

mail page fix design

Browse Source
This commit is contained in:
alma 2025-04-21 21:58:38 +02:00
parent 32956987aa
commit 7ece04209a
3 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/courrier/page.tsx
View File

@ -1434,11 +1434,18 @@ export default function CourrierPage() {
// Get the formatted original email content
const originalContent = getReplyBody(selectedEmail, type);
// Update the compose form with the reply content
// Format with clear separator
const formattedContent = `
<div id="original-email" dir="ltr" style="margin-top: 20px; border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
${originalContent}
</div>
`;
// Update the compose form
setComposeTo(getReplyTo());
setComposeCc(getReplyCc());
setComposeSubject(getReplySubject());
setComposeBody(originalContent); // Set the formatted content instead of empty string
setComposeBody(formattedContent);
setComposeBcc('');
// Show the compose form and CC field for Reply All

35
components/ComposeEmail.tsx
View File

@ -57,22 +57,31 @@ export default function ComposeEmail({
originalEmail
}: ComposeEmailProps) {
const composeBodyRef = useRef<HTMLDivElement>(null);
const newReplyRef = useRef<HTMLDivElement>(null);
const [showOriginalContent, setShowOriginalContent] = useState(true);
useEffect(() => {
if (composeBodyRef.current) {
const decodedContent = decodeComposeContent(composeBody);
composeBodyRef.current.innerHTML = `
<div style="margin-bottom: 20px;"></div>
${decodedContent}`;
// 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);
// Create a structure with clear separation
composeBodyRef.current.innerHTML = `
<div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;"></div>
<div class="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
${decodedContent}
</div>
`;
// 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);
}
}
}, [composeBody]);
@ -263,11 +272,9 @@ ${decodedContent}`;
className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto"
style={{
minHeight: '200px',
direction: 'ltr',
textAlign: 'left',
unicodeBidi: 'isolate'
direction: 'ltr' // Explicitly set direction
}}
dir="ltr"
dir="ltr" // Force left-to-right
/>
</div>
</div>

9
lib/compose-mime-decoder.ts
View File

@ -16,8 +16,8 @@ export function decodeComposeContent(content: string): string {
// Remove head and title
.replace(/<head[^>]*>[\s\S]*?<\/head>/gi, '')
.replace(/<title[^>]*>[\s\S]*?<\/title>/gi, '')
// Force LTR direction
.replace(/<body[^>]*>/gi, '<body dir="ltr">')
// Remove body tags
.replace(/<body[^>]*>/gi, '')
.replace(/<\/body>/gi, '')
// Remove html tags
.replace(/<html[^>]*>/gi, '')
@ -57,8 +57,9 @@ export function decodeComposeContent(content: string): string {
.replace(/\s+/g, ' ')
.trim();
// Wrap in a div with forced LTR direction
return `<div dir="ltr" style="direction: ltr; text-align: left">${cleaned}</div>`;
// Ensure all content has proper direction
cleaned = `<div dir="ltr">${cleaned}</div>`;
return cleaned;
}
export function encodeComposeContent(content: string): string {