diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 46711f7d..97b5e98b 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -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 = `
+
+ ${originalContent}
+
+ `;
+
+ // 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
diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 7bd7165b..999d9a37 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -57,22 +57,31 @@ export default function ComposeEmail({
originalEmail
}: ComposeEmailProps) {
const composeBodyRef = useRef(null);
+ const newReplyRef = useRef(null);
const [showOriginalContent, setShowOriginalContent] = useState(true);
useEffect(() => {
if (composeBodyRef.current) {
const decodedContent = decodeComposeContent(composeBody);
- composeBodyRef.current.innerHTML = `
-
-${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 = `
+
+
+ ${decodedContent}
+
+ `;
+
+ // 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
/>
diff --git a/lib/compose-mime-decoder.ts b/lib/compose-mime-decoder.ts
index 03f3b9d3..47fc6349 100644
--- a/lib/compose-mime-decoder.ts
+++ b/lib/compose-mime-decoder.ts
@@ -16,8 +16,8 @@ export function decodeComposeContent(content: string): string {
// Remove head and title
.replace(/]*>[\s\S]*?<\/head>/gi, '')
.replace(/]*>[\s\S]*?<\/title>/gi, '')
- // Force LTR direction
- .replace(/]*>/gi, '')
+ // Remove body tags
+ .replace(/]*>/gi, '')
.replace(/<\/body>/gi, '')
// Remove html tags
.replace(/]*>/gi, '')
@@ -57,8 +57,9 @@ export function decodeComposeContent(content: string): string {
.replace(/\s+/g, ' ')
.trim();
- // Wrap in a div with forced LTR direction
- return `${cleaned}
`;
+ // Ensure all content has proper direction
+ cleaned = `${cleaned}
`;
+ return cleaned;
}
export function encodeComposeContent(content: string): string {