) - stop before either so the // signature splice never eats into the quoted body. const removeUntil = endEl && endEl.parentNode === parent ? endEl : null; const isQuoteBoundary = (n: Node | null): boolean => { if (!n || n.nodeType !== 1) return false; const el = n as Element; return el.tagName === 'BLOCKQUOTE' || el.hasAttribute('data-quoted-html'); }; const toRemove: Node[] = []; let cursor: Node | null = startEl; while (cursor) { toRemove.push(cursor); if (cursor === removeUntil) break; const next: Node | null = cursor.nextSibling; if (!removeUntil && isQuoteBoundary(next)) break; cursor = next; } const insertBefore = toRemove[toRemove.length - 1]?.nextSibling ?? null; toRemove.forEach((node) => parent.removeChild(node)); replacementNodes.forEach((node) => parent.insertBefore(node, insertBefore)); const nextHtml = doc.body.innerHTML; if (nextHtml !== currentHtml) { editor.commands.setContent(nextHtml, { emitUpdate: true }); } // Intentionally keyed to the signature-relevant fields plus the internal // prev*Ref guards above; depending on the whole `signatureIdentity` object // would re-run on unrelated identity-field changes and re-splice the // signature into the live editor. // eslint-disable-next-line react-hooks/exhaustive-deps }, [signatureIdentity?.id, signatureIdentity?.htmlSignature, signatureIdentity?.textSignature, signatureSeparatorEnabled, signaturePosition, mode, plainTextMode]); useEffect(() => { const handleClickOutsideSendMenu = (event: MouseEvent) => { if (!sendMenuRef.current?.contains(event.target as Node)) { setShowSendMenu(false); } }; document.addEventListener('mousedown', handleClickOutsideSendMenu); return () => document.removeEventListener('mousedown', handleClickOutsideSendMenu); }, []); const openScheduleDialog = useCallback(() => { setScheduleError(''); setScheduleValue(getDefaultScheduleValue()); setShowScheduleDialog(true); setShowSendMenu(false); }, []); useEffect(() => { if (!autoSelectReplyIdentity) return; if (selectedIdentityId || initialData?.selectedIdentityId) return; if (mode !== 'reply' && mode !== 'replyAll') return; const resolved = resolveReplyFrom(identities, { to: replyTo?.to, cc: replyTo?.cc, bcc: replyTo?.bcc, }); if (resolved) { setSelectedIdentityId(resolved.identityId); if (resolved.overrideEmail && !fromOverrideEnabled) { setFromOverrideEnabled(true); setFromOverrideEmail(resolved.overrideEmail); if (resolved.overrideName) setFromOverrideName(resolved.overrideName); } return; } // Fallback: match identity by the account's email when replying from unified view if (replyTo?.accountId) { const account = useAccountStore.getState().getAccountById(replyTo.accountId); if (account?.email) { const accountEmail = account.email.trim().toLowerCase(); const accountIdentity = identities.find( (identity) => identity.email.trim().toLowerCase() === accountEmail ); if (accountIdentity) { setSelectedIdentityId(accountIdentity.id); } } } }, [ autoSelectReplyIdentity, fromOverrideEnabled, identities, initialData?.selectedIdentityId, mode, replyTo?.accountId, replyTo?.bcc, replyTo?.cc, replyTo?.to, selectedIdentityId, ]); // Hydrate inline images referenced by the quoted body (issue #163). // `getInitialBody` rewrites `

` to placeholder src + // data-cid; here we (1) register each inline attachment in inlineImagesRef // so the send path re-attaches the blob with the right cid, and (2) fetch // each blob as a data URL and swap it into the body so the editor actually // shows the image instead of a blank placeholder. useEffect(() => { if (plainTextMode) return; if (mode !== 'reply' && mode !== 'replyAll' && mode !== 'forward') return; if (!composerClient || !replyTo?.attachments?.length) return; const inlineAtts = replyTo.attachments.filter((att) => att.cid && att.disposition === 'inline' && (att.type || '').startsWith('image/') ); if (inlineAtts.length === 0) return; // Seed the ref synchronously so a fast Send still attaches the right blobs // even if the FileReader work below hasn't resolved yet. for (const att of inlineAtts) { if (!att.cid) continue; if (inlineImagesRef.current.some((e) => e.cid === att.cid)) continue; inlineImagesRef.current.push({ cid: att.cid, blobId: att.blobId, type: att.type, name: att.name || 'inline', size: att.size, dataUrl: '', }); } let cancelled = false; (async () => { const updates = new Map(); for (const att of inlineAtts) { if (!att.cid) continue; try { const buffer = await composerClient.fetchBlobArrayBuffer( att.blobId, att.name || 'inline', att.type, ); if (cancelled) return; const blob = new Blob([buffer], { type: att.type }); const dataUrl = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result as string); reader.onerror = () => reject(reader.error); reader.readAsDataURL(blob); }); if (cancelled) return; const entry = inlineImagesRef.current.find((e) => e.cid === att.cid); if (entry) entry.dataUrl = dataUrl; updates.set(att.cid, dataUrl); } catch (err) { debug.error('Failed to load inline image for compose', err); } } if (cancelled || updates.size === 0) return; setBody((prev) => replaceInlineImagePlaceholders(prev, updates)); })(); return () => { cancelled = true; }; // We deliberately hydrate once per composer open - subsequent replyTo // object identity churn from parent renders shouldn't refetch. // eslint-disable-next-line react-hooks/exhaustive-deps }, [composerClient, plainTextMode, mode]); const composerSignatureHtml = signatureIdentity?.htmlSignature ? `

${sanitizeSignatureHtml(signatureIdentity.htmlSignature)}

` : signatureIdentity?.textSignature ? `

