feat: drag and drop recipient chips between To/CC/BCC fields

Adds native HTML5 drag-and-drop so users can move recipient email
address chips between the To, CC, and BCC fields in the composer.
Chips dragged onto the Cc/Bcc toggle buttons auto-reveal the hidden
field and place the chip there.

lib/__tests__/email-composer-utils.test.ts

@@ -4,6 +4,8 @@ import {
   rewriteCidImagesForEditor,
   replaceInlineImagePlaceholders,
   INLINE_IMAGE_PLACEHOLDER,
+  removeChipFromFieldValue,
+  addChipToFieldValue,
 } from "../email-composer-utils";
 
 describe("plainTextToComposerBody", () => {
@@ -112,3 +114,60 @@ describe("replaceInlineImagePlaceholders", () => {
     expect(out).toBe(html);
   });
 });
+
+describe("removeChipFromFieldValue", () => {
+  it("removes the target chip and preserves others", () => {
+    const result = removeChipFromFieldValue("alice@example.com, bob@example.com, ", "alice@example.com");
+    expect(result).toBe("bob@example.com, ");
+  });
+
+  it("removes a chip with a display name", () => {
+    const result = removeChipFromFieldValue("Alice <alice@example.com>, bob@example.com, ", "Alice <alice@example.com>");
+    expect(result).toBe("bob@example.com, ");
+  });
+
+  it("handles removing the only chip", () => {
+    const result = removeChipFromFieldValue("alice@example.com, ", "alice@example.com");
+    expect(result).toBe("");
+  });
+
+  it("returns the value unchanged when chip is not found", () => {
+    const value = "alice@example.com, bob@example.com, ";
+    expect(removeChipFromFieldValue(value, "carol@example.com")).toBe(value);
+  });
+
+  it("preserves in-progress input text after removing a chip", () => {
+    const result = removeChipFromFieldValue("alice@example.com, bob@example.com, car", "alice@example.com");
+    expect(result).toBe("bob@example.com, car");
+  });
+
+  it("handles an empty field value", () => {
+    expect(removeChipFromFieldValue("", "alice@example.com")).toBe("");
+  });
+
+  it("removes only the first occurrence when chip appears multiple times", () => {
+    const result = removeChipFromFieldValue("alice@example.com, alice@example.com, bob@example.com, ", "alice@example.com");
+    expect(result).toBe("alice@example.com, bob@example.com, ");
+  });
+});
+
+describe("addChipToFieldValue", () => {
+  it("appends a chip to a field with existing chips", () => {
+    const result = addChipToFieldValue("alice@example.com, ", "bob@example.com");
+    expect(result).toBe("alice@example.com, bob@example.com, ");
+  });
+
+  it("appends a chip to an empty field", () => {
+    expect(addChipToFieldValue("", "alice@example.com")).toBe("alice@example.com, ");
+  });
+
+  it("preserves in-progress input text when appending", () => {
+    const result = addChipToFieldValue("alice@example.com, bob", "carol@example.com");
+    expect(result).toBe("alice@example.com, carol@example.com, bob");
+  });
+
+  it("appends a chip with a display name", () => {
+    const result = addChipToFieldValue("alice@example.com, ", "Bob <bob@example.com>");
+    expect(result).toBe("alice@example.com, Bob <bob@example.com>, ");
+  });
+});

lib/email-composer-utils.ts

@@ -52,6 +52,39 @@ export function rewriteCidImagesForEditor(html: string): string {
   return touched ? doc.body.innerHTML : html;
 }
 
+/**
+ * Parses the chip array and trailing in-progress input text from a
+ * comma-separated recipient field value (e.g. "Alice <a@x.com>, bob@x.com, b").
+ * A trailing comma means "bob@x.com" is a committed chip and "b" is the live input.
+ */
+function parseFieldValue(fieldValue: string): { chips: string[]; inputText: string } {
+  const allParts = fieldValue.split(',').map(s => s.trim()).filter(Boolean);
+  const hasTrailingComma = fieldValue.trimEnd().endsWith(',');
+  const chips = hasTrailingComma ? allParts : allParts.slice(0, -1);
+  const inputText = hasTrailingComma ? '' : (allParts[allParts.length - 1] ?? '');
+  return { chips, inputText };
+}
+
+function buildFieldValue(chips: string[], inputText: string): string {
+  if (chips.length === 0) return inputText;
+  return chips.join(', ') + ', ' + inputText;
+}
+
+/** Removes the first occurrence of `chip` from a recipient field value string. */
+export function removeChipFromFieldValue(fieldValue: string, chip: string): string {
+  const { chips, inputText } = parseFieldValue(fieldValue);
+  const idx = chips.indexOf(chip);
+  if (idx === -1) return fieldValue;
+  const remaining = chips.filter((_, i) => i !== idx);
+  return buildFieldValue(remaining, inputText);
+}
+
+/** Appends `chip` as a committed entry to a recipient field value string. */
+export function addChipToFieldValue(fieldValue: string, chip: string): string {
+  const { chips, inputText } = parseFieldValue(fieldValue);
+  return buildFieldValue([...chips, chip], inputText);
+}
+
 /**
  * Replaces the placeholder src on `<img data-cid="...">` elements with the
  * resolved data URL once the inline blob has been fetched. Leaves images