@rapidmx/web-client 0.28.0 → 0.29.0

package/lib/calendar/eventSearch.ts

@@ -0,0 +1,172 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The calendar's search: which events match what was typed, and the chronological list of their occurrences to step through. The calendar page
+ * already holds every event of the checked calendars (`listCalendarEvents()` fetches whole folders - there is no server-side text or range query
+ * to lean on), so this is entirely client-side and covers all time, not just the visible range. A series contributes the occurrences inside a window
+ * of `SEARCH_WINDOW_YEARS` either side of today, at most `SEARCH_MAX_OCCURRENCES_PER_SERIES` of them (the ones nearest today).
+ */
+
+import { addYears } from "date-fns";
+import { CalendarEvent } from "./calendarApi.js";
+import { CalendarOccurrence, expandOccurrences } from "./recurrence.js";
+
+/** How far either side of today a recurring event's occurrences are searched. */
+export const SEARCH_WINDOW_YEARS = 5;
+/** The most occurrences one recurring event contributes (the ones nearest today), so a daily series cannot flood the results. */
+export const SEARCH_MAX_OCCURRENCES_PER_SERIES = 500;
+
+/** Lower-cases `text` and strips its accents, so "cafe" finds "Café". */
+function fold(text: string): string {
+    return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
+
+/** The words of `query`, folded; an event must match every one of them. Empty for a blank query. */
+export function searchTerms(query: string): string[] {
+    return fold(query)
+        .split(/\s+/)
+        .filter((term) => term !== "");
+}
+
+/** The text of `event` a search looks in: title, location, description (plain text), organizer and guests (name and address). */
+function searchableText(event: CalendarEvent): string {
+    const parts: (string | null | undefined)[] = [
+        event.title,
+        event.location,
+        event.description,
+        event.organizer?.displayName,
+        event.organizer?.address,
+    ];
+    for (const attendee of event.attendees ?? []) {
+        parts.push(attendee.displayName, attendee.address);
+    }
+    return fold(parts.filter(Boolean).join("\n"));
+}
+
+/**
+ * Whether `event` has every one of `terms` (from `searchTerms()`) somewhere in its readable text. A busy block (`redacted`: a private event on a
+ * shared calendar) never matches - its title is a placeholder, not what the event says.
+ */
+export function eventMatchesTerms(event: CalendarEvent, terms: string[]): boolean {
+    if (terms.length === 0 || event.redacted) {
+        return false;
+    }
+    const text = searchableText(event);
+    return terms.every((term) => text.includes(term));
+}
+
+function byStart(a: CalendarOccurrence, b: CalendarOccurrence): number {
+    return new Date(a.startDate).getTime() - new Date(b.startDate).getTime() || a.title.localeCompare(b.title);
+}
+
+/**
+ * The occurrences of the events of `events` that match `query`, in chronological order. A single event is one occurrence wherever it falls; a
+ * recurring one contributes those within `SEARCH_WINDOW_YEARS` of `now`, the `SEARCH_MAX_OCCURRENCES_PER_SERIES` nearest to it at most.
+ */
+export function searchOccurrences(events: CalendarEvent[], query: string, now: Date = new Date()): CalendarOccurrence[] {
+    const terms = searchTerms(query);
+    return occurrencesOf(events, (event) => eventMatchesTerms(event, terms), now);
+}
+
+/** Every occurrence of every event, in chronological order, bounded the same way a search is - the calendar's List view shows these. */
+export function allOccurrences(events: CalendarEvent[], now: Date = new Date()): CalendarOccurrence[] {
+    return occurrencesOf(events, () => true, now);
+}
+
+/** The chronological occurrences of the `events` that `include` accepts (see `searchOccurrences()` for how a series is bounded). */
+function occurrencesOf(events: CalendarEvent[], include: (event: CalendarEvent) => boolean, now: Date): CalendarOccurrence[] {
+    const from = addYears(now, -SEARCH_WINDOW_YEARS);
+    const to = addYears(now, SEARCH_WINDOW_YEARS);
+    const found: CalendarOccurrence[] = [];
+    for (const event of events) {
+        if (!include(event)) {
+            continue;
+        }
+        if (!event.recurrenceRule) {
+            found.push(...expandOccurrences(event, new Date(new Date(event.startDate).getTime() - 1), new Date(new Date(event.endDate).getTime() + 1)));
+            continue;
+        }
+        const occurrences = expandOccurrences(event, from, to);
+        if (occurrences.length > SEARCH_MAX_OCCURRENCES_PER_SERIES) {
+            const distance = (o: CalendarOccurrence) => Math.abs(new Date(o.startDate).getTime() - now.getTime());
+            occurrences.sort((a, b) => distance(a) - distance(b)).length = SEARCH_MAX_OCCURRENCES_PER_SERIES;
+        }
+        found.push(...occurrences);
+    }
+    return found.sort(byStart);
+}
+
+/** The `occurrences` that overlap `[rangeStart, rangeEnd]` - what `expandOccurrences()` keeps, so a view shows exactly these. */
+export function occurrencesInRange(occurrences: CalendarOccurrence[], rangeStart: Date, rangeEnd: Date): CalendarOccurrence[] {
+    return occurrences.filter((o) => new Date(o.startDate) < rangeEnd && new Date(o.endDate) > rangeStart);
+}
+
+/**
+ * Which of the chronological `matches` to show first for a search: the first one inside the view (`[rangeStart, rangeEnd]`) when there is one,
+ * else the first that ends after `from` (the day being viewed), else the last (the nearest before). `-1` when there are no matches.
+ */
+export function initialMatchIndex(matches: CalendarOccurrence[], rangeStart: Date, rangeEnd: Date, from: Date): number {
+    if (matches.length === 0) {
+        return -1;
+    }
+    const inView = matches.findIndex((o) => new Date(o.startDate) < rangeEnd && new Date(o.endDate) > rangeStart);
+    if (inView >= 0) {
+        return inView;
+    }
+    const after = matches.findIndex((o) => new Date(o.endDate) > from);
+    return after >= 0 ? after : matches.length - 1;
+}
+
+/**
+ * The index of the occurrence one step from the current one in `sequence` (chronological), or `-1` for none. The current occurrence is found by
+ * `currentKey`; when it is not in the sequence (it was deleted or changed under an open card) the step is from where it started
+ * (`currentStart`): the first after it or the last before it, and from the first or last when that is not known either. Past either end it
+ * wraps round when `wrap`, else there is nothing there (`-1`).
+ */
+export function stepSequenceIndex(
+    sequence: CalendarOccurrence[],
+    currentKey: string | null,
+    currentStart: Date | undefined,
+    direction: 1 | -1,
+    wrap: boolean,
+): number {
+    const count = sequence.length;
+    if (count === 0) {
+        return -1;
+    }
+    const edge = direction === 1 ? 0 : count - 1;
+    const index = sequence.findIndex((o) => o.occurrenceKey === currentKey);
+    if (index >= 0) {
+        const target = index + direction;
+        if (target >= 0 && target < count) {
+            return target;
+        }
+        return wrap ? edge : -1;
+    }
+    if (!currentStart) {
+        return edge;
+    }
+    const from = currentStart.getTime();
+    let target = -1;
+    if (direction === 1) {
+        target = sequence.findIndex((o) => new Date(o.startDate).getTime() > from);
+    } else {
+        for (let i = count - 1; i >= 0 && target < 0; i--) {
+            target = new Date(sequence[i].startDate).getTime() < from ? i : -1;
+        }
+    }
+    return target >= 0 ? target : wrap ? edge : -1;
+}
+
+/** The index one step from `index` (`-1`: none is current) in `direction` through `count` matches, wrapping round at either end. `-1` with none. */
+export function stepMatchIndex(index: number, count: number, direction: 1 | -1): number {
+    if (count === 0) {
+        return -1;
+    }
+    if (index < 0) {
+        return direction === 1 ? 0 : count - 1;
+    }
+    return (index + direction + count) % count;
+}

package/lib/components/navigation/BottomTabBar.tsx

@@ -2,8 +2,10 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import type { IconType } from "react-icons";
+import { HiOutlineEllipsisHorizontal } from "react-icons/hi2";
+import NavBadge, { navItemLabel } from "./NavBadge.js";
 
 /** A single icon-rail/bottom-tab entry — deliberately generic (not tied to `AppShell`'s own
  * `AppDef`/`AppShellApp`) so both `AppShell` (www) and `AdminShell` (admin) can share this component
@@ -13,6 +15,8 @@ export interface NavItem {
     href: string;
     label: string;
     icon: IconType;
+    /** A count drawn as a chip on the icon (unread mail) and named in the link's accessible name; nothing at zero or when absent. */
+    badge?: number;
 }
 
 export interface BottomTabBarProps {
@@ -20,6 +24,27 @@ export interface BottomTabBarProps {
     active: string;
 }
 
+/** The most entries the bar shows at once: any more and the last slot becomes "More", holding the rest. */
+export const MAX_TABS = 5;
+
+/**
+ * The entries to draw directly on the bar and the ones left for the "More" menu. Up to `MAX_TABS` entries all show. With more, the bar shows the first
+ * `MAX_TABS - 1` and "More" holds the rest - except that the active entry is always on the bar (it takes the last slot when it would otherwise be hidden), so the reader
+ * can see where they are.
+ */
+export function splitTabs(apps: NavItem[], active: string): { shown: NavItem[]; more: NavItem[] } {
+    if (apps.length <= MAX_TABS) {
+        return { shown: apps, more: [] };
+    }
+    const slots = MAX_TABS - 1;
+    const activeItem = apps.find((app) => app.id === active);
+    const hidden = !!activeItem && apps.indexOf(activeItem) >= slots;
+    const shown = hidden ? [...apps.slice(0, slots - 1), activeItem] : apps.slice(0, slots);
+    return { shown, more: apps.filter((app) => !shown.includes(app)) };
+}
+
+const TAB_CLASS = "flex-1 min-w-0 overflow-hidden px-1 flex flex-col items-center justify-center gap-0.5 text-[10px] leading-tight text-center font-medium";
+
 /**
  * The mobile counterpart to an icon rail (`AppShell`'s Mail/Calendar/Contacts/Tasks, or `AdminShell`'s
  * Mailboxes/Quarantine/Ingest Queue) — same data, same full-page-nav `<a href>` links (this framework
@@ -27,40 +52,100 @@ export interface BottomTabBarProps {
  * which doesn't fit below the `md` breakpoint. Only ever rendered alongside that rail (`md:hidden` here,
  * `hidden md:flex` there) — never both hidden or both visible at once.
  *
- * A few items share the width equally; a long list (the admin console has ten or so) doesn't fit at a readable size, so each
- * item keeps a minimum width, its label wraps onto a second line rather than running into its neighbour's, and the bar scrolls
- * sideways - opening with the active item in view.
+ * The entries share the width equally and never run off the screen: with more than `MAX_TABS`, the last slot is a "More" (…) button that opens a menu
+ * of the others (see `splitTabs()`). The menu closes on Escape, on a click elsewhere and on choosing an entry.
  */
 export default function BottomTabBar({ apps, active }: BottomTabBarProps) {
-    const activeRef = useRef<HTMLAnchorElement | null>(null);
+    const { shown, more } = splitTabs(apps, active);
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
     useEffect(() => {
-        const item = activeRef.current;
-        const bar = item?.parentElement;
-        if (item && bar && bar.scrollWidth > bar.clientWidth) {
-            // Set directly rather than `scrollIntoView()`, which would scroll the page as well.
-            bar.scrollLeft = item.offsetLeft - (bar.clientWidth - item.offsetWidth) / 2;
+        if (!open) {
+            return;
+        }
+        function handlePointer(event: MouseEvent | TouchEvent) {
+            if (!rootRef.current?.contains(event.target as Node)) {
+                setOpen(false);
+            }
+        }
+        function handleKey(event: KeyboardEvent) {
+            if (event.key === "Escape") {
+                setOpen(false);
+                buttonRef.current?.focus();
+            }
         }
-    }, [active]);
+        document.addEventListener("mousedown", handlePointer);
+        document.addEventListener("touchstart", handlePointer);
+        document.addEventListener("keydown", handleKey);
+        return () => {
+            document.removeEventListener("mousedown", handlePointer);
+            document.removeEventListener("touchstart", handlePointer);
+            document.removeEventListener("keydown", handleKey);
+        };
+    }, [open]);
+
+    // The unread count of an entry that is behind "More" is still worth a dot on it.
+    const hiddenBadge = more.some((app) => (app.badge ?? 0) > 0);
+
     return (
-        <nav
-            aria-label="Mobile navigation"
-            className="md:hidden fixed bottom-0 inset-x-0 z-30 h-14 bg-surface border-t border-border flex items-stretch overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-        >
-            {apps.map(({ id, href, label, icon: Icon }) => (
+        <nav aria-label="Mobile navigation" className="md:hidden fixed bottom-0 inset-x-0 z-30 h-14 bg-surface border-t border-border flex items-stretch">
+            {shown.map(({ id, href, label, icon: Icon, badge }) => (
                 <a
                     key={id}
                     href={href}
-                    ref={id === active ? activeRef : undefined}
+                    aria-label={badge ? navItemLabel(label, badge) : undefined}
                     aria-current={id === active ? "page" : undefined}
-                    className={[
-                        "flex-1 shrink-0 min-w-[4.75rem] px-1 flex flex-col items-center justify-center gap-0.5 text-[10px] leading-tight text-center font-medium",
-                        id === active ? "text-primary-dark" : "text-text-muted",
-                    ].join(" ")}
+                    className={[TAB_CLASS, id === active ? "text-primary-dark" : "text-text-muted"].join(" ")}
                 >
-                    <Icon size={20} aria-hidden="true" />
+                    <span className="relative inline-flex">
+                        <Icon size={20} aria-hidden="true" />
+                        <NavBadge count={badge} />
+                    </span>
                     {label}
                 </a>
             ))}
+            {more.length > 0 && (
+                <div ref={rootRef} className="flex-1 min-w-0 flex items-stretch relative">
+                    <button
+                        ref={buttonRef}
+                        type="button"
+                        aria-label={hiddenBadge ? "More, with unread items" : "More"}
+                        aria-haspopup="menu"
+                        aria-expanded={open}
+                        onClick={() => setOpen((value) => !value)}
+                        className={[TAB_CLASS, "w-full", open ? "text-primary-dark" : "text-text-muted"].join(" ")}
+                    >
+                        <span className="relative inline-flex">
+                            <HiOutlineEllipsisHorizontal size={20} aria-hidden="true" />
+                            {hiddenBadge && <span aria-hidden="true" data-testid="more-dot" className="absolute -top-0.5 -right-1 size-2 rounded-full bg-danger" />}
+                        </span>
+                        <span>More</span>
+                    </button>
+                    {open && (
+                        <ul role="menu" aria-label="More" className="absolute bottom-full right-1 mb-2 min-w-48 max-w-[calc(100vw-1rem)] rounded-md border border-border bg-surface py-1 shadow-modal">
+                            {more.map(({ id, href, label, icon: Icon, badge }) => (
+                                <li key={id} role="none">
+                                    <a
+                                        role="menuitem"
+                                        href={href}
+                                        aria-label={badge ? navItemLabel(label, badge) : undefined}
+                                        onClick={() => setOpen(false)}
+                                        className="flex items-center gap-3 px-4 py-3 text-sm text-text hover:bg-surface-alt focus-visible:outline-2 focus-visible:outline-primary"
+                                    >
+                                        <span className="relative inline-flex">
+                                            <Icon size={20} aria-hidden="true" />
+                                            <NavBadge count={badge} />
+                                        </span>
+                                        {label}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+            )}
         </nav>
     );
 }

package/lib/components/navigation/NavBadge.tsx

@@ -0,0 +1,33 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+
+/** The most a nav badge spells out; a larger count reads "99+". */
+export const NAV_BADGE_MAX = 99;
+
+/** A nav item's accessible name: its label, plus its unread count when it has one ("Mail, 3 unread"). */
+export function navItemLabel(label: string, badge?: number): string {
+    return badge ? `${label}, ${badge} unread` : label;
+}
+
+/**
+ * The small round count chip on the corner of a nav icon (the Mail rail icon's unread mail). Drawn only for a count above zero; it is
+ * hidden from assistive technology because the link it sits on carries the count in its own name (`navItemLabel()`). Position it by
+ * placing it inside a `relative` wrapper around the icon.
+ */
+export default function NavBadge({ count }: { count?: number }) {
+    if (!count) {
+        return null;
+    }
+    return (
+        <span
+            aria-hidden="true"
+            data-testid="nav-badge"
+            className="absolute -top-1.5 -right-2 min-w-4 h-4 px-1 rounded-pill bg-danger text-white text-[10px] font-bold leading-4 text-center"
+        >
+            {count > NAV_BADGE_MAX ? `${NAV_BADGE_MAX}+` : count}
+        </span>
+    );
+}

package/lib/mail/compose/quotedImages.ts

@@ -0,0 +1,49 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The pictures of a quoted original, carried into the reply or forward. The original refers to its embedded images by `cid:` (or, when
+ * the server could not tie one to a part, by nothing but its `alt`), which means nothing in a message of its own - so each is replaced by a
+ * `data:` URI of the picture itself. The editor shows it as it is; `assembleDraft()` attaches it to the draft as an inline part when the
+ * draft is saved, which is how it reaches the recipient (the server composes a plain message from attachments, never from `data:` URIs).
+ */
+
+/** The largest picture quoted. A larger one is left out of the quote rather than bloating the editor and the request that saves it. */
+export const MAX_QUOTED_IMAGE_BYTES = 2_000_000;
+/** The most picture data a quote carries, in all (as `data:` URI characters). */
+export const MAX_QUOTED_IMAGES_CHARS = 6_000_000;
+
+export interface QuotedImageReference {
+    /** The token of a `cid:` reference, absent for an image with no source. */
+    cid?: string;
+    alt?: string;
+}
+
+/**
+ * `html` with each of its embedded images (`cid:`, or no source at all) replaced by the `data:` URI `resolve` gives for it. An image
+ * `resolve` has no picture for is left as it is (the quote's sanitizer then drops it); images that already are `data:` URIs and remote
+ * ones are not asked about. `html` is returned as given when it has no such image, or where there is no DOM to parse it with.
+ */
+export async function embedQuotedImages(html: string, resolve: (reference: QuotedImageReference) => Promise<string | undefined>): Promise<string> {
+    if (typeof DOMParser === "undefined" || !/<img\b/i.test(html)) {
+        return html;
+    }
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    let budget = MAX_QUOTED_IMAGES_CHARS;
+    let changed = false;
+    for (const image of Array.from(doc.querySelectorAll("img"))) {
+        const src = (image.getAttribute("src") ?? "").trim();
+        const cid = /^cid:/i.test(src);
+        if (!cid && src !== "") {
+            continue;
+        }
+        const uri = await resolve({ ...(cid ? { cid: src.slice(4) } : {}), alt: image.getAttribute("alt") ?? undefined });
+        if (uri !== undefined && uri.length <= budget) {
+            budget -= uri.length;
+            image.setAttribute("src", uri);
+            changed = true;
+        }
+    }
+    return changed ? doc.body.innerHTML : html;
+}

package/lib/mail/inlineImages.ts

@@ -0,0 +1,104 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * How a message's embedded images are found among its attachments, shared by the reading pane (which shows them) and the reply/forward
+ * quote (which carries them into the new message). Pure: nothing here touches the network or the DOM.
+ */
+
+/** The image types an embedded image may have: raster only. SVG is left out - a quote becomes part of a message this server sends. */
+export const EMBEDDED_IMAGE_TYPES = /^image\/(?:png|jpe?g|gif|webp|avif|bmp)$/i;
+
+/** What identifies an attachment as far as embedded images are concerned. */
+export interface InlineCandidate {
+    uid: string;
+    filename: string;
+    mimeType: string;
+    contentId?: string;
+}
+
+/**
+ * A `Content-ID` (or the token of a `cid:` URL) in the one form two references to the same part have in common: without the angle brackets of
+ * the header, percent-decoding undone (a `cid:` URL is a URL), and in lower case (mail clients disagree on the case they write it in).
+ */
+export function normalizeContentId(value: string): string {
+    let text = value.trim();
+    try {
+        text = decodeURIComponent(text);
+    } catch {
+        // Not percent-encoded after all (a `%` of its own): taken as written.
+    }
+    return text.trim().replace(/^<|>$/g, "").toLowerCase();
+}
+
+/** A file name as a person would compare two of them: form-encoding (`+` for a space) and case undone. */
+function normalizeFilename(value: string): string {
+    let text = value.trim().replace(/\+/g, " ");
+    try {
+        text = decodeURIComponent(text);
+    } catch {
+        // Taken as written.
+    }
+    return text.toLowerCase();
+}
+
+/**
+ * The attachment an embedded image stands for: the one whose `Content-ID` is `cid` (see `normalizeContentId()`) or, for an image that
+ * names no part we can find - a message from an older version of this app attached the picture without a `Content-ID`, and the server
+ * then leaves the `<img>` with its `alt` only - the one image attachment whose file name is `alt`, when there is exactly one.
+ */
+export function findInlineAttachment<T extends InlineCandidate>(attachments: T[] | undefined, reference: { cid?: string; alt?: string }): T | undefined {
+    if (!attachments) {
+        return undefined;
+    }
+    if (reference.cid !== undefined) {
+        const wanted = normalizeContentId(reference.cid);
+        const byId = attachments.find((attachment) => attachment.contentId && normalizeContentId(attachment.contentId) === wanted);
+        if (byId) {
+            return byId;
+        }
+    }
+    const alt = reference.alt?.trim();
+    if (!alt) {
+        return undefined;
+    }
+    const wanted = normalizeFilename(alt);
+    const named = attachments.filter((attachment) => EMBEDDED_IMAGE_TYPES.test(attachment.mimeType) && normalizeFilename(attachment.filename) === wanted);
+    return named.length === 1 ? named[0] : undefined;
+}
+
+/** The base64 of `bytes`. */
+export function bytesToBase64(bytes: Uint8Array): string {
+    let binary = "";
+    for (let i = 0; i < bytes.length; i += 0x8000) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+    }
+    return btoa(binary);
+}
+
+/** A `data:` URI of `bytes` as `contentType`. */
+export function toDataUri(contentType: string, bytes: Uint8Array): string {
+    return `data:${contentType};base64,${bytesToBase64(bytes)}`;
+}
+
+const DATA_IMAGE = /^data:(image\/[a-z0-9.+-]+);base64,([a-z0-9+/=\s]*)$/i;
+
+/** The type and bytes of a base64 `data:image/...` URI, or `undefined` for anything else. */
+export function parseDataImage(uri: string): { contentType: string; bytes: Uint8Array } | undefined {
+    const match = DATA_IMAGE.exec(uri.trim());
+    if (!match) {
+        return undefined;
+    }
+    try {
+        const binary = atob(match[2].replace(/\s/g, ""));
+        return { contentType: match[1].toLowerCase(), bytes: Uint8Array.from(binary, (char) => char.charCodeAt(0)) };
+    } catch {
+        return undefined;
+    }
+}
+
+/** A new `Content-ID` for an image about to be attached to a draft. */
+export function newContentId(): string {
+    return `${crypto.randomUUID()}@inline.rapidmx`;
+}

package/lib/mail/mailApi.ts

@@ -18,6 +18,7 @@ import { ListParams, buildQuery } from "../util/apiQuery.js";
 import { deviceTimeZone } from "../util/timeZone.js";
 import type { EncryptionPreference, PublicKey } from "../crypto/keyvaultApi.js";
 import { bytesToBinaryString } from "../crypto/mime.js";
+import { newContentId, parseDataImage } from "./inlineImages.js";
 import type { ResolvedPrincipal } from "./mailboxAccessApi.js";
 
 export type { ListParams };
@@ -1005,6 +1006,8 @@ export interface Attachment {
     mimeType: string;
     sizeBytes: number;
     isInline: boolean;
+    /** The part's `Content-ID`, without angle brackets: what an inline image's `cid:` reference names. */
+    contentId?: string;
 }
 
 /** Lists the attachments belonging to a single message. */
@@ -1012,6 +1015,11 @@ export function listAttachments(folderUid: string, messageUid: string, client?:
     return withClient(client, `/mail/attachments?${buildQuery({ limit: 200 }, { folderUid, messageUid })}`);
 }
 
+/** Removes an attachment (from a draft). The server re-derives the message's `hasAttachments` itself. */
+export function deleteAttachment(uid: string, version: number, client?: ApiClient): Promise<void> {
+    return withClient(client, `/mail/attachments/${encodeURIComponent(uid)}?version=${version}`, { method: "DELETE" });
+}
+
 /** The URL to download/display an attachment's binary content — not fetched via `apiFetch`, used directly as
  * a link/image `href`/`src`. Honors `configureApiBaseUrl()` (see `apiUrl()`). */
 export function attachmentContentUrl(uid: string): string {
@@ -1023,9 +1031,19 @@ export function attachmentContentUrl(uid: string): string {
  * always forces `Content-Type: application/json`, which would corrupt binary content; this sends the file's
  * own bytes/type directly instead, matching `BaseAttachmentRoute.upload`'s expectation of a raw request body.
  */
-export async function uploadAttachment(messageUid: string, file: File): Promise<Attachment> {
-    const params = new URLSearchParams({ messageUid, filename: file.name, mimeType: file.type || "application/octet-stream" });
-    const res = await fetch(apiUrl(`/mail/attachments/upload?${params.toString()}`), {
+export async function uploadAttachment(messageUid: string, file: File, options: { inline?: boolean; contentId?: string } = {}): Promise<Attachment> {
+    // Percent-encoded, not form-encoded (`URLSearchParams` writes a space as `+`, which the server reads as a plus sign: "My+photo.png").
+    const query: Record<string, string> = { messageUid, filename: file.name, mimeType: file.type || "application/octet-stream" };
+    if (options.inline) {
+        // An image shown in the text of the message: it goes out as an inline part, which the text refers to by this `Content-ID`
+        // (`BaseMailComposeRoute.rewriteInlineImageSources()` turns the editor's preview URL into that `cid:` reference).
+        query.isInline = "true";
+        query.contentId = options.contentId ?? newContentId();
+    }
+    const params = Object.entries(query)
+        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+        .join("&");
+    const res = await fetch(apiUrl(`/mail/attachments/upload?${params}`), {
         method: "POST",
         credentials: "include",
         headers: withCsrfHeader({ "Content-Type": file.type || "application/octet-stream" }),
@@ -1130,13 +1148,54 @@ export function emptyFolder(folderUid: string, client?: ApiClient): Promise<void
  * — see `BaseMailComposeRoute` (this app's own compose-assembly glue, since `@rapidmx/restapi`'s `send()`
  * itself does no MIME composition). Does not send the message.
  */
-export function assembleDraft(messageUid: string, input: AssembleDraftInput, client?: ApiClient): Promise<Message> {
+export async function assembleDraft(messageUid: string, input: AssembleDraftInput, client?: ApiClient): Promise<Message> {
+    const html = await attachDataImages(messageUid, input.html);
     return withClient(client, `/mail/compose/${encodeURIComponent(messageUid)}/assemble`, {
         method: "POST",
-        body: JSON.stringify(input),
+        body: JSON.stringify({ ...input, html }),
     });
 }
 
+/** `data:` images already attached to a draft: its uid and the image, to the URL of the attachment it became. */
+const attachedDataImages = new Map<string, string>();
+
+const DATA_IMAGE_TAG = /(<img\b[^>]*?\bsrc\s*=\s*)(["'])(data:image\/[^"']*)\2/gi;
+
+/** Names a picture by its type, for the attachment it becomes. */
+function pictureName(contentType: string): string {
+    return `image.${contentType.split("/")[1].replace(/\+.*/, "").replace("jpeg", "jpg")}`;
+}
+
+/**
+ * `html` with each `<img>` that embeds its picture as a `data:` URI (a quoted original's image, one pasted into the editor) pointed at an
+ * attachment of the draft instead: the server drops `data:` images from the message it composes, and an attachment is what it makes an
+ * inline part of. A picture is attached once per draft however often the draft is saved.
+ */
+async function attachDataImages(messageUid: string, html: string): Promise<string> {
+    const found = Array.from(html.matchAll(DATA_IMAGE_TAG));
+    if (found.length === 0) {
+        return html;
+    }
+    const urls = new Map<string, string>();
+    for (const [, , , uri] of found) {
+        const key = `${messageUid}\n${uri}`;
+        const known = attachedDataImages.get(key);
+        if (known) {
+            urls.set(uri, known);
+            continue;
+        }
+        const image = parseDataImage(uri);
+        if (!image) {
+            continue;
+        }
+        const attachment = await uploadAttachment(messageUid, new File([image.bytes as BlobPart], pictureName(image.contentType), { type: image.contentType }), { inline: true });
+        const url = attachmentContentUrl(attachment.uid);
+        attachedDataImages.set(key, url);
+        urls.set(uri, url);
+    }
+    return html.replace(DATA_IMAGE_TAG, (match, start: string, quote: string, uri: string) => (urls.has(uri) ? `${start}${quote}${urls.get(uri)}${quote}` : match));
+}
+
 export interface AssembleDraftRawInput {
     to: ComposeRecipientInput[];
     cc?: ComposeRecipientInput[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",