diff --git a/apps/mail/components/create/create-email.tsx b/apps/mail/components/create/create-email.tsx index b6f7bb16bf..f4f4dee4b6 100644 --- a/apps/mail/components/create/create-email.tsx +++ b/apps/mail/components/create/create-email.tsx @@ -268,6 +268,25 @@ export function CreateEmail({ } }; + const handleEditEmail = (type: 'to' | 'cc' | 'bcc', index: number, newEmail: string) => { + // Only validate and edit when Enter is pressed + const trimmedEmail = newEmail.trim(); + if (!trimmedEmail) return; + + const emailState = type === 'to' ? toEmails : type === 'cc' ? ccEmails : bccEmails; + const setEmailState = type === 'to' ? setToEmails : type === 'cc' ? setCcEmails : setBccEmails; + + if (isValidEmail(trimmedEmail)) { + const newEmails = [...emailState]; + newEmails[index] = trimmedEmail; + setEmailState(newEmails); + setHasUnsavedChanges(true); + } else { + // Show error for invalid email + toast.error(t('pages.createEmail.invalidEmail')); + } + }; + const saveDraft = React.useCallback(async () => { if (!hasUnsavedChanges) return; if (!toEmails.length || !subjectInput || !messageContent) return; @@ -570,6 +589,7 @@ export function CreateEmail({ filteredContacts={[]} isLoading={isLoading} onAddEmail={handleAddEmail} + onEditEmail={handleEditEmail} hasUnsavedChanges={hasUnsavedChanges} setHasUnsavedChanges={setHasUnsavedChanges} className="w-24 text-right" @@ -585,6 +605,7 @@ export function CreateEmail({ filteredContacts={[]} isLoading={isLoading} onAddEmail={handleAddEmail} + onEditEmail={handleEditEmail} hasUnsavedChanges={hasUnsavedChanges} setHasUnsavedChanges={setHasUnsavedChanges} className="w-24 text-right" @@ -601,6 +622,7 @@ export function CreateEmail({ filteredContacts={[]} isLoading={isLoading} onAddEmail={handleAddEmail} + onEditEmail={handleEditEmail} hasUnsavedChanges={hasUnsavedChanges} setHasUnsavedChanges={setHasUnsavedChanges} className="w-24 text-right" diff --git a/apps/mail/components/create/email-input.tsx b/apps/mail/components/create/email-input.tsx index 9508f1bebf..b8453dc868 100644 --- a/apps/mail/components/create/email-input.tsx +++ b/apps/mail/components/create/email-input.tsx @@ -11,6 +11,7 @@ interface EmailInputProps { filteredContacts: any[]; isLoading: boolean; onAddEmail: (type: 'to' | 'cc' | 'bcc', email: string) => void; + onEditEmail: (type: 'to' | 'cc' | 'bcc', index: number, email: string) => void; hasUnsavedChanges: boolean; setHasUnsavedChanges: (value: boolean) => void; className?: string; @@ -25,13 +26,17 @@ export function EmailInput({ filteredContacts, isLoading, onAddEmail, + onEditEmail, className, setHasUnsavedChanges, }: EmailInputProps) { const t = useTranslations(); const [selectedContactIndex, setSelectedContactIndex] = useState(0); + const [editingIndex, setEditingIndex] = useState(null); + const [editValue, setEditValue] = useState(''); const dropdownRef = useRef(null); const inputRef = useRef(null); + const editInputRef = useRef(null); const handleEmailInputChange = (value: string) => { setInputValue(value); @@ -66,11 +71,35 @@ export function EmailInput({ setHasUnsavedChanges(true); }; + const handleChipClick = (index: number, email: string) => { + setEditingIndex(index); + setEditValue(email); + setTimeout(() => { + const input = editInputRef.current; + if (input) { + input.focus(); + // Move cursor to the end instead of selecting + const length = input.value.length; + input.setSelectionRange(length, length); + } + }, 0); + }; + + const handleEditKeyDown = (e: React.KeyboardEvent, index: number) => { + if (e.key === 'Enter') { + e.preventDefault(); + onEditEmail(type, index, editValue); + setEditingIndex(null); + setEditValue(''); + } else if (e.key === 'Escape') { + setEditingIndex(null); + setEditValue(''); + } + }; + return (
-
+
{type === 'to' ? t('common.mailDisplay.to') : `${type.charAt(0).toUpperCase()}${type.slice(1)}`} @@ -81,9 +110,27 @@ export function EmailInput({ key={index} className="bg-accent flex items-center gap-1 rounded-md border px-2 text-sm font-medium" > - - {email} - + {editingIndex === index ? ( +
+ setEditValue(e.target.value)} + onKeyDown={(e) => handleEditKeyDown(e, index)} + onBlur={() => setEditingIndex(null)} + className="w-[150px] bg-transparent focus:outline-none pr-6" + /> + +
+ ) : ( + handleChipClick(index, email)} + className="max-w-[150px] cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap" + > + {email} + + )}