Composer: smarter suggestions, links over selections, big images attached

Recipient suggestions:
- the words typed match in any order, each one the start of a word in the
  name, a nickname, the organization or the address: "jane smi" finds
  "Smith, Jane", and "globex" finds the people at Globex;
- someone written to lately ranks a little above an equal match;
- an address already in To, Cc or Bcc is no longer offered in the other
  two fields.

Pasting:
- a single web or mailto address pasted over selected words makes those
  words the link, instead of replacing them with the address;
- a pasted or dropped image over 10 MB goes in as an attachment rather
  than inline, where it would swell every reply.

No new strings.

web/src/views/compose/Composer.tsx

@@ -248,7 +248,7 @@ export function Composer({ draft }: { draft: Draft }) {
                   already knows the name they are half-way through typing. */}
               <button type="button" className="link-btn" onClick={() => setAddressBookOpen(true)} title={translate("Choose from address books")}>{translate("To")}</button>
             </label>
-            <RecipientInput id={`${key}-to`} value={d.to} onChange={(to) => patch({ to })} placeholder={translate("Recipients")} autoFocus={initialFocus === "to"} />
+            <RecipientInput id={`${key}-to`} value={d.to} exclude={[...d.cc, ...d.bcc]} onChange={(to) => patch({ to })} placeholder={translate("Recipients")} autoFocus={initialFocus === "to"} />
             <span className="field-extra">
               {/* Beside Cc and Bcc, because that is where someone looks when
                   they are thinking about who the message goes to. The label
@@ -268,13 +268,13 @@ export function Composer({ draft }: { draft: Draft }) {
           {d.showCc && (
             <div className="composer-field">
               <label htmlFor={`${key}-cc`}>{translate("Cc")}</label>
-              <RecipientInput id={`${key}-cc`} value={d.cc} onChange={(cc) => patch({ cc })} />
+              <RecipientInput id={`${key}-cc`} value={d.cc} exclude={[...d.to, ...d.bcc]} onChange={(cc) => patch({ cc })} />
             </div>
           )}
           {d.showBcc && (
             <div className="composer-field">
               <label htmlFor={`${key}-bcc`}>{translate("Bcc")}</label>
-              <RecipientInput id={`${key}-bcc`} value={d.bcc} onChange={(bcc) => patch({ bcc })} />
+              <RecipientInput id={`${key}-bcc`} value={d.bcc} exclude={[...d.to, ...d.cc]} onChange={(bcc) => patch({ bcc })} />
             </div>
           )}
           <div className="composer-field">

web/src/views/compose/RecipientInput.tsx

@@ -12,9 +12,11 @@ interface Props {
   placeholder?: string;
   autoFocus?: boolean;
   id?: string;
+  /** Addresses already in the message's other recipient fields, not to be suggested again. */
+  exclude?: EmailAddress[];
 }
 