${getPlainTextSignature(signatureIdentity).replace(/&/g, '&').replace(//g, '>').replace(/\n/g, '
')}

` : ''; const getAutocomplete = useContactStore((s) => s.getAutocomplete); const addToTrustedSendersBook = useContactStore((s) => s.addToTrustedSendersBook); const addTrustedSender = useSettingsStore((s) => s.addTrustedSender); const trustedSendersAddressBook = useSettingsStore((s) => s.trustedSendersAddressBook); const addTemplate = useTemplateStore((s) => s.addTemplate); const sendRawEmail = useEmailStore((s) => s.sendRawEmail); const smimeStore = useSmimeStore(); // Determine S/MIME availability for the selected identity const currentSmimeIdentityId = selectedIdentityId || primaryIdentity?.id; const smimeKeyRecord = currentSmimeIdentityId ? smimeStore.getKeyRecordForIdentity(currentSmimeIdentityId) : undefined; const canSmimeSign = !!smimeKeyRecord; const canSmimeEncrypt = (() => { if (!smimeKeyRecord) return false; const allRecipients = [ ...withInput(to, toInput), ...withInput(cc, ccInput), ...withInput(bcc, bccInput), ].map(r => r.email); if (allRecipients.length === 0) return false; const { missing } = smimeStore.getRecipientCerts(allRecipients); return missing.length === 0; })(); // Initialize S/MIME defaults from store when identity changes useEffect(() => { if (currentSmimeIdentityId) { setSmimeSign(!!smimeStore.defaultSignIdentity[currentSmimeIdentityId] && canSmimeSign); } setSmimeEncrypt(smimeStore.defaultEncrypt && canSmimeEncrypt); // Only run when identity changes, not on every recipient edit // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentSmimeIdentityId]); // Serialized recipient strings for ComposerDraftData (string-shaped) and for // by-value dirty comparison. Folds in any uncommitted typed text. const toStr = formatRecipientList(withInput(to, toInput)); const ccStr = formatRecipientList(withInput(cc, ccInput)); const bccStr = formatRecipientList(withInput(bcc, bccInput)); // Keep a ref to current state for the unmount save const stateRef = useRef({ to: toStr, cc: ccStr, bcc: bccStr, subject, body, showCc, showBcc, selectedIdentityId, subAddressTag, draftId, fromOverrideEnabled, fromOverrideEmail, fromOverrideName }); stateRef.current = { to: toStr, cc: ccStr, bcc: bccStr, subject, body, showCc, showBcc, selectedIdentityId, subAddressTag, draftId, fromOverrideEnabled, fromOverrideEmail, fromOverrideName }; // Track initial values for dirty detection (captured once on first render) const initialValuesRef = useRef({ to: toStr, cc: ccStr, bcc: bccStr, subject, body, attachmentCount: attachments.length }); const isDirtyRef = useRef(false); isDirtyRef.current = toStr !== initialValuesRef.current.to || ccStr !== initialValuesRef.current.cc || bccStr !== initialValuesRef.current.bcc || subject !== initialValuesRef.current.subject || body !== initialValuesRef.current.body || attachments.length > initialValuesRef.current.attachmentCount; // Ref to latest saveDraft for use in event handlers with stale closures const saveDraftRef = useRef<() => Promise>(() => Promise.resolve(null)); // Set by the explicit close paths (clean close, save-and-close, discard) so // the unmount auto-save below doesn't fire and stash a stale pendingDraft // on the parent (#329 D). Without this, "Reply → Discard → New mail" would // open the next composer with the discarded reply's mode/replyTo. const explicitCloseRef = useRef(false); // Auto-save state on unmount (when user navigates away without explicitly closing) useEffect(() => { return () => { if (explicitCloseRef.current) return; if (onSaveState && isDirtyRef.current) { const s = stateRef.current; onSaveState({ ...s, mode, replyTo, }); } }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Auto-save draft to server on page close (best-effort) useEffect(() => { const handleBeforeUnload = () => { if (isDirtyRef.current) { saveDraftRef.current(); } }; window.addEventListener('beforeunload', handleBeforeUnload); return () => window.removeEventListener('beforeunload', handleBeforeUnload); }, []); // Auto-focus the To field when composing a new email or forwarding useEffect(() => { if (mode === 'forward' || mode === 'compose') { // Small delay to ensure the input is rendered const timer = setTimeout(() => { toInputRef.current?.focus(); }, 100); return () => clearTimeout(timer); } }, [mode]); const [autocompleteResults, setAutocompleteResults] = useState>([]); const [activeAutoField, setActiveAutoField] = useState<'to' | 'cc' | 'bcc' | null>(null); const [autoSelectedIndex, setAutoSelectedIndex] = useState(-1); const autocompleteTimeoutRef = useRef(null); const toInputRef = useRef(null); const ccInputRef = useRef(null); const bccInputRef = useRef(null); const subjectInputRef = useRef(null); const bodyRef = useRef(null); const editorContainerRef = useRef(null); const toDropdownRef = useRef(null); const ccDropdownRef = useRef(null); const bccDropdownRef = useRef(null); const focusSubject = useCallback(() => { subjectInputRef.current?.focus(); }, []); const focusBody = useCallback(() => { if (plainTextMode) { bodyRef.current?.focus(); } else { const proseMirror = editorContainerRef.current?.querySelector('.ProseMirror') as HTMLElement | null; proseMirror?.focus(); } }, [plainTextMode]); const handleMoveChip = useCallback((recipient: Recipient, fromField: 'to' | 'cc' | 'bcc', toField: 'to' | 'cc' | 'bcc') => { if (fromField === toField) return; const setters = { to: setTo, cc: setCc, bcc: setBcc }; const sameRecipient = (a: Recipient, b: Recipient) => a.email === b.email && (a.name ?? '') === (b.name ?? ''); setters[fromField](prev => { const idx = prev.findIndex(r => sameRecipient(r, recipient)); return idx === -1 ? prev : prev.filter((_, i) => i !== idx); }); setters[toField](prev => prev.some(r => sameRecipient(r, recipient)) ? prev : [...prev, recipient]); if (toField === 'cc') setShowCc(true); if (toField === 'bcc') setShowBcc(true); }, [setTo, setCc, setBcc, setShowCc, setShowBcc]); const handleAutocomplete = useCallback((inputText: string, field: 'to' | 'cc' | 'bcc') => { if (autocompleteTimeoutRef.current) { clearTimeout(autocompleteTimeoutRef.current); } const query = inputText.trim(); if (query.length < 1) { setAutocompleteResults([]); setActiveAutoField(null); setAutoSelectedIndex(-1); return; } autocompleteTimeoutRef.current = setTimeout(async () => { const localResults = getAutocomplete(query); // Let plugins contribute extra suggestions (Slack handles, GitHub, CRM, …). const initial: RecipientSuggestion[] = localResults.map(r => ({ name: r.name, email: r.email })); const merged = await contactHooks.onProvideRecipientSuggestions.transform(initial, { query }); setAutocompleteResults(merged.map(s => ({ name: s.name, email: s.email }))); setActiveAutoField(merged.length > 0 ? field : null); setAutoSelectedIndex(-1); }, 200); }, [getAutocomplete]); const insertAutocomplete = (suggestion: { name: string; email: string }, field: 'to' | 'cc' | 'bcc') => { const setter = field === 'to' ? setTo : field === 'cc' ? setCc : setBcc; const inputSetter = field === 'to' ? setToInput : field === 'cc' ? setCcInput : setBccInput; setter(prev => [...prev, toRecipient(suggestion)]); inputSetter(''); setAutocompleteResults([]); setActiveAutoField(null); setAutoSelectedIndex(-1); const ref = field === 'to' ? toInputRef : field === 'cc' ? ccInputRef : bccInputRef; ref.current?.focus(); }; const handleAutoBlur = useCallback((e: React.FocusEvent, field: 'to' | 'cc' | 'bcc') => { const dropdownRef = field === 'to' ? toDropdownRef : field === 'cc' ? ccDropdownRef : bccDropdownRef; const relatedTarget = e.relatedTarget as Node | null; if (relatedTarget && dropdownRef.current?.contains(relatedTarget)) { return; } if (activeAutoField === field) { setActiveAutoField(null); setAutoSelectedIndex(-1); } }, [activeAutoField]); const handleAutoKeyDown = (e: React.KeyboardEvent, field: 'to' | 'cc' | 'bcc') => { if (!activeAutoField || autocompleteResults.length === 0) return; if (e.key === 'ArrowDown') { e.preventDefault(); setAutoSelectedIndex((prev) => Math.min(prev + 1, autocompleteResults.length - 1)); } else if (e.key === 'ArrowUp') { e.preventDefault(); setAutoSelectedIndex((prev) => Math.max(prev - 1, -1)); } else if (e.key === 'Enter' && autoSelectedIndex >= 0) { e.preventDefault(); insertAutocomplete(autocompleteResults[autoSelectedIndex], field); } else if (e.key === 'Escape') { setAutocompleteResults([]); setActiveAutoField(null); setAutoSelectedIndex(-1); } }; const handleTemplateSelect = useCallback((template: EmailTemplate, filledValues: Record) => { const filledSubject = Object.keys(filledValues).length > 0 ? substitutePlaceholders(template.subject, filledValues) : template.subject; const filledBody = Object.keys(filledValues).length > 0 ? substitutePlaceholders(template.body, filledValues) : template.body; // In plain text mode, use template body as-is; otherwise convert to HTML const bodyContent = plainTextMode ? filledBody : `

${filledBody.replace(/&/g, '&').replace(//g, '>').replace(/\n/g, '
')}

`; if (mode === 'compose') { setSubject(filledSubject); setBody(bodyContent); if (template.defaultRecipients?.to?.length) { setTo(template.defaultRecipients.to.map(parseRecipient)); } if (template.defaultRecipients?.cc?.length) { setCc(template.defaultRecipients.cc.map(parseRecipient)); setShowCc(true); } if (template.defaultRecipients?.bcc?.length) { setBcc(template.defaultRecipients.bcc.map(parseRecipient)); setShowBcc(true); } } else { setBody((prev) => bodyContent + (plainTextMode ? '\n' : '') + prev); } if (template.identityId) { setSelectedIdentityId(template.identityId); } setShowTemplatePicker(false); }, [mode, plainTextMode]); useEffect(() => { const handleTemplateKey = (e: KeyboardEvent) => { const target = e.target as HTMLElement; const tag = target?.tagName?.toLowerCase(); if (tag === 'input' || tag === 'textarea' || tag === 'select') return; if (target?.getAttribute('contenteditable') === 'true') return; if (e.key === 't' && !e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault(); setShowTemplatePicker(true); } }; window.addEventListener('keydown', handleTemplateKey); return () => window.removeEventListener('keydown', handleTemplateKey); }, []); const addFiles = useCallback(async (files: File[]) => { if (!client || files.length === 0) return; // Let plugins veto each upload before it's queued. const allowedFiles: File[] = []; for (const file of files) { const ok = await emailHooks.onBeforeAttachmentUpload.intercept({ name: file.name, type: file.type || 'application/octet-stream', size: file.size, }); if (ok) allowedFiles.push(file); } if (allowedFiles.length === 0) return; files = allowedFiles; const newAttachments: ComposerAttachment[] = files.map(file => { const controller = new AbortController(); return { file, name: file.name, type: file.type || 'application/octet-stream', size: file.size, uploading: true, abortController: controller, }; }); setAttachments(prev => [...prev, ...newAttachments]); for (let i = 0; i < files.length; i++) { const file = files[i]; const controller = newAttachments[i].abortController; try { if (controller?.signal.aborted) continue; const { blobId } = await client.uploadBlob(file); if (controller?.signal.aborted) continue; setAttachments(prev => prev.map(att => att.file === file ? { ...att, blobId, uploading: false, abortController: undefined } : att ) ); emailHooks.onAfterAttachmentUpload.emit({ name: file.name, type: file.type || 'application/octet-stream', size: file.size, blobId, }); } catch (error) { if (controller?.signal.aborted) continue; debug.error(`Failed to upload ${file.name}:`, error); toast.error(t('upload_failed', { filename: file.name })); setAttachments(prev => prev.map(att => att.file === file ? { ...att, uploading: false, error: true, abortController: undefined } : att ) ); } } }, [client, t]); const handleImageUpload = useCallback(async ( file: File, ): Promise<{ src: string; cid: string } | null> => { if (!client) return null; try { const readAsDataUrl = new Promise((resolve) => { const reader = new FileReader(); reader.onload = (e) => resolve((e.target?.result as string) ?? null); reader.onerror = () => resolve(null); reader.readAsDataURL(file); }); const [{ blobId }, dataUrl] = await Promise.all([ client.uploadBlob(file), readAsDataUrl, ]); if (!dataUrl) throw new Error('Failed to read image as data URL'); const cid = `${generateUUID()}@webmail`; inlineImagesRef.current.push({ cid, blobId, type: file.type || 'application/octet-stream', name: file.name, size: file.size, dataUrl, }); return { src: dataUrl, cid }; } catch (error) { debug.error(`Failed to upload inline image ${file.name}:`, error); toast.error(t('upload_failed', { filename: file.name })); return null; } }, [client, t]); const handleFileSelect = async (event: React.ChangeEvent) => { if (!event.target.files) return; await addFiles(Array.from(event.target.files)); if (fileInputRef.current) { fileInputRef.current.value = ''; } }; const [isDraggingOver, setIsDraggingOver] = useState(false); const dragTimeoutRef = useRef(null); const clearDragState = useCallback(() => { if (dragTimeoutRef.current) clearTimeout(dragTimeoutRef.current); dragTimeoutRef.current = null; setIsDraggingOver(false); }, []); const resetDragTimeout = useCallback(() => { if (dragTimeoutRef.current) clearTimeout(dragTimeoutRef.current); dragTimeoutRef.current = setTimeout(clearDragState, 150); }, [clearDragState]); const handleDragEnter = useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes('Files')) { setIsDraggingOver(true); resetDragTimeout(); } }, [resetDragTimeout]); const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); resetDragTimeout(); }, [resetDragTimeout]); const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); resetDragTimeout(); }, [resetDragTimeout]); const handleDrop = useCallback((e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); clearDragState(); if (e.dataTransfer.files?.length) { addFiles(Array.from(e.dataTransfer.files)); } }, [addFiles, clearDragState]); const removeAttachment = (index: number) => { const att = attachments[index]; att?.abortController?.abort(); setAttachments(prev => prev.filter((_, i) => i !== index)); }; // Inline preview for composer attachments, reusing the message viewer's // FilePreviewModal (so previewability and the open-in-new-tab safety gate are // handled there). Prefer the local File - no network - and fall back to the // uploaded blob (forwarded attachments, which carry only a blobId). const getPreviewAttachmentContent = useCallback(async () => { if (!previewAttachment) throw new Error('No attachment selected'); if (previewAttachment.file) { return { blob: previewAttachment.file, contentType: previewAttachment.type || previewAttachment.file.type || 'application/octet-stream', }; } if (composerClient && previewAttachment.blobId) { const blob = await composerClient.fetchBlob(previewAttachment.blobId, previewAttachment.name, previewAttachment.type); return { blob, contentType: previewAttachment.type || blob.type || 'application/octet-stream' }; } throw new Error('No attachment content available'); }, [previewAttachment, composerClient]); const handlePreviewAttachmentDownload = useCallback(async () => { if (!previewAttachment) return; if (previewAttachment.file) { const url = URL.createObjectURL(previewAttachment.file); const a = document.createElement('a'); a.href = url; a.download = previewAttachment.name; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); return; } if (composerClient && previewAttachment.blobId) { await composerClient.downloadBlob(previewAttachment.blobId, previewAttachment.name, previewAttachment.type); } }, [previewAttachment, composerClient]); // Auto-save draft functionality const saveDraftOnce = async (): Promise => { if (!client || !composerClient) return null; const toAddresses = withInput(to, toInput).map(r => formatRecipient(r.name, r.email)); const ccAddresses = withInput(cc, ccInput).map(r => formatRecipient(r.name, r.email)); const bccAddresses = withInput(bcc, bccInput).map(r => formatRecipient(r.name, r.email)); if (!toAddresses.length && !subject && !(plainTextMode ? body.trim() : htmlToPlainText(body).trim())) { return null; } // Prepare attachments for draft const uploadedAttachments = attachments .filter(att => att.blobId && !att.uploading) .map(att => ({ blobId: att.blobId!, name: att.name, type: att.type, size: att.size, })); // Create a hash of current data to compare with last saved const currentData = JSON.stringify({ to: toAddresses, cc: ccAddresses, bcc: bccAddresses, subject, body, attachments: uploadedAttachments, identityId: selectedIdentityId, subAddressTag }); // Only save if data has changed if (currentData === lastSavedDataRef.current) { return draftIdRef.current; } setSaveStatus('saving'); // Get the selected identity or primary identity // Generate sub-addressed email if tag is set const identityFromEmail = currentIdentity?.email ? subAddressTag ? generateSubAddress(currentIdentity.email, subAddressTag, subAddressDelimiter) : currentIdentity.email : undefined; const fromEmail = (fromOverrideEnabled && fromOverrideEmail.trim()) ? fromOverrideEmail.trim() : identityFromEmail; const fromName = (fromOverrideEnabled && fromOverrideEmail.trim()) ? (fromOverrideName.trim() || undefined) : (currentIdentity?.name || undefined); try { const previousDraftId = draftIdRef.current; // Use the JMAP client and raw identity id for the *owning* account // - falls back to active client for single-account / same-account // identities. See `composerClient` derivation above. const savedDraftId = await composerClient.createDraft( toAddresses, subject || t('no_subject'), plainTextMode ? body : htmlToPlainText(body), ccAddresses, bccAddresses, currentIdentityRawId, fromEmail, previousDraftId || undefined, uploadedAttachments, fromName, plainTextMode ? undefined : body ); // Update the ref synchronously so a queued save sees the new id and // doesn't try to destroy the just-replaced draft. draftIdRef.current = savedDraftId; setDraftId(savedDraftId); lastSavedDataRef.current = currentData; setSaveStatus('saved'); // Reset status after 2 seconds setTimeout(() => setSaveStatus('idle'), 2000); return savedDraftId; } catch (error) { console.error('Failed to save draft:', error); setSaveStatus('error'); setTimeout(() => setSaveStatus('idle'), 3000); return null; } }; // Serialize saves: each call waits for the previous in-flight save before // running. This prevents the autosave timer and the send button from // racing two `Email/set { destroy, create }` requests against the same // draftId, which left orphan drafts and (when EmailSubmission failed) // looked like "send didn't happen" (#303). const saveDraft = (): Promise => { const previous = inflightSaveRef.current; const promise = (async (): Promise => { if (previous) { try { await previous; } catch { /* prior failure already reported */ } } return saveDraftOnce(); })(); inflightSaveRef.current = promise; promise.finally(() => { if (inflightSaveRef.current === promise) { inflightSaveRef.current = null; } }); return promise; }; // Keep saveDraftRef pointing to latest saveDraft saveDraftRef.current = saveDraft; // Trigger auto-save when content changes (only if user modified something) useEffect(() => { // Clear existing timeout if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current); } // Don't auto-save if nothing has changed from initial state if (!isDirtyRef.current) { return; } // Set new timeout for auto-save (2 seconds after last change) saveTimeoutRef.current = setTimeout(() => { // Clear the ref so handleSend can distinguish "save scheduled" from // "save in flight" - the former still needs flushing, the latter is // tracked via inflightSaveRef. saveTimeoutRef.current = null; // Plugin observers (AI assist, grammar, …) get a debounced snapshot here. emailHooks.onDraftChange.emit({ to: withInput(to, toInput).map(r => formatRecipient(r.name, r.email)), cc: withInput(cc, ccInput).map(r => formatRecipient(r.name, r.email)), bcc: withInput(bcc, bccInput).map(r => formatRecipient(r.name, r.email)), subject, htmlBody: plainTextMode ? '' : body, textBody: plainTextMode ? body : htmlToPlainText(body), identityId: selectedIdentityId || '', attachments: attachments .filter(a => a.blobId && !a.uploading && !a.error) .map(a => ({ name: a.name, type: a.type || 'application/octet-stream', size: a.size })), }); saveDraft(); }, 2000); // Cleanup on unmount return () => { if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current); } }; // eslint-disable-next-line react-hooks/exhaustive-deps -- saveDraft reads current state when called, not when effect is set up }, [toStr, ccStr, bccStr, subject, body, attachments]); useEffect(() => { return () => { if (autocompleteTimeoutRef.current) { clearTimeout(autocompleteTimeoutRef.current); } }; }, []); const toAddresses = withInput(to, toInput); const bodyPlainText = plainTextMode ? body.trim() : htmlToPlainText(body).trim(); const hasContent = bodyPlainText || attachments.some(att => att.blobId && !att.uploading); const canSend = toAddresses.length > 0 && !!subject && hasContent; const getSendTooltip = (): string | undefined => { if (canSend) return undefined; if (toAddresses.length === 0) return t('validation.recipient_required'); if (!subject) return t('validation.subject_required'); if (!hasContent) return t('validation.body_required'); return undefined; }; const validateScheduleValue = (value: string): string | null => { if (!value) return t('schedule_send_required'); const time = new Date(value).getTime(); if (!Number.isFinite(time)) return t('schedule_send_invalid'); if (time <= Date.now()) return t('schedule_send_future'); if (composerClient) { const maxDelayedSend = composerClient.getMaxDelayedSend(); if (maxDelayedSend > 0 && time > Date.now() + maxDelayedSend * 1000) { return t('schedule_send_too_late'); } } return null; }; const resolveDelayedUntil = async (requestedDelayedUntil?: string): Promise => { if (requestedDelayedUntil) return requestedDelayedUntil; if (sendDelaySeconds === 0) return undefined; if (composerClient?.hasDelayedSend()) { return new Date(Date.now() + sendDelaySeconds * 1000).toISOString(); } const confirmed = window.confirm(t('send_delay_unsupported_confirm')); if (!confirmed) { throw new Error(t('send_delay_unsupported')); } return undefined; }; // Rewrite data: URLs of dropped images (tagged with data-cid) into cid: // references so recipient clients that strip data URIs can still render them. const rewriteInlineImages = (html: string): { html: string; attachments: Array<{ blobId: string; name: string; type: string; size: number; disposition: 'inline'; cid: string }>; } => { const known = inlineImagesRef.current; const doc = new DOMParser().parseFromString(`${html}`, 'text/html'); const used = new Map(); if (known.length > 0) { doc.querySelectorAll('img[data-cid]').forEach((img) => { const cid = img.getAttribute('data-cid'); if (!cid) return; const entry = known.find((e) => e.cid === cid); if (!entry) return; img.setAttribute('src', `cid:${cid}`); img.removeAttribute('data-cid'); used.set(cid, entry); }); } // Recipient mail clients apply default

margins inside table cells, // inflating row height. Tiptap wraps cell text in

, so force margin:0 // to match the composer's tight rows. doc.querySelectorAll('td > p, th > p').forEach((p) => { const existing = p.getAttribute('style') || ''; p.setAttribute('style', `margin:0;${existing}`); }); return { html: doc.body.innerHTML, attachments: Array.from(used.values()).map((e) => ({ blobId: e.blobId, name: e.name, type: e.type, size: e.size, disposition: 'inline' as const, cid: e.cid, })), }; }; const handleSend = async (skipAttachmentCheck = false, delayedUntil?: string) => { const ccAddresses = withInput(cc, ccInput); const bccAddresses = withInput(bcc, bccInput); if (!canSend) { const errors: { to?: boolean; subject?: boolean; body?: boolean } = {}; if (toAddresses.length === 0) errors.to = true; if (!subject) errors.subject = true; if (!hasContent) errors.body = true; setValidationErrors(errors); if (errors.to) { setShakeField('to'); setTimeout(() => setShakeField(null), 400); toInputRef.current?.focus(); } return; } // Attachment reminder check if (!skipAttachmentCheck && attachmentReminderEnabled) { const hasAttachments = attachments.some(att => att.blobId && !att.uploading && !att.error); if (!hasAttachments) { const bodyText = htmlToPlainText(body); const searchText = `${subject} ${bodyText}`.toLowerCase(); const matched = attachmentReminderKeywords.find(kw => searchText.includes(kw.toLowerCase())); if (matched) { setAttachmentWarningKeyword(matched); setAttachmentWarningDelayedUntil(delayedUntil); setShowAttachmentWarning(true); return; } } } // Resolve the freshest draftId we can. Two cases: // 1. An autosave is currently in flight - wait for it; don't issue a // parallel destroy/create that would race with it on the same id. // 2. A debounced save is scheduled (timer set) - cancel it and flush // now so the latest body content lands on the server. // Use draftIdRef (not the React state) because state updates from // the in-flight save may not have rendered yet when we read here. let finalDraftId = draftIdRef.current; if (inflightSaveRef.current) { try { const savedId = await inflightSaveRef.current; if (savedId) finalDraftId = savedId; } catch (err) { debug.error('In-flight draft save failed before send:', err); } } if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current); saveTimeoutRef.current = null; try { const savedId = await saveDraft(); if (savedId) finalDraftId = savedId; } catch (err) { debug.error('Failed to save draft before send:', err); } } const identityFromEmail = currentIdentity?.email ? subAddressTag ? generateSubAddress(currentIdentity.email, subAddressTag, subAddressDelimiter) : currentIdentity.email : undefined; // When the user has typed a From override, that becomes the header From // (and MIME-builder From in the S/MIME path). The identity still drives // the SMTP envelope MAIL FROM - set explicitly so it doesn't mistakenly // default to the override address. const overrideActive = fromOverrideEnabled && fromOverrideEmail.trim().length > 0; const fromEmail = overrideActive ? fromOverrideEmail.trim() : identityFromEmail; const fromName = overrideActive ? (fromOverrideName.trim() || undefined) : (currentIdentity?.name || undefined); const envelopeMailFrom = overrideActive ? identityFromEmail : undefined; // Body is already HTML from the rich text editor (or plain text in plain text mode). // The signature is embedded into the body during init for compose mode // (when the initial identity had a signature) and for above-quote // replies/forwards - skip the trailing append in those cases so we don't // duplicate it. const signatureAlreadyInBody = shouldEmbedSignatureInNewMail || ((mode === 'reply' || mode === 'replyAll' || mode === 'forward') && signaturePosition === 'above_quote'); // Build HTML signature block (used only in rich text mode) const buildSignatureHtml = (): string => { if (signatureAlreadyInBody) return ''; const sep = signatureSeparatorEnabled ? `

--
` : `

`; if (signatureIdentity?.htmlSignature) { return `${sep}${sanitizeSignatureHtml(signatureIdentity.htmlSignature)}`; } if (signatureIdentity?.textSignature) { return `${sep}${signatureIdentity.textSignature.replace(/&/g, '&').replace(//g, '>').replace(/\n/g, '
')}`; } return ''; }; // RFC 5322 §3.6.4 threading - only continues the chain on a reply, not a forward. const threadingHeaders = (mode === 'reply' || mode === 'replyAll') ? computeReplyThreadingHeaders(replyTo) : null; // In plain text mode, send text/plain only (no HTML body) const signatureOpts = { separator: signatureSeparatorEnabled }; const finalBody = plainTextMode ? (signatureAlreadyInBody ? body : appendPlainTextSignature(body, signatureIdentity, signatureOpts)) : (signatureAlreadyInBody ? htmlToPlainText(body) : appendPlainTextSignature(htmlToPlainText(body), signatureIdentity, signatureOpts)); const rewritten = plainTextMode ? null : rewriteInlineImages(body); const finalHtmlBody = plainTextMode ? undefined : `

${rewritten!.html}

${buildSignatureHtml()}`; const inlineAttachments = rewritten?.attachments ?? []; try { const effectiveDelayedUntil = await resolveDelayedUntil(delayedUntil); // Let plugins veto the send (external-mail warning, mistyped-domain // guards, etc.). Returning false from any handler aborts before either // the S/MIME or standard JMAP path runs. const sendablePreview: OutgoingEmail = { to: toAddresses.map(r => formatRecipient(r.name, r.email)), cc: ccAddresses.map(r => formatRecipient(r.name, r.email)), bcc: bccAddresses.map(r => formatRecipient(r.name, r.email)), subject, htmlBody: finalHtmlBody || '', textBody: finalBody, identityId: currentIdentity?.id || '', fromEmail, attachments: attachments .filter(att => att.blobId && !att.uploading && !att.error) .map(a => ({ name: a.name, type: a.type || 'application/octet-stream', size: a.size })), inReplyTo: threadingHeaders?.inReplyTo?.[0], }; const sendAllowed = await emailHooks.onBeforeEmailSend.intercept(sendablePreview); if (!sendAllowed) return; // S/MIME send pipeline: build raw MIME → sign → encrypt → sendRawEmail if ((smimeSign_ || smimeEncrypt_) && client && currentIdentity?.id) { // S/MIME keys are scoped to one JMAP account's identity - sending // from a cross-account identity via S/MIME would mix accounts' // certs/clients. Refuse upfront and tell the user to switch. const crossAccount = stripCrossAccountIdentityPrefix(currentIdentity.id); if (crossAccount.localAccountId) { throw new Error('S/MIME sending from another account’s identity is not supported. Switch to that account first.'); } // 1. Resolve S/MIME key if (smimeSign_ && !smimeKeyRecord) { throw new Error('No S/MIME key bound to this identity'); } // S/MIME binds to the identity's key; sending from an override address // would produce a signature whose Subject differs from the visible // From, which most clients reject or flag. Refuse up front. if (overrideActive) { throw new Error('Cannot use From override with S/MIME - disable one to send.'); } // 2. Ensure key is unlocked for signing if (smimeSign_ && smimeKeyRecord && !smimeStore.isKeyUnlocked(smimeKeyRecord.id)) { const passphrase = await new Promise((resolve, reject) => { setSmimePassphrasePrompt({ keyId: smimeKeyRecord.id, resolve, reject }); }); try { await smimeStore.unlockKey(smimeKeyRecord.id, passphrase); } finally { setSmimePassphrasePrompt(null); setSmimePassphraseInput(''); setSmimePassphraseError(''); } } // 3. Resolve attachments as ArrayBuffers const mimeAttachments: MimeAttachment[] = []; for (const att of attachments) { if (att.error || att.uploading) continue; let content: ArrayBuffer; if (att.file && att.file.size > 0) { content = await att.file.arrayBuffer(); } else if (att.blobId && client) { content = await client.fetchBlobArrayBuffer(att.blobId, att.name, att.type); } else { continue; } mimeAttachments.push({ filename: att.name, contentType: att.type || 'application/octet-stream', content, }); } for (const inline of inlineAttachments) { if (!client) break; const content = await client.fetchBlobArrayBuffer(inline.blobId, inline.name, inline.type); mimeAttachments.push({ filename: inline.name, contentType: inline.type, content, cid: inline.cid, }); } // 4. Build canonical MIME // mime-builder takes inReplyTo as a single ref-form msg-id (with brackets); // references stays an array. threadingHeaders contains bare msg-ids. const mimeInReplyTo = threadingHeaders?.inReplyTo[0] ? `<${threadingHeaders.inReplyTo[0]}>` : undefined; const mimeReferences = threadingHeaders?.references.length ? threadingHeaders.references.map(id => `<${id}>`) : undefined; const mimeBytes = buildMimeMessage({ from: { name: currentIdentity.name || undefined, email: fromEmail || currentIdentity.email }, to: toAddresses, cc: ccAddresses.length > 0 ? ccAddresses : undefined, bcc: bccAddresses.length > 0 ? bccAddresses : undefined, subject, inReplyTo: mimeInReplyTo, references: mimeReferences, textBody: finalBody, htmlBody: finalHtmlBody, attachments: mimeAttachments.length > 0 ? mimeAttachments : undefined, }); let payload: Blob = new Blob([mimeBytes.buffer as ArrayBuffer], { type: 'message/rfc822' }); const smimeHeaders = { from: { name: currentIdentity.name || undefined, email: fromEmail || currentIdentity.email }, to: toAddresses, cc: ccAddresses.length > 0 ? ccAddresses : undefined, subject, inReplyTo: mimeInReplyTo, references: mimeReferences, }; // 5. Sign if enabled if (smimeSign_ && smimeKeyRecord) { const privateKey = smimeStore.getUnlockedKey(smimeKeyRecord.id); if (!privateKey) throw new Error('S/MIME key is not unlocked'); const cmsBlob = await smimeSign( mimeBytes, privateKey, smimeKeyRecord.certificate, smimeKeyRecord.certificateChain || [], ); const cmsBytes = new Uint8Array(await cmsBlob.arrayBuffer()); payload = wrapCmsAsSmimeMessage(cmsBytes, { ...smimeHeaders, smimeType: 'signed-data' }); } // 6. Encrypt if enabled if (smimeEncrypt_ && smimeKeyRecord) { const allRecipients = [...toAddresses, ...ccAddresses, ...bccAddresses].map(r => r.email); const { found, missing } = smimeStore.getRecipientCerts(allRecipients); if (missing.length > 0) { throw new Error(`Missing certificates for: ${missing.join(', ')}`); } const recipientCertsDer = found.map(c => c.certificate instanceof ArrayBuffer ? c.certificate : new Uint8Array(c.certificate as ArrayBuffer).buffer); const payloadBytes = new Uint8Array(await payload.arrayBuffer()); const cmsBlob = await smimeEncrypt( payloadBytes, recipientCertsDer, smimeKeyRecord.certificate, ); const cmsBytes = new Uint8Array(await cmsBlob.arrayBuffer()); payload = wrapCmsAsSmimeMessage(cmsBytes, { ...smimeHeaders, smimeType: 'enveloped-data' }); } // 7. Send via raw email path const result = await sendRawEmail(client, payload, currentIdentity.id, effectiveDelayedUntil, [...toAddresses, ...ccAddresses, ...bccAddresses].map(r => r.email)); if (effectiveDelayedUntil && finalDraftId) { client.deleteEmail(finalDraftId).catch(err => { debug.warn('email', 'Scheduled S/MIME send created, but plaintext draft cleanup failed:', err); toast.warning(t('schedule_send_cleanup_warning')); }); } if (result.scheduled) { await onScheduledSendCreated?.(); } } else { // Standard JMAP send path // Collect uploaded attachment blobIds for the send request const uploadedAttachments: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }> = attachments .filter(att => att.blobId && !att.uploading && !att.error) .map(att => ({ blobId: att.blobId!, name: att.name, type: att.type || 'application/octet-stream', size: att.size })); uploadedAttachments.push(...inlineAttachments); // Let plugins (signatures, link-rewriting, encryption, AI rewrite, …) // transform the outgoing message immediately before submission. const transformInput: OutgoingEmail = { to: toAddresses.map(r => formatRecipient(r.name, r.email)), cc: ccAddresses.map(r => formatRecipient(r.name, r.email)), bcc: bccAddresses.map(r => formatRecipient(r.name, r.email)), subject, htmlBody: finalHtmlBody || '', textBody: finalBody, identityId: currentIdentity?.id || '', fromEmail, attachments: uploadedAttachments.map(a => ({ name: a.name, type: a.type, size: a.size })), inReplyTo: threadingHeaders?.inReplyTo?.[0], }; const outgoing = await emailHooks.onTransformOutgoingEmail.transform(transformInput); // Strip the cross-account namespace from the identity id before // handing it to the parent - the JMAP server only knows the raw // id. The owning local account travels alongside so the parent // can route the send through the right client. const rawIdentityId = outgoing.identityId || currentIdentity?.id; const { localAccountId: identityLocalAccountId, rawId } = rawIdentityId ? stripCrossAccountIdentityPrefix(rawIdentityId) : { localAccountId: null, rawId: undefined }; await onSend?.({ to: outgoing.to, cc: outgoing.cc, bcc: outgoing.bcc, subject: outgoing.subject, body: outgoing.textBody, htmlBody: outgoing.htmlBody || undefined, draftId: finalDraftId || undefined, fromEmail, fromName, identityId: rawId, envelopeMailFrom, localAccountId: identityLocalAccountId ?? undefined, attachments: uploadedAttachments.length > 0 ? uploadedAttachments : undefined, inReplyTo: threadingHeaders?.inReplyTo, references: threadingHeaders?.references, requestReadReceipt, delayedUntil: effectiveDelayedUntil, }); if (mode === 'reply' || mode === 'replyAll') { for (const recipient of [...outgoing.to, ...outgoing.cc].filter(Boolean)) { if (trustedSendersAddressBook && client) { addToTrustedSendersBook(client, recipient).catch(err => { debug.error('Failed to add trusted sender to address book:', err); }); } else { addTrustedSender(recipient); } } } } setTo([]); setCc([]); setBcc([]); setToInput(""); setCcInput(""); setBccInput(""); setSubject(""); setBody(""); draftIdRef.current = null; setDraftId(null); setSubAddressTag(""); setValidationErrors({}); setShowScheduleDialog(false); setScheduleValue(''); setScheduleError(''); // Clear ref so unmount effect doesn't re-save stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' }; } catch (err) { debug.error('Failed to send email:', err); toast.error(err instanceof Error ? err.message : t('send_failed')); } }; const handleScheduleSend = () => { if (!composerClient?.hasDelayedSend()) { setScheduleError(t('schedule_send_unsupported')); return; } const error = validateScheduleValue(scheduleValue); if (error) { setScheduleError(error); return; } handleSend(false, new Date(scheduleValue).toISOString()); }; // Ctrl+Enter (Win/Linux) / Cmd+Enter (macOS) sends the open compose // draft. Scoped to events whose target lives inside this composer's // DOM tree — in Pro mode multiple composer tabs can be mounted at // once (inactive tabs are CSS-hidden, not unmounted), so a window // listener would otherwise fire every mounted composer's handleSend // on a single keystroke. handleSend is rebound every render, so we // route through a ref to keep the listener stable. const composerRootRef = useRef(null); const handleSendRef = useRef<((skipAttachmentCheck?: boolean) => Promise) | undefined>(undefined); handleSendRef.current = handleSend; useEffect(() => { const handleSendShortcut = (e: KeyboardEvent) => { if (e.key !== 'Enter') return; if (!(e.ctrlKey || e.metaKey)) return; if (e.altKey || e.shiftKey) return; const root = composerRootRef.current; if (!root || !(e.target instanceof Node) || !root.contains(e.target)) return; e.preventDefault(); void handleSendRef.current?.(); }; window.addEventListener('keydown', handleSendShortcut); return () => window.removeEventListener('keydown', handleSendShortcut); }, []); const cleanClose = () => { explicitCloseRef.current = true; if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current); } stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' }; onClose?.(); }; const handleSaveDraftAndClose = async () => { explicitCloseRef.current = true; setShowCloseDialog(false); if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current); } await saveDraft(); stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' }; onClose?.(); }; const handleDiscardAndClose = () => { explicitCloseRef.current = true; setShowCloseDialog(false); if (saveTimeoutRef.current) { clearTimeout(saveTimeoutRef.current); } if (draftId && onDiscardDraft) { onDiscardDraft(draftId); } stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' }; onClose?.(); }; const handleClose = () => { if (isDirtyRef.current) { setShowCloseDialog(true); } else { cleanClose(); } }; const handleComposerKeyDown = (e: React.KeyboardEvent) => { if (e.defaultPrevented) return; const isPlainEscape = e.key === 'Escape' && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey; const hasPrimaryModifier = e.ctrlKey || e.metaKey; const isSendShortcut = e.key === 'Enter' && hasPrimaryModifier && !e.altKey && !e.shiftKey; const isScheduleShortcut = e.key === 'Enter' && hasPrimaryModifier && !e.altKey && e.shiftKey; if (!isPlainEscape && !isSendShortcut && !isScheduleShortcut) return; if ( showTemplatePicker || showSaveAsTemplate || showScheduleDialog || smimePassphrasePrompt || showAttachmentWarning || showCloseDialog ) return; if (isPlainEscape) { if (activeAutoField) return; e.preventDefault(); handleClose(); return; } if (isSendShortcut) { if (e.repeat) { e.preventDefault(); return; } e.preventDefault(); handleSend(); return; } if (isScheduleShortcut) { e.preventDefault(); if (!e.repeat && composerClient?.hasDelayedSend()) openScheduleDialog(); } }; return (

{/* Right-side composer sidebar slot is rendered after the main content div below. */}

{/* Drag overlay */} {isDraggingOver && (

{t('drop_files')}

)} {/* Header - mobile: clean bar with close/send, desktop: title bar */}

{t('new_message')}

{saveStatus === 'saving' && (

{t('saving')}

)} {saveStatus === 'saved' && (

{t('draft_saved')}

)} {saveStatus === 'error' && (

{t('save_failed')}

)}

{/* Mobile: send button in header */}

{/* Fields section */}

{/* From field */}

{t('from')}:

{fromOverrideEnabled ? (

setFromOverrideName(e.target.value)} placeholder={t('from_override.name_placeholder')} className="h-7 text-sm w-32 md:w-40 shrink-0" aria-label={t('from_override.name_label')} /> setFromOverrideEmail(e.target.value)} placeholder={t('from_override.email_placeholder')} type="email" className="h-7 text-sm flex-1 min-w-0 font-mono" aria-label={t('from_override.email_label')} />

) : identities.length > 1 ? ( ) : ( {subAddressTag ? ( {generateSubAddress(primaryIdentity?.email || '', subAddressTag, subAddressDelimiter)} ) : ( <> {primaryIdentity?.name ? `${primaryIdentity.name} <${primaryIdentity.email}>` : primaryIdentity?.email || ''} )} )} {!fromOverrideEnabled && ( id.id === selectedIdentityId)?.email : primaryIdentity?.email) || '' } recipientEmails={withInput(to, toInput).map(r => r.email)} onSelectTag={setSubAddressTag} /> )} {!fromOverrideEnabled && subAddressTag && ( )}

{/* To field */}

{t('to')}: { setTo(next); if (validationErrors.to) setValidationErrors(prev => ({ ...prev, to: false })); }} inputText={toInput} onInputChange={setToInput} inputRef={toInputRef} placeholder={t('to_placeholder')} field="to" onAutocomplete={handleAutocomplete} onAutoKeyDown={handleAutoKeyDown} onAutoBlur={handleAutoBlur} activeAutoField={activeAutoField} autocompleteResults={autocompleteResults} autoSelectedIndex={autoSelectedIndex} dropdownRef={toDropdownRef} onInsertAutocomplete={insertAutocomplete} validationError={validationErrors.to} validationMessage={t('validation.recipient_required')} onTab={focusSubject} onMoveChip={handleMoveChip} />

{/* Cc field */} {showCc && (

{t('cc_label')}

)} {/* Bcc field */} {showBcc && (

{t('bcc_label')}

)} {/* Subject field */}

{t('subject_label')} { setSubject(e.target.value); if (validationErrors.subject) setValidationErrors(prev => ({ ...prev, subject: false })); }} onKeyDown={(e) => { if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); focusBody(); } }} className={cn( "flex-1 border-0 focus-visible:ring-0 h-8 px-0 text-sm", validationErrors.subject && "ring-2 ring-red-500 dark:ring-red-400" )} aria-invalid={validationErrors.subject || undefined} />

{/* Body */} {plainTextMode ? (

{
              setBody(e.target.value);
              if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
            }}
            placeholder={t('body_placeholder')}
            className={cn(
              "w-full min-h-[300px] px-4 py-3 text-sm text-foreground bg-transparent resize-y focus:outline-none font-mono",
              validationErrors.body && "ring-2 ring-red-500 dark:ring-red-400 rounded"
            )}
            style={{ height: 'calc(100vh - 350px)' }}
            aria-invalid={validationErrors.body || undefined}
          />
        ) : (
          <div ref={editorContainerRef}>
            <RichTextEditor
              content={body}
              onChange={(html) => {
                setBody(html);
                if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
              }}
              onImageUpload={handleImageUpload}
              placeholder={t('body_placeholder')}
              hasError={validationErrors.body}
              onEditorReady={(ed) => { editorRef.current = ed; }}
            />
          </div>
        )}

{/* Hide the visual signature preview when the signature has already been
            embedded into the body (compose, or above-quote replies). */}
        {(shouldEmbedSignatureInNewMail
          || ((mode === 'reply' || mode === 'replyAll' || mode === 'forward') && signaturePosition === 'above_quote')) ? null
          : plainTextMode ? (
          getPlainTextSignature(signatureIdentity) ? (
            <div className="px-4 pb-3 text-sm leading-6 text-muted-foreground break-words whitespace-pre-wrap font-mono">
              {signatureSeparatorEnabled ? '-- \n' : ''}{getPlainTextSignature(signatureIdentity)}
            </div>
          ) : null
        ) : composerSignatureHtml ? (
          <div
            className="px-4 pb-3 text-sm leading-6 text-foreground break-words [&_a]:text-primary [&_a]:underline-offset-2 [&_a:hover]:underline"
            dangerouslySetInnerHTML={{ __html: `${signatureSeparatorEnabled ? '<div>-- </div>' : ''}${composerSignatureHtml}` }}
          />
        ) : null}
      </div>

{/* Attachments */}
        {attachments.length > 0 && (
          <div className="px-4 py-2 border-t shrink-0">
            <div className="flex flex-wrap gap-2">
              {(showAllAttachments ? attachments : attachments.slice(0, 3)).map((att, index) => {
                // Clickable to preview only once it has content (local File or an
                // uploaded blob) and the type is previewable; never mid-upload.
                const canPreview = !att.uploading && !att.error
                  && (!!att.file || !!att.blobId)
                  && isFilePreviewable(att.name, att.type);
                const label = (
                  <>
                    <span className="max-w-[150px] md:max-w-[200px] truncate">{att.name}</span>
                    <span className="text-xs text-muted-foreground whitespace-nowrap">
                      ({formatFileSize(att.size)})
                    </span>
                  </>
                );
                return (
                <div
                  key={index}
                  className={cn(
                    "relative flex items-center gap-2 px-3 py-1.5 rounded-md text-sm overflow-hidden",
                    att.error ? "bg-red-500/10 text-red-600 dark:text-red-400" : "bg-muted text-foreground"
                  )}
                >
                  {att.uploading && (
                    <div className="absolute inset-0 pointer-events-none">
                      <div className="h-full bg-primary/10 animate-pulse" />
                      <div className="absolute bottom-0 left-0 h-0.5 bg-primary/40 animate-[indeterminate_1.5s_ease-in-out_infinite]" style={{ width: '40%' }} />
                    </div>
                  )}
                  <div className="relative flex items-center gap-2">
                    {att.uploading ? (
                      <Loader2 className="w-3 h-3 animate-spin flex-shrink-0" />
                    ) : att.error ? (
                      <AlertCircle className="w-3 h-3 flex-shrink-0" />
                    ) : (
                      <Paperclip className="w-3 h-3 flex-shrink-0" />
                    )}
                    {canPreview ? (
                      <button
                        type="button"
                        onClick={() => setPreviewAttachment(att)}
                        title={att.name}
                        className="flex items-center gap-2 min-w-0 hover:underline"
                      >
                        {label}
                      </button>
                    ) : (
                      <div className="flex items-center gap-2 min-w-0">{label}</div>
                    )}
                    <button
                      onClick={() => removeAttachment(index)}
                      className="ml-1 hover:text-red-500 min-w-[20px] min-h-[20px] flex items-center justify-center"
                      title={att.uploading ? t('upload_cancel') : undefined}
                    >
                      <X className="w-3 h-3" />
                    </button>
                  </div>
                </div>
                );
              })}
              {attachments.length > 3 && (
                <button
                  onClick={() => setShowAllAttachments(prev => !prev)}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-md text-sm bg-muted text-muted-foreground hover:text-foreground transition-colors"
                >
                  {showAllAttachments ? t('show_less') : `+${attachments.length - 3}`}
                </button>
              )}
            </div>
          </div>
        )}

{/* Bottom toolbar */}
        <div className="flex items-center justify-between px-4 py-2.5 border-t bg-background shrink-0 pb-[calc(0.625rem+env(safe-area-inset-bottom)/2)]">
          {/* Left side actions */}
          <div className="flex items-center gap-1">
            <input
              ref={fileInputRef}
              type="file"
              multiple
              onChange={handleFileSelect}
              className="hidden"
              accept="*/*"
            />
            <Button
              variant="ghost"
              size="icon"
              onClick={() => fileInputRef.current?.click()}
              className="h-9 w-9"
              title={t('attach')}
            >
              <Paperclip className="w-4 h-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setShowTemplatePicker(true)}
              title={t('use_template')}
              className="h-9 w-9"
            >
              <FileText className="w-4 h-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setShowSaveAsTemplate(true)}
              title={t('save_as_template')}
              className="h-9 w-9"
            >
              <BookmarkPlus className="w-4 h-4" />
            </Button>
            {/* S/MIME toggles */}
            {canSmimeSign && (
              <>
                <div className="w-px h-5 bg-border mx-1" />
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setSmimeSign(v => !v)}
                  className={cn("h-9 w-9", smimeSign_ && "bg-primary/10 text-primary")}
                  title={smimeSign_ ? t('smime_sign_on') : t('smime_sign_off')}
                >
                  <ShieldCheck className="w-4 h-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setSmimeEncrypt(v => !v)}
                  disabled={!canSmimeEncrypt}
                  className={cn("h-9 w-9", smimeEncrypt_ && "bg-primary/10 text-primary")}
                  title={smimeEncrypt_ ? t('smime_encrypt_on') : canSmimeEncrypt ? t('smime_encrypt_off') : t('smime_encrypt_unavailable')}
                >
                  <Lock className="w-4 h-4" />
                </Button>
              </>
            )}

{/* Read-receipt request toggle */}
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setRequestReadReceipt(v => !v)}
              className={cn(
                "h-9 w-9",
                requestReadReceipt && "bg-green-600 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:hover:bg-green-600"
              )}
              title={requestReadReceipt ? t('read_receipt_on') : t('read_receipt_off')}
              aria-pressed={requestReadReceipt}
            >
              <MailCheck className="w-4 h-4" />
            </Button>
            <PluginSlot name="composer-toolbar" />
          </div>

{/* Right side - Discard + Send (desktop) */}
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={handleClose}
              className="text-sm text-muted-foreground hover:text-red-500 transition-colors px-2 py-1"
            >
              {t('discard')}
            </button>
            {composerClient?.hasDelayedSend() ? (
              <div ref={sendMenuRef} className="relative hidden md:inline-flex">
                <Button
                  onClick={() => handleSend()}
                  disabled={!canSend}
                  title={getSendTooltip()}
                  className="rounded-r-none border-r border-primary-foreground/20"
                >
                  <Send className="w-4 h-4 mr-2" />
                  {t('send')}
                </Button>
                <Button
                  type="button"
                  onClick={() => setShowSendMenu((open) => !open)}
                  disabled={!canSend}
                  title={t('schedule_send')}
                  className="rounded-l-none px-2"
                  aria-haspopup="menu"
                  aria-expanded={showSendMenu}
                >
                  <ChevronDown className="w-4 h-4" />
                </Button>
                {showSendMenu && (
                  <div
                    role="menu"
                    className="absolute right-0 bottom-full z-50 mb-2 min-w-44 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
                  >
                    <button
                      type="button"
                      role="menuitem"
                      onClick={openScheduleDialog}
                      className="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground"
                    >
                      <CalendarClock className="w-4 h-4" />
                      {t('schedule_send')}
                    </button>
                  </div>
                )}
              </div>
            ) : (
              <Button
                onClick={() => handleSend()}
                disabled={!canSend}
                title={getSendTooltip()}
                className="hidden md:inline-flex"
              >
                <Send className="w-4 h-4 mr-2" />
                {t('send')}
              </Button>
            )}
          </div>
        </div>

{showTemplatePicker && (
        <TemplatePicker
          isOpen={showTemplatePicker}
          onClose={() => setShowTemplatePicker(false)}
          onSelect={handleTemplateSelect}
        />
      )}

{showSaveAsTemplate && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
          <div
            ref={saveTemplateModalRef}
            role="dialog"
            aria-modal="true"
            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-lg p-6 animate-in zoom-in-95 duration-200"
          >
            <h3 className="text-lg font-semibold text-foreground mb-4">{t('save_as_template')}</h3>
            <TemplateForm
              initialData={{
                subject,
                body,
                to: withInput(to, toInput).map(r => formatRecipient(r.name, r.email)),
                cc: withInput(cc, ccInput).map(r => formatRecipient(r.name, r.email)),
                bcc: withInput(bcc, bccInput).map(r => formatRecipient(r.name, r.email)),
              }}
              onSave={(data) => {
                addTemplate(data);
                setShowSaveAsTemplate(false);
              }}
              onCancel={() => setShowSaveAsTemplate(false)}
            />
          </div>
        </div>
      )}

{showScheduleDialog && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
          <div className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md p-6 animate-in zoom-in-95 duration-200">
            <h3 className="text-lg font-semibold text-foreground mb-2">{t('schedule_send')}</h3>
            <p className="text-sm text-muted-foreground mb-4">{t('schedule_send_description')}</p>
            <Input
              type="datetime-local"
              value={scheduleValue}
              onChange={(e) => {
                setScheduleValue(e.target.value);
                setScheduleError('');
              }}
              className={cn(scheduleError && "border-destructive focus-visible:ring-destructive")}
            />
            {scheduleError && <p className="mt-2 text-sm text-destructive">{scheduleError}</p>}
            <div className="mt-5 flex justify-end gap-2">
              <Button variant="ghost" onClick={() => setShowScheduleDialog(false)}>{tCommon('cancel')}</Button>
              <Button onClick={handleScheduleSend} disabled={!canSend}>{t('schedule_send')}</Button>
            </div>
          </div>
        </div>
      )}

{/* S/MIME passphrase prompt */}
      {smimePassphrasePrompt && (
        <div
          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
        >
          <div
            role="dialog"
            aria-modal="true"
            onClick={(e) => e.stopPropagation()}
            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-sm animate-in zoom-in-95 duration-200"
          >
            <div className="p-6">
              <h2 className="text-lg font-semibold text-foreground">{t('smime_unlock_title')}</h2>
              <p className="mt-2 text-sm text-muted-foreground">{t('smime_unlock_message')}</p>
              <input
                type="password"
                autoFocus
                value={smimePassphraseInput}
                onChange={(e) => {
                  setSmimePassphraseInput(e.target.value);
                  setSmimePassphraseError('');
                }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && smimePassphraseInput) {
                    smimePassphrasePrompt.resolve(smimePassphraseInput);
                  }
                }}
                placeholder={t('smime_passphrase_placeholder')}
                className="mt-3 w-full px-3 py-2 border border-border rounded-md text-sm bg-background text-foreground outline-none focus:ring-2 focus:ring-primary"
              />
              {smimePassphraseError && (
                <p className="mt-1 text-xs text-red-500">{smimePassphraseError}</p>
              )}
            </div>
            <div className="flex items-center justify-end gap-3 px-6 pb-6">
              <Button variant="outline" onClick={() => {
                smimePassphrasePrompt.reject();
                setSmimePassphrasePrompt(null);
                setSmimePassphraseInput('');
                setSmimePassphraseError('');
              }}>
                {t('cancel')}
              </Button>
              <Button
                disabled={!smimePassphraseInput}
                onClick={() => smimePassphrasePrompt.resolve(smimePassphraseInput)}
              >
                {t('smime_unlock_button')}
              </Button>
            </div>
          </div>
        </div>
      )}

{showAttachmentWarning && (
        <div
          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
          onClick={() => setShowAttachmentWarning(false)}
        >
          <div
            ref={attachmentWarningRef}
            role="alertdialog"
            aria-modal="true"
            onClick={(e) => e.stopPropagation()}
            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
          >
            <div className="p-6">
              <h2 className="text-lg font-semibold text-foreground">{t('forgot_attachment.title')}</h2>
              <p className="mt-2 text-sm text-muted-foreground">
                {t('forgot_attachment.message', { keyword: attachmentWarningKeyword })}
              </p>
            </div>
            <div className="flex items-center justify-end gap-3 px-6 pb-6">
              <Button variant="outline" onClick={() => setShowAttachmentWarning(false)}>
                {t('forgot_attachment.back')}
              </Button>
              <Button onClick={() => { setShowAttachmentWarning(false); handleSend(true, attachmentWarningDelayedUntil); setAttachmentWarningDelayedUntil(undefined); }}>
                {t('forgot_attachment.send_anyway')}
              </Button>
            </div>
          </div>
        </div>
      )}

{showCloseDialog && (
        <div
          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
          onClick={() => setShowCloseDialog(false)}
        >
          <div
            ref={closeDialogRef}
            role="alertdialog"
            aria-modal="true"
            onClick={(e) => e.stopPropagation()}
            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
          >
            <div className="p-6">
              <h2 className="text-lg font-semibold text-foreground">{t('close_draft_title')}</h2>
              <p className="mt-2 text-sm text-muted-foreground">{t('close_draft_message')}</p>
            </div>
            <div className="flex items-center justify-end gap-3 px-6 pb-6">
              <Button variant="outline" onClick={() => setShowCloseDialog(false)}>
                {t('cancel')}
              </Button>
              <Button variant="destructive" onClick={handleDiscardAndClose}>
                {t('discard')}
              </Button>
              <Button onClick={handleSaveDraftAndClose}>
                <Save className="w-4 h-4 mr-2" />
                {t('save_draft')}
              </Button>
            </div>
          </div>
        </div>
      )}

{previewAttachment && (
        <FilePreviewModal
          name={previewAttachment.name}
          onClose={() => setPreviewAttachment(null)}
          onDownload={handlePreviewAttachmentDownload}
          getFileContent={getPreviewAttachmentContent}
        />
      )}
    </div>
      <PluginSlot
        name="composer-sidebar-right"
        className="hidden md:flex shrink-0 h-full overflow-hidden border-l border-border"
      />
    </div>
  );
}

// Focus edit input when editing starts
  useEffect(() => {
    if (editingChip) {
      setTimeout(() => {
        if (editInputRef.current) {
          editInputRef.current.focus();
          editInputRef.current.select();
        }
      }, 0);
    }
  }, [editingChip]);

// Format a recipient for display in a chip / context menu
  const formatChipDisplay = (r: Recipient): string =>
    r.name && r.name !== r.email ? `${r.name} (${r.email})` : r.email;

// Handle saving an edited chip
  const handleSaveEdit = (newValue: string) => {
    if (!editingChip) return;
    const { index, editType } = editingChip;
    const chip = chips[index];
    if (!chip) {
      setEditingChip(null);
      return;
    }
    const trimmedNew = newValue.trim();

let newChip: Recipient;
    if (editType === 'email') {
      // Update email, keep name. Empty email is a no-op (can't drop the email).
      if (!trimmedNew) {
        setEditingChip(null);
        return;
      }
      newChip = { name: chip.name, email: trimmedNew };
    } else {
      // Update name, keep email. Empty name clears the display name.
      newChip = { name: trimmedNew || undefined, email: chip.email };
    }

const newChips = [...chips];
    newChips[index] = newChip;
    onChipsChange(newChips);
    setEditingChip(null);
  };

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newInputText = e.target.value;
    onInputChange(newInputText);
    onAutocomplete(newInputText, field);
  };

const commitCurrentInput = () => {
    if (inputText.trim()) {
      onChipsChange([...chips, parseRecipient(inputText)]);
      onInputChange('');
    }
  };

// Pasting a list of addresses (comma/semicolon/whitespace separated) splits
  // into one chip per valid address; anything that isn't a valid address is
  // left in the input for the user to fix. A single address with no separator
  // falls through to the browser's normal paste so it stays editable.
  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    const text = e.clipboardData.getData('text');
    if (!/[\s,;]/.test(text.trim())) return;
    const { valid, invalid } = splitPastedRecipients(text, chips.map(c => c.email));
    if (valid.length === 0) return;
    e.preventDefault();
    onChipsChange([...chips, ...valid]);
    onInputChange([inputText.trim(), invalid.join(' ')].filter(Boolean).join(' '));
  };

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (activeAutoField === field && autocompleteResults.length > 0) {
      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Escape' ||
          (e.key === 'Enter' && autoSelectedIndex >= 0)) {
        onAutoKeyDown(e, field);
        return;
      }
    }

if ((e.key === ' ' || e.key === 'Enter' || e.key === 'Tab') && inputText.trim()) {
      if (e.key !== 'Tab') e.preventDefault();
      commitCurrentInput();
      if (e.key === 'Tab' && onTab) {
        e.preventDefault();
        setTimeout(() => onTab(), 0);
      } else {
        setTimeout(() => inputRef.current?.focus(), 0);
      }
      return;
    }

if (e.key === 'Tab' && !e.shiftKey && onTab) {
      e.preventDefault();
      onTab();
      return;
    }

// Backspace on an empty input pulls the last chip back into the input for
    // quick editing.
    if (e.key === 'Backspace' && !inputText && chips.length > 0) {
      const lastChip = chips[chips.length - 1];
      onChipsChange(chips.slice(0, -1));
      onInputChange(formatRecipient(lastChip.name, lastChip.email));
      return;
    }
  };

const handleChipRemove = (index: number, e: React.MouseEvent) => {
    e.stopPropagation();
    onChipsChange(chips.filter((_, i) => i !== index));
  };

const handleContextMenu = (e: React.MouseEvent, index: number, recipient: Recipient) => {
    openContextMenu(e, { index, recipient });
  };

const handleBlur = (e: React.FocusEvent) => {
    const relatedTarget = e.relatedTarget as Node | null;
    if (relatedTarget && dropdownRef.current?.contains(relatedTarget)) {
      return;
    }
    commitCurrentInput();
    onAutoBlur(e, field);
  };

const handleContainerDragOver = (e: React.DragEvent) => {
    if (!e.dataTransfer.types.includes('application/x-recipient-chip')) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    setIsDragOver(true);
  };

const handleContainerDragLeave = (e: React.DragEvent) => {
    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
      setIsDragOver(false);
    }
  };

return (
    <div className="flex-1 relative min-w-0">
      <div
        className={cn(
          "flex flex-wrap items-center gap-1 min-h-[32px] cursor-text",
          validationError && "ring-2 ring-red-500 dark:ring-red-400 rounded",
          isDragOver && "ring-2 ring-primary/50 rounded bg-accent/20"
        )}
        onClick={() => inputRef.current?.focus()}
        onDragOver={handleContainerDragOver}
        onDragLeave={handleContainerDragLeave}
        onDrop={handleContainerDrop}
      >
        {chips.map((chip, i) => {
          const isEditing = editingChip?.index === i;
          const chipDisplay = formatChipDisplay(chip);
          return (
            <span
              key={`${chip.email}-${i}`}
              draggable={!isEditing}
              onDragStart={(e) => {
                e.stopPropagation();
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('application/x-recipient-chip', JSON.stringify({ recipient: chip, fromField: field }));
                // Show the address while dragging, matching the email-list drag preview.
                const dragPreview = createChipDragPreview(chip.email);
                e.dataTransfer.setDragImage(dragPreview, 0, 0);
                requestAnimationFrame(() => dragPreview.remove());
                setDraggingIndex(i);
              }}
              onDragEnd={() => setDraggingIndex(null)}
              className={cn(
                "inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-sm border border-border transition-colors",
                isEditing
                  ? "bg-background ring-1 ring-ring"
                  : "bg-secondary text-secondary-foreground hover:bg-accent cursor-grab active:cursor-grabbing",
                !isEditing && draggingIndex === i && "opacity-50"
              )}
              onContextMenu={isEditing ? undefined : (e) => handleContextMenu(e, i, chip)}
            >
              {isEditing ? (
                <input
                  ref={editInputRef}
                  type="text"
                  value={editValue}
                  onChange={(e) => setEditValue(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      handleSaveEdit(editValue);
                    } else if (e.key === 'Escape') {
                      setEditingChip(null);
                    } else if (e.key === 'Tab') {
                      e.preventDefault();
                      handleSaveEdit(editValue);
                    }
                  }}
                  onBlur={(e) => {
                    const relatedTarget = e.relatedTarget as Node | null;
                    if (relatedTarget && dropdownRef.current?.contains(relatedTarget)) {
                      return;
                    }
                    handleSaveEdit(editValue);
                  }}
                  className="flex-1 min-w-[80px] border-0 outline-none h-5 text-sm bg-transparent text-foreground placeholder:text-muted-foreground"
                  placeholder={editingChip?.editType === 'email' ? t('recipient_email_placeholder') : t('recipient_name_placeholder')}
                  data-bwignore="true"
                />
              ) : (
                <span className="truncate max-w-[200px]">{chipDisplay}</span>
              )}
              <button
                type="button"
                className="flex items-center justify-center w-4 h-4 rounded-full hover:bg-muted-foreground/20 transition-colors"
                onClick={(e) => {
                  e.stopPropagation();
                  if (isEditing) {
                    handleSaveEdit(editValue);
                  } else {
                    handleChipRemove(i, e);
                  }
                }}
                tabIndex={-1}
              >
                {isEditing ? (
                  <Check className="w-3 h-3" />
                ) : (
                  <X className="w-3 h-3" />
                )}
              </button>
            </span>
          );
        })}
        {!editingChip && (
          <input
            ref={inputRef}
            type="text"
            placeholder={chips.length === 0 ? placeholder : ''}
            value={inputText}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
            onPaste={handlePaste}
            onBlur={handleBlur}
            className="flex-1 min-w-[120px] border-0 outline-none h-7 text-sm bg-transparent text-foreground placeholder:text-muted-foreground"
            role="combobox"
            aria-expanded={activeAutoField === field && autocompleteResults.length > 0}
            aria-autocomplete="list"
            aria-controls={activeAutoField === field ? `autocomplete-${field}` : undefined}
            aria-activedescendant={activeAutoField === field && autoSelectedIndex >= 0 ? `autocomplete-option-${autoSelectedIndex}` : undefined}
            aria-invalid={validationError || undefined}
            data-bwignore="true"
            data-1p-ignore
            data-op-ignore
            data-lpignore="true"
            data-form-type="other"
          />
        )}
      </div>
      {validationError && validationMessage && (
        <p className="text-xs text-red-600 dark:text-red-400 mt-0.5">{validationMessage}</p>
      )}
      {activeAutoField === field && autocompleteResults.length > 0 && (
        <AutocompleteDropdown
          ref={dropdownRef}
          id={`autocomplete-${field}`}
          results={autocompleteResults}
          selectedIndex={autoSelectedIndex}
          onSelect={(suggestion) => onInsertAutocomplete(suggestion, field)}
        />
      )}
      <ContextMenu
        isOpen={contextMenu.isOpen}
        position={contextMenu.position}
        onClose={closeContextMenu}
        ref={menuRef}
      >
        {contextMenu.data && (
          <>
            <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground truncate max-w-[200px]">
              {formatChipDisplay(contextMenu.data.recipient)}
            </div>
            <ContextMenuSeparator />
            <ContextMenuItem label={t('recipient_edit_email')} onClick={handleEditEmail} />
            <ContextMenuItem label={t('recipient_edit_name')} onClick={handleEditName} />
            <ContextMenuSeparator />
            <ContextMenuItem label={tCommon('delete')} onClick={() => {
              if (contextMenu.data) {
                handleChipRemove(contextMenu.data.index, { stopPropagation: () => {} } as React.MouseEvent);
              }
              closeContextMenu();
            }} destructive />
          </>
        )}
      </ContextMenu>
    </div>
  );
}