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 // Get the formatted original email content
const originalContent = getReplyBody(selectedEmail, type); 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()); setComposeTo(getReplyTo());
setComposeCc(getReplyCc()); setComposeCc(getReplyCc());
setComposeSubject(getReplySubject()); setComposeSubject(getReplySubject());
setComposeBody(originalContent); // Set the formatted content instead of empty string setComposeBody(formattedContent);
setComposeBcc(''); setComposeBcc('');
// Show the compose form and CC field for Reply All // Show the compose form and CC field for Reply All

25
components/ComposeEmail.tsx
View File

@ -57,23 +57,32 @@ export default function ComposeEmail({
originalEmail originalEmail
}: ComposeEmailProps) { }: ComposeEmailProps) {
const composeBodyRef = useRef<HTMLDivElement>(null); const composeBodyRef = useRef<HTMLDivElement>(null);
const newReplyRef = useRef<HTMLDivElement>(null);
const [showOriginalContent, setShowOriginalContent] = useState(true); const [showOriginalContent, setShowOriginalContent] = useState(true);
useEffect(() => { useEffect(() => {
if (composeBodyRef.current) { if (composeBodyRef.current) {
const decodedContent = decodeComposeContent(composeBody); const decodedContent = decodeComposeContent(composeBody);
composeBodyRef.current.innerHTML = `
<div style="margin-bottom: 20px;"></div>
${decodedContent}`;
// Place cursor at the beginning // 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 range = document.createRange();
const sel = window.getSelection(); const sel = window.getSelection();
range.setStart(composeBodyRef.current, 0); range.setStart(newReplyArea, 0);
range.collapse(true); range.collapse(true);
sel?.removeAllRanges(); sel?.removeAllRanges();
sel?.addRange(range); sel?.addRange(range);
} }
}
}, [composeBody]); }, [composeBody]);
const handleInput = (e: React.FormEvent<HTMLDivElement>) => { const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
@ -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" className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto"
style={{ style={{
minHeight: '200px', minHeight: '200px',
direction: 'ltr', direction: 'ltr' // Explicitly set direction
textAlign: 'left',
unicodeBidi: 'isolate'
}} }}
dir="ltr" dir="ltr" // Force left-to-right
/> />
</div> </div>
</div> </div>

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

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