-export function RecipientInput({ value, onChange, placeholder, autoFocus, id }: Props) {
+export function RecipientInput({ value, onChange, placeholder, autoFocus, id, exclude }: Props) {
   const [text, setText] = useState("");
   const [sugg, setSugg] = useState<Suggestion[]>([]);
   const [active, setActive] = useState(0);
@@ -34,7 +36,7 @@ export function RecipientInput({ value, onChange, placeholder, autoFocus, id }:
     const t = window.setTimeout(() => {
       void suggest(q).then((list) => {
         if (id !== reqId.current) return;
-        const existing = new Set(value.map((v) => v.email.toLowerCase()));
+        const existing = new Set([...value, ...(exclude ?? [])].map((v) => v.email.toLowerCase()));
         const filtered = list.filter((s) => !existing.has(s.email.toLowerCase()));
         setSugg(filtered);
         setActive(0);
@@ -42,7 +44,7 @@ export function RecipientInput({ value, onChange, placeholder, autoFocus, id }:
       });
     }, 120);
     return () => window.clearTimeout(t);
-  }, [text, suggest, value]);
+  }, [text, suggest, value, exclude]);
 
   const commit = (raw?: string) => {
     const s = (raw ?? text).trim().replace(/[,;]+$/, "");

web/src/views/compose/RichEditor.tsx

@@ -25,6 +25,15 @@ interface Props {
   imageUpload?: (file: File) => Promise<string>;
 }
 
+/** Pasted or dropped images larger than this go in as attachments, not inline. */
+export const INLINE_IMAGE_MAX = 10 * 1024 * 1024;
+
+/** A single http(s) or mailto address, nothing else: what may become a link over a selection. */
+export function isLinkToPaste(text: string): boolean {
+  if (!text || /\s/.test(text)) return false;
+  return /^(https?:\/\/[^\s]+|mailto:[^\s@]+@[^\s@]+)$/i.test(text);
+}
+
 const EMOJI = "😀 😃 😄 😁 😆 😅 😂 🤣 🙂 😉 😊 😇 🥰 😍 😘 😋 😜 🤪 🤗 🤔 🤫 🤐 😐 😑 😶 😏 😒 🙄 😬 😌 😔 😪 😴 😷 🤒 🤕 🤢 🤮 🥵 🥶 🥴 😵 🤯 🤠 🥳 😎 🤓 🧐 😕 😟 🙁 😮 😯 😲 😳 🥺 😦 😧 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 🥱 😤 😡 😠 🤬 👍 👎 👌 ✌️ 🤞 🤟 🤘 🤙 👈 👉 👆 👇 ☝️ 👋 🤚 🖐️ ✋ 🖖 👏 🙌 👐 🤲 🤝 🙏 💪 ❤️ 🧡 💛 💚 💙 💜 🖤 🤍 💔 ❣️ 💕 💯 💥 🔥 ✨ 🎉 🎊 🎈 🎁 🏆 ⭐ 🌟 ☀️ 🌙 ⚡ ☕ 🍕 🍺 🚀 ✈️ 🏠 💼 📅 📎 📌 ✅ ❌ ⚠️ ❓ ❗ 💡 🔔 📧 🙈 🙉 🙊 🐱 🐶 🦊 🐼".split(" ");
 const COLORS = ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#ffffff", "#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff", "#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc", "#cc4125", "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6d9eeb", "#6fa8dc", "#8e7cc3", "#c27ba0", "#a61c00", "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3c78d8", "#3d85c6", "#674ea7", "#a64d79"];
 
@@ -133,10 +142,25 @@ export const RichEditor = forwardRef<RichEditorHandle, Props>(function RichEdito
       const f = imgItem.getAsFile();
       if (f) {
         e.preventDefault();
-        insertImageFile(f);
+        // A large image is a file to send, not a picture in the text: it goes
+        // in as an attachment, where an inline copy would swell every reply.
+        if (f.size > INLINE_IMAGE_MAX && onFiles) onFiles([f]);
+        else insertImageFile(f);
         return;
       }
     }
+    /*
+     * A link pasted over selected words makes those words the link, the way
+     * most editors do, instead of replacing them with the address.
+     */
+    const pastedText = e.clipboardData.getData("text/plain").trim();
+    const sel = window.getSelection();
+    if (isLinkToPaste(pastedText) && sel && !sel.isCollapsed && elRef.current?.contains(sel.anchorNode)) {
+      e.preventDefault();
+      document.execCommand("createLink", false, pastedText);
+      emit();
+      return;
+    }
     const htmlData = e.clipboardData.getData("text/html");
     if (htmlData) {
       e.preventDefault();
@@ -175,8 +199,9 @@ export const RichEditor = forwardRef<RichEditorHandle, Props>(function RichEdito
     const files = Array.from(e.dataTransfer.files);
     if (!files.length) return;
     e.preventDefault();
-    const images = files.filter((f) => f.type.startsWith("image/"));
-    const others = files.filter((f) => !f.type.startsWith("image/"));
+    const inline = (f: File) => f.type.startsWith("image/") && !(f.size > INLINE_IMAGE_MAX && onFiles);
+    const images = files.filter(inline);
+    const others = files.filter((f) => !inline(f));
     images.forEach(insertImageFile);
     if (others.length) onFiles?.(others);
   };

web/src/views/compose/__tests__/editor-paste.test.tsx

@@ -0,0 +1,102 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { INLINE_IMAGE_MAX, RichEditor, isLinkToPaste } from "../RichEditor";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+globalThis.ResizeObserver ??= class { observe() {} unobserve() {} disconnect() {} } as unknown as typeof ResizeObserver;
+
+/*
+ * Two things pasting into a message now does: a link pasted over selected
+ * words turns those words into the link, and an image too large to belong
+ * in the text goes in as an attachment. jsdom does no editing, so these check
+ * the command and the callback the editor reaches for.
+ */
+
+describe("what counts as a link to paste", () => {
+  it("takes one web or mailto address", () => {
+    expect(isLinkToPaste("https://example.com/a?b=1")).toBe(true);
+    expect(isLinkToPaste("http://example.com")).toBe(true);
+    expect(isLinkToPaste("mailto:[email protected]")).toBe(true);
+  });
+
+  it("leaves ordinary text and anything with spaces alone", () => {
+    expect(isLinkToPaste("see https://example.com")).toBe(false);
+    expect(isLinkToPaste("example.com")).toBe(false);
+    expect(isLinkToPaste("javascript:alert(1)")).toBe(false);
+    expect(isLinkToPaste("")).toBe(false);
+  });
+});
+
+describe("pasting into the editor", () => {
+  let host: HTMLDivElement;
+  let root: Root;
+  let onFiles: ReturnType<typeof vi.fn<(files: File[]) => void>>;
+  let exec: ReturnType<typeof vi.fn>;
+
+  beforeEach(async () => {
+    host = document.createElement("div");
+    document.body.appendChild(host);
+    root = createRoot(host);
+    onFiles = vi.fn<(files: File[]) => void>();
+    exec = vi.fn(() => true);
+    (document as unknown as { execCommand: unknown }).execCommand = exec;
+    await act(async () => {
+      root.render(<RichEditor html="<p>read the docs here</p>" onChange={() => {}} onFiles={onFiles} showToolbar={false} />);
+    });
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    host.remove();
+  });
+
+  const editor = () => host.querySelector<HTMLElement>('[contenteditable="true"]')!;
+
+  const paste = async (data: { text?: string; html?: string; files?: File[] }) => {
+    const items = (data.files ?? []).map((f) => ({ type: f.type, kind: "file", getAsFile: () => f }));
+    const ev = new Event("paste", { bubbles: true, cancelable: true });
+    Object.defineProperty(ev, "clipboardData", {
+      value: { items, getData: (t: string) => (t === "text/plain" ? data.text ?? "" : t === "text/html" ? data.html ?? "" : "") },
+    });
+    await act(async () => editor().dispatchEvent(ev));
+    return ev;
+  };
+
+  const select = (word: string) => {
+    const text = editor().querySelector("p")!.firstChild!;
+    const i = text.textContent!.indexOf(word);
+    const r = document.createRange();
+    r.setStart(text, i);
+    r.setEnd(text, i + word.length);
+    const sel = window.getSelection()!;
+    sel.removeAllRanges();
+    sel.addRange(r);
+  };
+
+  it("turns selected words into the pasted link", async () => {
+    select("docs");
+    const ev = await paste({ text: "https://example.com/docs" });
+    expect(ev.defaultPrevented).toBe(true);
+    expect(exec).toHaveBeenCalledWith("createLink", false, "https://example.com/docs");
+  });
+
+  it("pastes a link as text when nothing is selected", async () => {
+    window.getSelection()!.removeAllRanges();
+    await paste({ text: "https://example.com/docs" });
+    expect(exec).not.toHaveBeenCalledWith("createLink", expect.anything(), expect.anything());
+  });
+
+  it("attaches a pasted image too large to sit in the text", async () => {
+    const big = new File([new Uint8Array(8)], "huge.png", { type: "image/png" });
+    Object.defineProperty(big, "size", { value: INLINE_IMAGE_MAX + 1 });
+    await paste({ files: [big] });
+    expect(onFiles).toHaveBeenCalledWith([big]);
+  });
+
+  it("keeps a normal-sized pasted image in the text", async () => {
+    const small = new File([new Uint8Array(8)], "shot.png", { type: "image/png" });
+    await paste({ files: [small] });
+    expect(onFiles).not.toHaveBeenCalled();
+  });
+});

web/src/views/compose/__tests__/recipient-exclude.test.tsx

@@ -0,0 +1,55 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { RecipientInput } from "../RecipientInput";
+import { useContacts } from "@/store/contacts";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+/*
+ * Someone already in Cc was still offered when typing in To, so it was easy
+ * to address the same person twice from two fields.
+ */
+
+describe("suggestions across To, Cc and Bcc", () => {
+  let host: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    host = document.createElement("div");
+    document.body.appendChild(host);
+    root = createRoot(host);
+    useContacts.setState({
+      suggest: (async () => [
+        { name: "Ann Lee", email: "[email protected]", source: "contact" },
+        { name: "Ann Taylor", email: "[email protected]", source: "contact" },
+      ]) as never,
+    });
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    host.remove();
+    vi.useRealTimers();
+  });
+
+  it("leaves out an address already in another recipient field", async () => {
+    await act(async () => {
+      root.render(<RecipientInput value={[]} exclude={[{ name: null, email: "[email protected]" }]} onChange={() => {}} />);
+    });
+    const input = host.querySelector("input")!;
+    await act(async () => {
+      const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+      set.call(input, "ann");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    await act(async () => {
+      vi.advanceTimersByTime(200);
+      await Promise.resolve();
+    });
+    const offered = host.textContent ?? "";
+    expect(offered).toContain("[email protected]");
+    expect(offered).not.toContain("[email protected]");
+  });
+});