officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

compose: rich contenteditable body — inline images land at the caret/drop point

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-07-24 08:05:40 +00:00
co-authored by Claude Opus 4.8
parent c590d6253c
commit 18d69616d2
1 changed files with 112 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/Screens/Dashboard/Email/Compose.tsx
+112 -63
View File
@@ -73,27 +73,7 @@ const RecipientInput = ({ value, onChange, placeholder, autoFocus }: { value: st
);
};
// Inline-image preview with a managed object URL (created/revoked with the file).
const InlineThumb = ({ file, onRemove }: { file: File; onRemove: () => void }) => {
const [url, setUrl] = useState('');
useEffect(() => {
const u = URL.createObjectURL(file);
setUrl(u);
return () => URL.revokeObjectURL(u);
}, [file]);
return (
<div className="group relative h-16 w-16 overflow-hidden rounded border">
{url && <img src={url} alt={file.name} className="h-full w-full object-cover" />}
<button
onClick={onRemove}
className="absolute right-0.5 top-0.5 rounded-full bg-black/60 p-0.5 text-white opacity-0 group-hover:opacity-100 cursor-pointer"
title="Remove"
>
<X className="h-3 w-3" />
</button>
</div>
);
};
const escapeHtml = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
export const ComposeModal = () => {
const client = useClient();
@@ -105,13 +85,29 @@ export const ComposeModal = () => {
const [bcc, setBcc] = useState('');
const [showBcc, setShowBcc] = useState(false);
const [subject, setSubject] = useState('');
const [body, setBody] = useState('');
const [files, setFiles] = useState<File[]>([]);
const [inlineImages, setInlineImages] = useState<File[]>([]);
const [dragging, setDragging] = useState(false);
const [bodyEmpty, setBodyEmpty] = useState(true);
const [sending, setSending] = useState(false);
const seeded = useRef<ComposeDraft | null>(null);
const fileInput = useRef<HTMLInputElement | null>(null);
const editorRef = useRef<HTMLDivElement | null>(null);
const inlineMap = useRef(new Map<string, File>()); // data-inline-id → File, for the images embedded in the body
const nextImgId = useRef(0);
const refreshEmpty = () => {
const el = editorRef.current;
setBodyEmpty(!el || (!el.textContent?.trim() && !el.querySelector('img')));
};
// Free object URLs for any images still in the editor, and clear the id→File map.
const revokeInline = () => {
editorRef.current?.querySelectorAll('img[data-inline-id]').forEach((img) => {
const src = (img as HTMLImageElement).src;
if (src.startsWith('blob:')) URL.revokeObjectURL(src);
});
inlineMap.current.clear();
};
useEffect(() => {
if (draft && draft !== seeded.current) {
@@ -122,9 +118,12 @@ export const ComposeModal = () => {
setBcc('');
setShowBcc(false);
setSubject(draft.subject ?? '');
setBody(draft.body ?? '');
setFiles([]);
setInlineImages([]);
inlineMap.current.clear();
nextImgId.current = 0;
// Seed the contenteditable body directly (uncontrolled — React never re-renders its content).
if (editorRef.current) editorRef.current.innerHTML = draft.body ? escapeHtml(draft.body).replace(/\n/g, '<br>') : '';
refreshEmpty();
}
if (!draft) seeded.current = null;
}, [draft]);
@@ -132,33 +131,74 @@ export const ComposeModal = () => {
// Clipboard images often come nameless — give them a sensible filename.
const named = (f: File) => (f.name ? f : new File([f], `pasted-${Date.now()}.${f.type.split('/')[1] || 'png'}`, { type: f.type }));
// Attach button: everything goes as a regular attachment.
// Attach button (and non-image paste/drop): everything goes as a regular attachment.
const addAttachments = (incoming: FileList | File[]) => {
const list = Array.from(incoming).map(named);
if (list.length) setFiles((prev) => [...prev, ...list]);
};
// Paste / drop: images embed inline in the body, everything else is a regular attachment.
const routeFiles = (incoming: FileList | File[]) => {
const list = Array.from(incoming).map(named);
const imgs = list.filter((f) => f.type.startsWith('image/'));
const rest = list.filter((f) => !f.type.startsWith('image/'));
if (imgs.length) setInlineImages((prev) => [...prev, ...imgs]);
if (rest.length) setFiles((prev) => [...prev, ...rest]);
// Insert an image into the body at the given range (or the current caret, or the end).
const insertImage = (file: File, at?: Range | null) => {
const el = editorRef.current;
if (!el) return;
const id = `img-${nextImgId.current++}`;
inlineMap.current.set(id, file);
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.setAttribute('data-inline-id', id);
img.style.maxWidth = '100%';
img.style.height = 'auto';
const sel = window.getSelection();
const caret = at ?? (sel && sel.rangeCount && el.contains(sel.anchorNode) ? sel.getRangeAt(0) : null);
if (caret && el.contains(caret.startContainer)) {
caret.deleteContents();
caret.insertNode(img);
caret.setStartAfter(img);
caret.collapse(true);
sel?.removeAllRanges();
sel?.addRange(caret);
} else {
el.appendChild(img);
}
refreshEmpty();
};
const onPaste = (ev: React.ClipboardEvent) => {
const pasted = Array.from(ev.clipboardData?.items ?? [])
.filter((it) => it.kind === 'file')
.map((it) => it.getAsFile())
.filter((f): f is File => !!f);
if (pasted.length) routeFiles(pasted);
// Paste inside the body: images insert at the caret, other files attach, text pastes as plain text.
const onEditorPaste = (ev: React.ClipboardEvent) => {
const fileItems = Array.from(ev.clipboardData?.items ?? []).filter((it) => it.kind === 'file');
if (fileItems.length) {
ev.preventDefault();
fileItems
.map((it) => it.getAsFile())
.filter((f): f is File => !!f)
.map(named)
.forEach((f) => (f.type.startsWith('image/') ? insertImage(f) : addAttachments([f])));
return;
}
const text = ev.clipboardData?.getData('text/plain');
if (text) {
ev.preventDefault();
document.execCommand('insertText', false, text);
}
};
const onDrop = (ev: React.DragEvent) => {
ev.preventDefault();
setDragging(false);
if (ev.dataTransfer?.files?.length) routeFiles(ev.dataTransfer.files);
const dropped = Array.from(ev.dataTransfer?.files ?? []).map(named);
if (!dropped.length) return;
// Place images at the drop point if it lands inside the body, otherwise append at the end.
const el = editorRef.current;
const point = document.caretRangeFromPoint?.(ev.clientX, ev.clientY) ?? null;
const range = point && el?.contains(point.startContainer) ? point : null;
dropped.forEach((f) => (f.type.startsWith('image/') ? insertImage(f, range) : addAttachments([f])));
};
const close = () => setDraft(null);
const close = () => {
revokeInline();
setDraft(null);
};
const send = async () => {
if (!to.trim()) {
@@ -172,16 +212,30 @@ export const ComposeModal = () => {
if (cc.trim()) fd.append('cc', cc);
if (bcc.trim()) fd.append('bcc', bcc);
fd.append('subject', subject);
fd.append('body', body);
if (draft?.inReplyTo) fd.append('inReplyTo', draft.inReplyTo);
files.forEach((f) => fd.append('files', f));
// Inline images: the backend gives each a cid `inline-<i>` in this order; the html references them.
if (inlineImages.length) {
const esc = body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
const imgs = inlineImages.map((_, i) => `<div><img src="cid:inline-${i}" style="max-width:100%" /></div>`).join('');
fd.append('html', `${esc}${esc ? '<br>' : ''}${imgs}`);
inlineImages.forEach((f) => fd.append('inline', f));
// Serialize the body. Clone it, rewrite each inline <img> to a `cid:inline-N` ref (backend
// matches by order), and collect those files. Plain text goes as the fallback part.
const el = editorRef.current;
const inlineFiles: File[] = [];
if (el) {
const clone = el.cloneNode(true) as HTMLElement;
clone.querySelectorAll('img[data-inline-id]').forEach((node) => {
const img = node as HTMLImageElement;
const file = inlineMap.current.get(img.getAttribute('data-inline-id') ?? '');
if (!file) return img.remove();
img.setAttribute('src', `cid:inline-${inlineFiles.length}`);
img.removeAttribute('data-inline-id');
inlineFiles.push(file);
});
fd.append('body', el.innerText);
if (inlineFiles.length) {
fd.append('html', clone.innerHTML);
inlineFiles.forEach((f) => fd.append('inline', f));
}
}
await client.post('/email/send', fd);
toast.success('Email sent');
// Gmail files the sent copy in Sent, so refresh the list to surface it.
@@ -202,7 +256,6 @@ export const ComposeModal = () => {
<Dialog open onOpenChange={(o) => !o && close()}>
<DialogContent
className="flex h-[70vh] max-w-2xl flex-col gap-0 overflow-hidden p-0"
onPaste={onPaste}
onDrop={onDrop}
onDragOver={(ev) => {
ev.preventDefault();
@@ -261,20 +314,16 @@ export const ComposeModal = () => {
placeholder="Subject"
className="border-b bg-transparent px-4 py-2 text-sm outline-none placeholder:opacity-40"
/>
<textarea
value={body}
onChange={(ev) => setBody(ev.target.value)}
placeholder="Write your message…"
className="flex-1 resize-none bg-transparent px-4 py-3 text-sm outline-none placeholder:opacity-40"
/>
{inlineImages.length > 0 && (
<div className="flex flex-wrap gap-2 border-t px-4 py-2">
{inlineImages.map((f, i) => (
<InlineThumb key={`${f.name}-${i}`} file={f} onRemove={() => setInlineImages((prev) => prev.filter((_, idx) => idx !== i))} />
))}
</div>
)}
<div className="relative flex-1 overflow-hidden">
{bodyEmpty && <div className="pointer-events-none absolute left-4 top-3 text-sm opacity-40">Write your message…</div>}
<div
ref={editorRef}
contentEditable
onInput={refreshEmpty}
onPaste={onEditorPaste}
className="h-full overflow-y-auto px-4 py-3 text-sm outline-none [&_img]:my-1 [&_img]:rounded"
/>
</div>
{files.length > 0 && (
<div className="flex flex-wrap gap-1.5 border-t px-4 py-2">