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

mime change

Browse Source
This commit is contained in:
alma 2025-04-24 17:08:15 +02:00
parent ed2752ad0b
commit a794ca5e1b
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/ComposeEmail.tsx
View File

@ -85,7 +85,7 @@ export default function ComposeEmail({
if (composeBodyRef.current && !isInitialized) { if (composeBodyRef.current && !isInitialized) {
// Initialize the content structure with both new reply area and original content in a single contentEditable div // Initialize the content structure with both new reply area and original content in a single contentEditable div
const content = replyTo || forwardFrom ? ` const content = replyTo || forwardFrom ? `
<div class="compose-area" contenteditable="true"></div> <div class="compose-area" contenteditable="true">${initialBody || ''}</div>
<div class="quoted-content" contenteditable="false"> <div class="quoted-content" contenteditable="false">
${forwardFrom ? ` ${forwardFrom ? `
---------- Forwarded message ---------<br/> ---------- Forwarded message ---------<br/>
@ -102,7 +102,7 @@ export default function ComposeEmail({
${composeBody} ${composeBody}
</blockquote> </blockquote>
</div> </div>
` : ''; ` : `<div class="compose-area" contenteditable="true">${initialBody || ''}</div>`;
composeBodyRef.current.innerHTML = content; composeBodyRef.current.innerHTML = content;
setIsInitialized(true); setIsInitialized(true);
@ -116,16 +116,18 @@ export default function ComposeEmail({
range.collapse(true); range.collapse(true);
sel?.removeAllRanges(); sel?.removeAllRanges();
sel?.addRange(range); sel?.addRange(range);
(composeArea as HTMLElement).focus();
} }
} }
}, [composeBody, replyTo, forwardFrom, isInitialized]); }, [composeBody, replyTo, forwardFrom, isInitialized, initialBody]);
// Modified input handler to work with the single contentEditable area // Modified input handler to work with the single contentEditable area
const handleInput = (e: React.FormEvent<HTMLDivElement>) => { const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
if (!composeBodyRef.current) return; if (!composeBodyRef.current) return;
const composeArea = composeBodyRef.current.querySelector('.compose-area'); const content = composeBodyRef.current.innerHTML;
if (composeArea) { setComposeBody(content);
setComposeBody(composeArea.innerHTML); if (onBodyChange) {
onBodyChange(content);
} }
}; };
@ -271,6 +273,8 @@ export default function ComposeEmail({
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label> <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
<div <div
ref={composeBodyRef} ref={composeBodyRef}
contentEditable="true"
onInput={handleInput}
className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-gray-900 overflow-y-auto focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-gray-900 overflow-y-auto focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
style={{ direction: 'ltr' }} style={{ direction: 'ltr' }}
dir="ltr" dir="ltr"
@ -278,6 +282,7 @@ export default function ComposeEmail({
role="textbox" role="textbox"
aria-multiline="true" aria-multiline="true"
tabIndex={0} tabIndex={0}
suppressContentEditableWarning={true}
> >
<style>{` <style>{`
.compose-area { .compose-area {
@ -295,6 +300,12 @@ export default function ComposeEmail({
padding-left: 1ex; padding-left: 1ex;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
} }
[contenteditable="true"] {
outline: none;
}
[contenteditable="true"]:focus {
outline: none;
}
`}</style> `}</style>
</div> </div>
</div> </div>