@remit/web-client 0.0.136 → 0.0.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.136",
+  "version": "0.0.138",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/ComposeBody.stories.tsx

@@ -0,0 +1,463 @@
+import type { RichTextValue } from "@remit/ui/rich-text";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { ComposeBody, type ConversionFailure } from "./ComposeBody";
+
+const RICH_DOCUMENT = [
+	"<h2>Quarterly numbers</h2>",
+	"<p>Revenue is <strong>up</strong> on the quarter.</p>",
+	"<table><thead><tr><th>Region</th><th>Total</th></tr></thead>",
+	"<tbody><tr><td>EMEA</td><td>412</td></tr></tbody></table>",
+].join("");
+
+const PLAIN_PARAGRAPHS =
+	"<p>Thanks — that works.</p><p></p><p>See you then.</p>";
+
+const UNDERLINED = "<p>Please <u>read this</u> before Friday.</p>";
+
+const PLAIN_MARKDOWN = [
+	"## Quarterly numbers",
+	"",
+	"| Region | Total |",
+	"| --- | --- |",
+	"| EMEA | 412 |",
+].join("\n");
+
+const DUTCH_DOCUMENT =
+	"<p>Beste Anna, de vergadering van donderdag gaat niet door. Ik stuur je morgen een nieuw voorstel voor de planning.</p>";
+
+const DUTCH_PROSE =
+	"Beste Anna, de vergadering van donderdag gaat niet door. Ik stuur je morgen een nieuw voorstel.";
+
+/** The languages a Dutch-writing account has configured, most-used first. */
+const LANGUAGES = ["nl", "en", "de"];
+
+const noop = () => undefined;
+
+const Harness = ({
+	initialHtml = "",
+	initialText = "",
+	startIn = "rich",
+	onConversionError = () => undefined,
+	conversions,
+	languages = LANGUAGES,
+	quoted,
+}: {
+	initialHtml?: string;
+	initialText?: string;
+	startIn?: "rich" | "plain";
+	onConversionError?: (failure: ConversionFailure) => void;
+	conversions?: {
+		toPlain: (value: RichTextValue) => string;
+		toRich: (text: string) => string;
+	};
+	languages?: string[];
+	quoted?: string;
+}) => {
+	const [mode, setMode] = useState<"rich" | "plain">(startIn);
+	return (
+		<div className="flex h-[460px] w-[680px] flex-col overflow-auto rounded-md border border-line bg-canvas">
+			<ComposeBody
+				mode={mode}
+				onModeChange={setMode}
+				initialHtml={initialHtml}
+				initialText={initialText}
+				onChange={() => undefined}
+				onConversionError={onConversionError}
+				conversions={conversions}
+				languages={languages}
+				onLanguageChange={noop}
+			/>
+			{quoted && (
+				<blockquote
+					data-testid="compose-quoted"
+					lang="fr"
+					className="border-l-2 border-line px-3 py-2 text-sm text-fg-muted"
+				>
+					{quoted}
+				</blockquote>
+			)}
+		</div>
+	);
+};
+
+const chipOf = (canvasElement: HTMLElement): HTMLElement => {
+	const chip = canvasElement.querySelector<HTMLElement>(
+		"[data-testid=compose-language-chip]",
+	);
+	if (!chip) throw new Error("the language chip is not mounted");
+	return chip;
+};
+
+/**
+ * The mode switch as the compose window runs it: the toolbar control, the one
+ * warning it raises, and the two surfaces it swaps between. The live
+ * `ComposeForm` adds the recipients, the autosave and the send around this.
+ */
+const meta: Meta<typeof Harness> = {
+	title: "Screens/WebClient/ComposeModes",
+	component: Harness,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof Harness>;
+
+const toggleOf = (canvasElement: HTMLElement): HTMLElement => {
+	const toggle = canvasElement.querySelector<HTMLElement>(
+		"[data-testid=compose-mode-toggle]",
+	);
+	if (!toggle) throw new Error("the mode toggle is not mounted");
+	return toggle;
+};
+
+const plainSurface = (canvasElement: HTMLElement): HTMLTextAreaElement | null =>
+	canvasElement.querySelector<HTMLTextAreaElement>(
+		"[data-testid=compose-body-plain]",
+	);
+
+export const RichDocument: Story = {
+	name: "Rich, with formatting",
+	args: { initialHtml: RICH_DOCUMENT },
+};
+
+export const PlainDraft: Story = {
+	name: "Plain, reopened from Markdown",
+	args: { startIn: "plain", initialText: PLAIN_MARKDOWN },
+};
+
+/**
+ * Cancel changes nothing: the mode stays rich, the document is untouched, and
+ * focus comes back to the control that was pressed. `aria-pressed` never flips
+ * optimistically.
+ */
+export const WarningCancelled: Story = {
+	name: "The warning, cancelled",
+	args: { initialHtml: RICH_DOCUMENT },
+	play: async ({ canvasElement }) => {
+		const toggle = toggleOf(canvasElement);
+		await userEvent.click(toggle);
+
+		const dialog = within(document.body).getByRole("dialog");
+		await expect(dialog).toHaveTextContent("Switch to plain text?");
+		await expect(dialog).toHaveTextContent(
+			"Formatting becomes Markdown. Bold keeps its asterisks, a table becomes rows of pipes, and that text is what the recipient gets. No formatted version is sent alongside it.",
+		);
+		await expect(toggle).toHaveAttribute("aria-pressed", "false");
+
+		await userEvent.click(
+			within(dialog).getByRole("button", { name: "Cancel" }),
+		);
+
+		await expect(plainSurface(canvasElement)).toBeNull();
+		await expect(
+			canvasElement.querySelector("[data-testid=compose-body] table"),
+		).not.toBeNull();
+		await expect(toggleOf(canvasElement)).toHaveFocus();
+	},
+};
+
+export const WarningConfirmed: Story = {
+	name: "The warning, confirmed",
+	args: { initialHtml: RICH_DOCUMENT },
+	play: async ({ canvasElement }) => {
+		await userEvent.click(toggleOf(canvasElement));
+		await userEvent.click(
+			within(within(document.body).getByRole("dialog")).getByRole("button", {
+				name: "Switch to plain text",
+			}),
+		);
+
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface did not arrive");
+		await expect(textarea.value).toContain("## Quarterly numbers");
+		await expect(textarea.value).toContain("**up**");
+		await expect(textarea.value).toContain("| EMEA | 412 |");
+
+		// The formatting buttons leave with the rich surface.
+		await expect(
+			canvasElement.querySelector("[aria-label='Bold (Ctrl+B)']"),
+		).toBeNull();
+		await expect(toggleOf(canvasElement)).toHaveAttribute(
+			"aria-pressed",
+			"true",
+		);
+		await expect(textarea).toHaveFocus();
+		await expect(textarea.selectionStart).toBe(textarea.value.length);
+	},
+};
+
+/** Nothing but paragraphs and a blank line: switching changes nothing, so nothing is asked. */
+export const PlainProseSwitchesSilently: Story = {
+	name: "Plain paragraphs switch without asking",
+	args: { initialHtml: PLAIN_PARAGRAPHS },
+	play: async ({ canvasElement }) => {
+		await userEvent.click(toggleOf(canvasElement));
+
+		await expect(within(document.body).queryByRole("dialog")).toBeNull();
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface did not arrive");
+		await expect(textarea.value).toContain("Thanks");
+		await expect(textarea.value).toContain("See you then.");
+	},
+};
+
+/**
+ * An underlined word exports identical to its own characters, so a comparison
+ * of the two strings would switch in silence and destroy it. The rule reads the
+ * document instead.
+ */
+export const UnderlineStillWarns: Story = {
+	name: "An underline alone still warns",
+	args: { initialHtml: UNDERLINED },
+	play: async ({ canvasElement }) => {
+		await userEvent.click(toggleOf(canvasElement));
+
+		await expect(within(document.body).getByRole("dialog")).toHaveTextContent(
+			"Switch to plain text?",
+		);
+	},
+};
+
+export const PlainToRich: Story = {
+	name: "Markdown back to rich, without asking",
+	args: { startIn: "plain", initialText: PLAIN_MARKDOWN },
+	play: async ({ canvasElement }) => {
+		await userEvent.click(toggleOf(canvasElement));
+
+		await expect(within(document.body).queryByRole("dialog")).toBeNull();
+		const editable = canvasElement.querySelector("[data-testid=compose-body]");
+		if (!editable) throw new Error("the rich surface did not arrive");
+		await expect(editable.querySelector("h2")).not.toBeNull();
+		await expect(editable.querySelector("table td")).not.toBeNull();
+	},
+};
+
+/** Switching an ordinary note to rich must not reflow it. */
+export const PlainProseToRich: Story = {
+	name: "Prose with no Markdown in it",
+	args: {
+		startIn: "plain",
+		initialText: "Thanks — that works.\n\nI'll send the deck tomorrow.",
+	},
+	play: async ({ canvasElement }) => {
+		await userEvent.click(toggleOf(canvasElement));
+
+		const editable = canvasElement.querySelector("[data-testid=compose-body]");
+		if (!editable) throw new Error("the rich surface did not arrive");
+		await expect(editable.querySelectorAll("p").length).toBe(2);
+		await expect(editable.textContent).toContain("Thanks — that works.");
+		await expect(editable.textContent).toContain(
+			"I'll send the deck tomorrow.",
+		);
+	},
+};
+
+/**
+ * A conversion that would blank a written message does not happen: autosave
+ * would persist the empty body a moment later and the draft would be gone with
+ * nothing said.
+ */
+export const ConversionCameBackEmpty: Story = {
+	name: "A conversion that came back empty",
+	args: {
+		startIn: "plain",
+		initialText: "Everything I wrote this morning.",
+		onConversionError: fn(),
+		conversions: {
+			toPlain: (value) => value.text,
+			toRich: () => "",
+		},
+	},
+	play: async ({ args, canvasElement }) => {
+		await userEvent.click(toggleOf(canvasElement));
+
+		await expect(args.onConversionError).toHaveBeenCalledWith({
+			outcome: "blocked",
+			title: "Couldn't switch to rich text",
+			detail: "The conversion came back empty, so your message is unchanged.",
+		});
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface left");
+		await expect(textarea.value).toBe("Everything I wrote this morning.");
+		await expect(toggleOf(canvasElement)).toHaveAttribute(
+			"aria-pressed",
+			"true",
+		);
+	},
+};
+
+/** One Shift+Tab out of the body reaches the toggle, and Enter acts. */
+export const ReachableFromTheBody: Story = {
+	name: "Shift+Tab from the body reaches it",
+	args: { initialHtml: PLAIN_PARAGRAPHS },
+	play: async ({ canvasElement }) => {
+		const editable = canvasElement.querySelector<HTMLElement>(
+			"[data-testid=compose-body]",
+		);
+		if (!editable) throw new Error("the rich surface is not mounted");
+
+		await userEvent.click(editable);
+		await userEvent.tab({ shift: true });
+		await expect(toggleOf(canvasElement)).toHaveFocus();
+
+		await userEvent.keyboard("{Enter}");
+		await expect(plainSurface(canvasElement)).not.toBeNull();
+	},
+};
+
+/**
+ * Detection runs over the body against the account's own languages and writes
+ * the result onto the writing surface. Firefox picks a dictionary from that tag
+ * among the ones the user installed; Chrome and Safari ignore it, and nothing
+ * here says otherwise.
+ */
+export const DutchIsDetected: Story = {
+	name: "Dutch prose sets the chip",
+	args: { initialHtml: DUTCH_DOCUMENT },
+	play: async ({ canvasElement }) => {
+		await waitFor(
+			async () => {
+				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+			},
+			{ timeout: 5000 },
+		);
+		await expect(
+			canvasElement.querySelector("[data-testid=compose-body]"),
+		).toHaveAttribute("lang", "nl");
+	},
+};
+
+/** Under twenty characters detection is a coin toss, so the account default stands. */
+export const TooShortHoldsTheDefault: Story = {
+	name: "Nine characters hold the default",
+	args: { startIn: "plain" },
+	play: async ({ canvasElement }) => {
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface is not mounted");
+
+		await userEvent.click(textarea);
+		await userEvent.keyboard("Hi Sophie");
+
+		await new Promise((resolve) => setTimeout(resolve, 800));
+		await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+	},
+};
+
+/**
+ * The first manual pick freezes the language for the rest of the message.
+ * Detection does not argue with a choice the user made — a tag that moved back
+ * under the caret would be a control that undoes itself.
+ */
+export const ManualPickSticks: Story = {
+	name: "A picked language survives more typing",
+	args: { startIn: "plain" },
+	play: async ({ canvasElement }) => {
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface is not mounted");
+
+		await userEvent.click(textarea);
+		await userEvent.keyboard(DUTCH_PROSE);
+		await waitFor(
+			async () => {
+				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+			},
+			{ timeout: 5000 },
+		);
+
+		await userEvent.click(chipOf(canvasElement));
+		await userEvent.click(
+			within(canvasElement).getByRole("menuitemradio", { name: /English/ }),
+		);
+		await expect(chipOf(canvasElement)).toHaveTextContent("EN");
+
+		await userEvent.click(textarea);
+		await userEvent.keyboard(" Groetjes, Matthijs.");
+		await new Promise((resolve) => setTimeout(resolve, 800));
+		await expect(chipOf(canvasElement)).toHaveTextContent("EN");
+		await expect(textarea).toHaveAttribute("lang", "en");
+	},
+};
+
+/**
+ * Two Shift+Tabs out of the body reach the chip — one still reaches the mode
+ * toggle, where #673 put it. The menu takes focus as it opens and hands it back
+ * to the chip on a pick, so the keyboard never lands somewhere it cannot leave.
+ */
+export const ChipFromTheKeyboard: Story = {
+	name: "Shift+Tab twice reaches the chip",
+	// Short enough that detection declines, so the chip is on the account
+	// default and the arrow key below has a known row to move off.
+	args: { initialHtml: "<p>Hoi.</p>" },
+	play: async ({ canvasElement }) => {
+		const editable = canvasElement.querySelector<HTMLElement>(
+			"[data-testid=compose-body]",
+		);
+		if (!editable) throw new Error("the rich surface is not mounted");
+
+		await userEvent.click(editable);
+		await userEvent.tab({ shift: true });
+		await expect(toggleOf(canvasElement)).toHaveFocus();
+		await userEvent.tab({ shift: true });
+		await expect(chipOf(canvasElement)).toHaveFocus();
+
+		await userEvent.keyboard("{Enter}");
+		await waitFor(async () => {
+			await expect(
+				canvasElement.querySelector("[data-testid=compose-language-menu]"),
+			).not.toBeNull();
+		});
+		await userEvent.keyboard("{ArrowDown}{Enter}");
+
+		await expect(chipOf(canvasElement)).toHaveTextContent("EN");
+		await expect(chipOf(canvasElement)).toHaveFocus();
+		await expect(editable).toHaveAttribute("lang", "en");
+	},
+};
+
+/** The tag follows the message across the mode switch, onto whichever surface is up. */
+export const PlainSurfaceCarriesTheLanguage: Story = {
+	name: "Plain text keeps the same language",
+	args: { initialHtml: DUTCH_DOCUMENT },
+	play: async ({ canvasElement }) => {
+		await waitFor(
+			async () => {
+				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+			},
+			{ timeout: 5000 },
+		);
+
+		await userEvent.click(toggleOf(canvasElement));
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface did not arrive");
+
+		await expect(textarea).toHaveAttribute("lang", "nl");
+		await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+	},
+};
+
+/**
+ * The quoted block a reply is written above is somebody else's text. It lives
+ * outside the editor, so detection never sees it and a French thread answered
+ * in Dutch is tagged Dutch.
+ */
+export const QuotedTextIsNotRead: Story = {
+	name: "A French quote under a Dutch reply",
+	args: {
+		initialHtml: DUTCH_DOCUMENT,
+		quoted:
+			"Bonjour, je vous confirme que la réunion de jeudi est annulée. Je vous propose de la reporter à la semaine prochaine.",
+	},
+	play: async ({ canvasElement }) => {
+		await waitFor(
+			async () => {
+				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+			},
+			{ timeout: 5000 },
+		);
+		await expect(
+			canvasElement.querySelector("[data-testid=compose-body]"),
+		).toHaveAttribute("lang", "nl");
+	},
+};

package/src/components/compose/ComposeBody.tsx

@@ -1,22 +1,210 @@
-import { RichTextEditor, type RichTextValue } from "@remit/ui/rich-text";
+import {
+	type ComposeBodyMode,
+	ComposeLanguageChip,
+	ComposeModeToggle,
+	markdownToHtml,
+	PlainTextEditor,
+	RichTextEditor,
+	type RichTextValue,
+	useComposeLanguage,
+} from "@remit/ui/rich-text";
+import { useEffect, useRef, useState } from "react";
+import { ConfirmDialog } from "../ui/ConfirmDialog";
+import { conversionOutcome, switchNeedsWarning } from "./compose-mode";
+
+export interface ConversionFailure {
+	title: string;
+	detail: string;
+}
+
+/**
+ * The two directions of the mode switch, injectable so a story can drive the
+ * conversion that comes back empty — the branch that keeps autosave from
+ * persisting a blanked draft, and the one case no real document produces on
+ * demand.
+ */
+export interface ComposeConversions {
+	toPlain: (value: RichTextValue) => string;
+	toRich: (text: string) => string;
+}
+
+export const DEFAULT_COMPOSE_CONVERSIONS: ComposeConversions = {
+	toPlain: (value) => value.text,
+	toRich: (text) => markdownToHtml(text),
+};
+
+const textOf = (html: string): string =>
+	new DOMParser().parseFromString(html, "text/html").body.textContent ?? "";
+
+const plainValue = (text: string): RichTextValue => ({
+	html: "",
+	text,
+	formatting: [],
+});
 
 interface ComposeBodyProps {
+	mode: ComposeBodyMode;
+	onModeChange: (mode: ComposeBodyMode) => void;
 	initialHtml: string;
+	initialText: string;
 	onChange: (value: RichTextValue) => void;
 	onSubmit?: () => void;
 	autoFocus?: boolean;
+	onConversionError: (failure: ConversionFailure) => void;
+	conversions?: ComposeConversions;
+	/** The account's writing languages, most-used first. */
+	languages: readonly string[];
+	/** The tag a reopened draft was stored under. */
+	initialLanguage?: string;
+	/** Reports the language the message is being written in, so the form can tag it. */
+	onLanguageChange: (language: string) => void;
 }
 
+/**
+ * The compose writing surface and the control that swaps it. Rich text is the
+ * WYSIWYG document; plain text is a textarea whose content is the Markdown that
+ * will be sent verbatim. The conversion runs over an in-memory document, so the
+ * surface swaps in the same frame the choice is made.
+ */
 export const ComposeBody = ({
+	mode,
+	onModeChange,
 	initialHtml,
+	initialText,
 	onChange,
 	onSubmit,
-	autoFocus,
-}: ComposeBodyProps) => (
-	<RichTextEditor
-		initialHtml={initialHtml}
-		onChange={onChange}
-		onSubmit={onSubmit}
-		autoFocus={autoFocus}
-	/>
-);
+	autoFocus = false,
+	onConversionError,
+	conversions = DEFAULT_COMPOSE_CONVERSIONS,
+	languages,
+	initialLanguage,
+	onLanguageChange,
+}: ComposeBodyProps) => {
+	const [richHtml, setRichHtml] = useState(initialHtml);
+	const [richGeneration, setRichGeneration] = useState(0);
+	const [plainText, setPlainText] = useState(initialText);
+	const [bodyText, setBodyText] = useState(initialText);
+	const [confirming, setConfirming] = useState(false);
+	// The caret does not survive a conversion: a rich selection is a node path
+	// and Markdown is a character offset. The surface that arrives takes focus
+	// with the caret at the end; the toggle keeps it when the mode did not change.
+	const [focusSwitchedSurface, setFocusSwitchedSurface] = useState(false);
+	const richValue = useRef<RichTextValue>({
+		html: initialHtml,
+		text: initialText,
+		formatting: [],
+	});
+
+	// Detection reads the body the user typed. The quoted reply block is not part
+	// of it — that lives outside the editor, in the form's own `quoted` slot.
+	const { language, choose } = useComposeLanguage({
+		languages,
+		text: bodyText,
+		initialLanguage,
+	});
+
+	useEffect(() => {
+		onLanguageChange(language);
+	}, [language, onLanguageChange]);
+
+	const handleRichChange = (value: RichTextValue) => {
+		richValue.current = value;
+		setBodyText(value.text);
+		onChange(value);
+	};
+
+	const handlePlainChange = (text: string) => {
+		setPlainText(text);
+		setBodyText(text);
+		onChange(plainValue(text));
+	};
+
+	const switchToPlain = () => {
+		const value = richValue.current;
+		const converted = conversions.toPlain(value);
+		const decision = conversionOutcome("plain", textOf(value.html), converted);
+		if (decision.outcome === "blocked") {
+			onConversionError(decision);
+			return;
+		}
+		setPlainText(converted);
+		setBodyText(converted);
+		setFocusSwitchedSurface(true);
+		onChange(plainValue(converted));
+		onModeChange("plain");
+	};
+
+	const switchToRich = () => {
+		const converted = conversions.toRich(plainText);
+		const decision = conversionOutcome("rich", plainText, textOf(converted));
+		if (decision.outcome === "blocked") {
+			onConversionError(decision);
+			return;
+		}
+		setRichHtml(converted);
+		setRichGeneration((generation) => generation + 1);
+		setFocusSwitchedSurface(true);
+		onModeChange("rich");
+	};
+
+	const handleToggle = () => {
+		if (mode === "plain") {
+			switchToRich();
+			return;
+		}
+		if (switchNeedsWarning("plain", richValue.current.formatting)) {
+			setConfirming(true);
+			return;
+		}
+		switchToPlain();
+	};
+
+	// The chip comes first so the mode toggle stays one Shift+Tab out of the
+	// body, where #673 put it, and the chip is the second.
+	const trailing = (
+		<>
+			<ComposeLanguageChip
+				language={language}
+				languages={languages}
+				onSelect={choose}
+			/>
+			<ComposeModeToggle mode={mode} onToggle={handleToggle} />
+		</>
+	);
+
+	return (
+		<>
+			{mode === "plain" ? (
+				<PlainTextEditor
+					value={plainText}
+					onChange={handlePlainChange}
+					onSubmit={onSubmit}
+					autoFocus={focusSwitchedSurface}
+					lang={language}
+					trailing={trailing}
+				/>
+			) : (
+				<RichTextEditor
+					key={richGeneration}
+					initialHtml={richHtml}
+					onChange={handleRichChange}
+					onSubmit={onSubmit}
+					autoFocus={autoFocus || focusSwitchedSurface}
+					lang={language}
+					trailing={trailing}
+				/>
+			)}
+			<ConfirmDialog
+				isOpen={confirming}
+				title="Switch to plain text?"
+				description="Formatting becomes Markdown. Bold keeps its asterisks, a table becomes rows of pipes, and that text is what the recipient gets. No formatted version is sent alongside it."
+				confirmLabel="Switch to plain text"
+				onConfirm={() => {
+					setConfirming(false);
+					switchToPlain();
+				}}
+				onCancel={() => setConfirming(false)}
+			/>
+		</>
+	);
+};

package/src/components/compose/ComposeForm.tsx

@@ -11,17 +11,22 @@ import type {
 import {
 	ComposeActionBar,
 	ComposeFormShell,
+	defaultComposeLanguages,
 	EMPTY_RICH_TEXT,
 	QuotedText,
 	type RichTextValue,
 	sanitizeQuotedHtml,
+	unwrapLanguage,
+	wrapWithLanguage,
 } from "@remit/ui";
+import type { ComposeBodyMode } from "@remit/ui/rich-text";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import {
 	lazy,
 	Suspense,
 	useCallback,
 	useEffect,
+	useMemo,
 	useRef,
 	useState,
 } from "react";
@@ -37,6 +42,7 @@ import {
 import type { AddressEntry } from "./AddressField";
 import { AddressField } from "./AddressField";
 import { ComposeSmtpMissingBanner } from "./ComposeSmtpMissingBanner";
+import { modeOfDraft } from "./compose-mode";
 
 const LazyComposeBody = lazy(() =>
 	import("./ComposeBody.js").then((m) => ({ default: m.ComposeBody })),
@@ -147,6 +153,34 @@ const getReferences = (
 	};
 };
 
+/**
+ * What the two body columns carry for this mode.
+ *
+ * Plain mode writes the empty string rather than omitting `htmlBody`: absent
+ * means "leave alone" at every layer below, so a plain draft that omitted it
+ * would send the HTML it was written as before the switch. The empty string is
+ * defined, so the repository's update guard clears the column, and nodemailer
+ * branches on the value being truthy — an empty one builds no HTML alternative
+ * and the message leaves as a single `text/plain` part.
+ *
+ * Rich mode leaves it alone while it has nothing to say, so the moments before
+ * the lazily-loaded editor reports its document cannot write a draft back as
+ * plain.
+ */
+const outgoingBody = (
+	bodyMode: ComposeBodyMode,
+	body: RichTextValue,
+	language: string,
+): { textBody: string | undefined; htmlBody: string | undefined } => ({
+	textBody: body.text || undefined,
+	htmlBody:
+		bodyMode === "plain"
+			? ""
+			: body.html
+				? wrapWithLanguage(body.html, language)
+				: undefined,
+});
+
 const isFormEmpty = (
 	toAddresses: AddressEntry[],
 	ccAddresses: AddressEntry[],
@@ -330,6 +364,9 @@ export const ComposeForm = ({
 		setShowCc(false);
 		setShowBcc(false);
 		setInitialHtml("");
+		setInitialText("");
+		setBodyMode("rich");
+		setDraftLanguage(undefined);
 		setBody(EMPTY_RICH_TEXT);
 		setDocumentGeneration((generation) => generation + 1);
 		setDraftLoaded(false);
@@ -344,9 +381,17 @@ export const ComposeForm = ({
 	const [initialHtml, setInitialHtml] = useState(() =>
 		buildInitialHtml(signature.plainText),
 	);
+	const [initialText, setInitialText] = useState(signature.plainText);
+	const [bodyMode, setBodyMode] = useState<ComposeBodyMode>("rich");
+	// What the body is tagged with on the way out. The composer owns the value —
+	// it is the surface that has the text detection reads — and reports it here,
+	// because this is where a draft is written and where a send is assembled.
+	const [composeLanguage, setComposeLanguage] = useState("en");
+	const [draftLanguage, setDraftLanguage] = useState<string | undefined>();
 	const [body, setBody] = useState<RichTextValue>(() => ({
 		html: buildInitialHtml(signature.plainText),
 		text: signature.plainText,
+		formatting: [],
 	}));
 
 	const { data: draftData } = useQuery({
@@ -381,12 +426,22 @@ export const ComposeForm = ({
 			setShowBcc(true);
 		}
 		if (draftData.subject) setSubject(draftData.subject);
-		// A draft stores what would have been sent, so a rich one reopens from its
-		// HTML. Only a draft that never had any falls back to its text.
-		const loadedHtml =
-			draftData.htmlBody || textToHtml(draftData.textBody ?? "");
+		// A draft stores what would have been sent, so which surface it reopens in
+		// is read off that rather than a field of its own. A rich draft comes back
+		// from its HTML — reading its text into one paragraph, as this did, brought
+		// a formatted message back flattened.
+		// A rich draft carries its language in the `<div lang>` it was stored
+		// under; the editor reopens on what is inside that, so a reopened draft
+		// does not gain a second wrapper on its next autosave. A plain draft has
+		// no HTML to have carried one, and comes back on the account default.
+		const stored = unwrapLanguage(draftData.htmlBody ?? "");
+		const loadedHtml = stored.html;
+		const loadedText = draftData.textBody ?? "";
+		setBodyMode(modeOfDraft(draftData.htmlBody));
+		setDraftLanguage(stored.language ?? undefined);
 		setInitialHtml(loadedHtml);
-		setBody({ html: loadedHtml, text: draftData.textBody ?? "" });
+		setInitialText(loadedText);
+		setBody({ html: loadedHtml, text: loadedText, formatting: [] });
 		setDocumentGeneration((generation) => generation + 1);
 		setSelectedAccountId(draftData.accountId);
 		setDraftLoaded(true);
@@ -492,6 +547,17 @@ export const ComposeForm = ({
 		? accountIsMissingSmtp(selectedAccount)
 		: false;
 
+	// An account that has never been to the language setting falls back to what
+	// the browser already knows the user reads, which is an ordered answer.
+	const configured = selectedAccount?.composeLanguages;
+	const accountLanguages = useMemo(
+		() =>
+			configured && configured.length > 0
+				? configured
+				: defaultComposeLanguages(navigator.languages),
+		[configured],
+	);
+
 	// The action bar refuses a second press while one is in flight, but the
 	// editor's own Cmd+Enter goes straight to `handleSend`, and the write that
 	// now precedes the request widens the window a second press lands in.
@@ -512,7 +578,11 @@ export const ComposeForm = ({
 		if (isFormEmpty(toAddresses, ccAddresses, bccAddresses, subject, body))
 			return;
 
-		const { html: htmlBody, text: textBody } = body;
+		const { htmlBody, textBody } = outgoingBody(
+			bodyMode,
+			body,
+			composeLanguage,
+		);
 
 		saveDraft({
 			accountId: selectedAccountId,
@@ -522,8 +592,8 @@ export const ComposeForm = ({
 			bccAddresses:
 				bccAddresses.length > 0 ? bccAddresses.map((a) => a.email) : undefined,
 			subject: subject || undefined,
-			textBody: textBody || undefined,
-			htmlBody: htmlBody || undefined,
+			textBody,
+			htmlBody,
 		});
 	}, [
 		selectedAccountId,
@@ -534,6 +604,8 @@ export const ComposeForm = ({
 		bccAddresses,
 		subject,
 		body,
+		bodyMode,
+		composeLanguage,
 		saveDraft,
 	]);
 
@@ -551,7 +623,11 @@ export const ComposeForm = ({
 					? getReferences(sourceMessage)
 					: {};
 
-			const { html: htmlBody, text: textBody } = body;
+			const { htmlBody, textBody } = outgoingBody(
+				bodyMode,
+				body,
+				composeLanguage,
+			);
 			const createdThisAttempt = !outboxMessageId;
 
 			// The debounce dropped above may have been holding the last two seconds
@@ -568,8 +644,8 @@ export const ComposeForm = ({
 						? bccAddresses.map((a) => a.email)
 						: undefined,
 				subject: subject || undefined,
-				textBody: textBody || undefined,
-				htmlBody: htmlBody || undefined,
+				textBody,
+				htmlBody,
 				...replyData,
 			});
 
@@ -618,6 +694,8 @@ export const ComposeForm = ({
 		bccAddresses,
 		subject,
 		body,
+		bodyMode,
+		composeLanguage,
 		mode,
 		sourceMessage,
 		outboxMessageId,
@@ -703,10 +781,17 @@ export const ComposeForm = ({
 			<Suspense fallback={<ComposeBodyFallback />}>
 				<LazyComposeBody
 					key={documentGeneration}
+					mode={bodyMode}
+					onModeChange={setBodyMode}
 					initialHtml={initialHtml}
+					initialText={initialText}
 					onChange={setBody}
 					onSubmit={handleSend}
 					autoFocus={mode === "new"}
+					onConversionError={pushError}
+					languages={accountLanguages}
+					initialLanguage={draftLanguage}
+					onLanguageChange={setComposeLanguage}
 				/>
 			</Suspense>
 		</ComposeFormShell>

package/src/components/compose/MobileComposeSheet.tsx

@@ -2,6 +2,7 @@ import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tansta
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useRef, useState } from "react";
 import { Drawer } from "vaul";
+import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { ComposeForm } from "./ComposeForm";
 import { useCompose } from "./ComposeProvider";
@@ -119,34 +120,16 @@ export const MobileComposeSheet = () => {
 				</Drawer.Content>
 			</Drawer.Portal>
 
-			{/* Confirmation dialog when dismissing dirty draft */}
-			{showConfirm && (
-				<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50">
-					<div className="mx-4 w-full max-w-sm rounded-xl bg-canvas p-6 shadow-xl">
-						<h3 className="text-lg font-semibold">Discard draft?</h3>
-						<p className="mt-2 text-sm text-fg-muted">
-							Your message has unsaved content. Are you sure you want to discard
-							it?
-						</p>
-						<div className="mt-4 flex justify-end gap-2">
-							<button
-								type="button"
-								onClick={handleCancelDiscard}
-								className="rounded-md px-4 py-2 text-sm font-medium hover:bg-surface-raised transition-colors"
-							>
-								Keep editing
-							</button>
-							<button
-								type="button"
-								onClick={handleConfirmDiscard}
-								className="rounded-md bg-danger px-4 py-2 text-sm font-medium text-canvas hover:bg-danger/90 transition-colors"
-							>
-								Discard
-							</button>
-						</div>
-					</div>
-				</div>
-			)}
+			<ConfirmDialog
+				isOpen={showConfirm}
+				title="Discard draft?"
+				description="Your message has unsaved content. Are you sure you want to discard it?"
+				confirmLabel="Discard"
+				cancelLabel="Keep editing"
+				destructive
+				onConfirm={handleConfirmDiscard}
+				onCancel={handleCancelDiscard}
+			/>
 		</Drawer.Root>
 	);
 };

package/src/components/compose/compose-mode.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Which surface a draft reopens in, and when a mode switch is refused.
+ *
+ * The mode is derived from `htmlBody`, with no field of its own. It has to be
+ * "a non-empty string" and not "truthy": the rich editor serializes an empty
+ * document to `<p><br></p>` and a plain draft clears the column to `""`, so a
+ * falsy check opens a plain draft correctly by accident and an absent column
+ * — an old draft, a partial write — the wrong way round.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	conversionOutcome,
+	modeOfDraft,
+	switchNeedsWarning,
+} from "./compose-mode.js";
+
+describe("the mode a draft reopens in", () => {
+	it("opens a draft with HTML as rich", () => {
+		assert.equal(modeOfDraft("<p>Hello</p>"), "rich");
+	});
+
+	it("opens an empty rich document as rich", () => {
+		assert.equal(modeOfDraft("<p><br></p>"), "rich");
+	});
+
+	it("opens a draft whose HTML was cleared as plain", () => {
+		assert.equal(modeOfDraft(""), "plain");
+	});
+
+	it("opens a draft that never had HTML as plain", () => {
+		assert.equal(modeOfDraft(undefined), "plain");
+	});
+});
+
+describe("whether the switch warns first", () => {
+	it("warns when the document holds formatting", () => {
+		assert.equal(switchNeedsWarning("plain", ["table"]), true);
+	});
+
+	it("says nothing over plain paragraphs", () => {
+		assert.equal(switchNeedsWarning("plain", []), false);
+	});
+
+	it("never warns on the way back to rich", () => {
+		assert.equal(switchNeedsWarning("rich", ["table", "bold"]), false);
+	});
+});
+
+describe("a conversion that would empty a written message", () => {
+	it("goes ahead when the conversion carried the message across", () => {
+		assert.deepEqual(conversionOutcome("plain", "Due Friday.", "Due Friday."), {
+			outcome: "switch",
+		});
+	});
+
+	it("goes ahead when there was nothing to carry", () => {
+		assert.deepEqual(conversionOutcome("plain", "", ""), { outcome: "switch" });
+	});
+
+	it("refuses, naming the direction, when plain text came back empty", () => {
+		assert.deepEqual(conversionOutcome("plain", "Due Friday.", "   "), {
+			outcome: "blocked",
+			title: "Couldn't switch to plain text",
+			detail: "The conversion came back empty, so your message is unchanged.",
+		});
+	});
+
+	it("refuses, naming the direction, when rich text came back empty", () => {
+		assert.deepEqual(conversionOutcome("rich", "Due Friday.", ""), {
+			outcome: "blocked",
+			title: "Couldn't switch to rich text",
+			detail: "The conversion came back empty, so your message is unchanged.",
+		});
+	});
+});

package/src/components/compose/compose-mode.ts

@@ -0,0 +1,50 @@
+import type { ComposeBodyMode } from "@remit/ui/rich-text";
+
+/**
+ * Which surface a draft reopens in, with no field of its own. `htmlBody` a
+ * non-empty string is a rich draft; anything else is plain.
+ *
+ * Not "falsy": the rich editor serializes an empty document to `<p><br></p>`,
+ * so a rich draft's `htmlBody` is never absent, and a plain draft clears the
+ * column to the empty string rather than omitting it — absent means "leave
+ * alone" at every layer below this one.
+ */
+export const modeOfDraft = (htmlBody: string | undefined): ComposeBodyMode =>
+	typeof htmlBody === "string" && htmlBody.length > 0 ? "rich" : "plain";
+
+/**
+ * Whether switching to plain text destroys something. True for any node type or
+ * text format the document holds that plain text cannot carry.
+ */
+export const switchNeedsWarning = (
+	target: ComposeBodyMode,
+	formatting: readonly string[],
+): boolean => target === "plain" && formatting.length > 0;
+
+export type ConversionOutcome =
+	| { outcome: "switch" }
+	| { outcome: "blocked"; title: string; detail: string };
+
+const BLOCKED_TITLES: Record<ComposeBodyMode, string> = {
+	plain: "Couldn't switch to plain text",
+	rich: "Couldn't switch to rich text",
+};
+
+/**
+ * A conversion that empties a written message does not happen. Autosave would
+ * persist the blank body a moment later, so the draft would be gone with
+ * nothing said. An empty body converting to an empty body is not this case.
+ */
+export const conversionOutcome = (
+	target: ComposeBodyMode,
+	source: string,
+	converted: string,
+): ConversionOutcome => {
+	if (source.trim() === "" || converted.trim() !== "")
+		return { outcome: "switch" };
+	return {
+		outcome: "blocked",
+		title: BLOCKED_TITLES[target],
+		detail: "The conversion came back empty, so your message is unchanged.",
+	};
+};

package/src/components/settings/AccountFormPanel.tsx

@@ -8,6 +8,7 @@ import {
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	Button,
+	ComposeLanguageSetting,
 	Input,
 	PasswordInput,
 	Select,
@@ -19,6 +20,7 @@ import { Check, Loader2, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { useComposeLanguages } from "../../hooks/useComposeLanguages";
 import { useSignature } from "../../hooks/useSignature";
 import {
 	getPresetById,
@@ -319,6 +321,25 @@ export const AccountFormPanel = ({
 	} = useSignature(account?.accountId);
 	const [signatureText, setSignatureText] = useState(signature.plainText);
 
+	const {
+		languages,
+		setLanguages,
+		isSaving: isLanguagesSaving,
+	} = useComposeLanguages(account?.accountId);
+
+	const languagesSection = (
+		<section>
+			<h3 className="text-2xs font-semibold text-fg-subtle uppercase tracking-wider mb-3">
+				Writing languages
+			</h3>
+			<ComposeLanguageSetting
+				value={languages}
+				onChange={setLanguages}
+				busy={isLanguagesSaving}
+			/>
+		</section>
+	);
+
 	useEffect(() => {
 		setSignatureText(signature.plainText);
 	}, [signature.plainText]);
@@ -475,6 +496,7 @@ export const AccountFormPanel = ({
 							</div>
 						</section>
 					)}
+					{isEditing && languagesSection}
 				</div>
 			</SlidePanel>
 		);
@@ -940,6 +962,7 @@ export const AccountFormPanel = ({
 						</div>
 					</section>
 				)}
+				{isEditing && languagesSection}
 			</form>
 		</SlidePanel>
 	);

package/src/components/ui/ConfirmDialog.tsx

@@ -57,16 +57,29 @@ export const ConfirmDialog = ({
 		return () => window.removeEventListener("keydown", handleKeyDown, true);
 	}, [isOpen, handleKeyDown]);
 
+	// Whoever opened the dialog gets the focus back when it closes. Without this
+	// a cancelled confirmation drops focus to the body, and the control the user
+	// was on — the compose mode toggle, a row's delete button — is gone from
+	// under the keyboard.
 	useEffect(() => {
-		if (isOpen) {
-			cancelRef.current?.focus();
-		}
+		if (!isOpen) return;
+		const opener =
+			document.activeElement instanceof HTMLElement
+				? document.activeElement
+				: null;
+		cancelRef.current?.focus();
+		return () => {
+			if (opener?.isConnected) opener.focus();
+		};
 	}, [isOpen]);
 
 	if (!isOpen) return null;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center">
+		// Above every other overlay, the mobile compose sheet included: a
+		// confirmation is the decision blocking whatever is under it, and a drawer
+		// portalled to the body at the same level would cover it.
+		<div className="fixed inset-0 z-[60] flex items-center justify-center">
 			{/* Backdrop. It carries the click-to-dismiss and the aria-hidden: the
 			    dialog itself must stay in the accessibility tree, and an
 			    aria-hidden ancestor would take it out. */}

package/src/hooks/useComposeLanguages.ts

@@ -0,0 +1,69 @@
+import {
+	accountDetailOperationsUpdateAccountMutation,
+	configOperationsGetConfigOptions,
+	configOperationsGetConfigQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { defaultComposeLanguages } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
+import { buildMutationErrorBanner } from "@/components/ui/error-banners";
+
+/**
+ * The account's writing languages: the menu the composer's language chip
+ * offers, and the set detection is allowed to choose inside. Absent on the
+ * server means the user has never been here, and the browser's own ordered
+ * answer stands in.
+ */
+export const useComposeLanguages = (accountId?: string) => {
+	const queryClient = useQueryClient();
+	const { pushError } = useErrorBanners();
+
+	const { data: config } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+
+	const configured = config?.accounts.find(
+		(account) => account.accountId === accountId,
+	)?.composeLanguages;
+
+	const languages = useMemo<string[]>(
+		() =>
+			configured && configured.length > 0
+				? [...configured]
+				: defaultComposeLanguages(navigator.languages),
+		[configured],
+	);
+
+	const mutation = useMutation({
+		...accountDetailOperationsUpdateAccountMutation(),
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: configOperationsGetConfigQueryKey(),
+			});
+		},
+		onError: (error) => {
+			pushError(
+				buildMutationErrorBanner(
+					"Couldn't save languages",
+					"The writing languages weren't saved.",
+					error,
+				),
+			);
+		},
+	});
+
+	const setLanguages = useCallback(
+		(next: string[]) => {
+			if (!accountId) return;
+			mutation.mutate({
+				path: { accountId },
+				body: { composeLanguages: next },
+			});
+		},
+		[accountId, mutation],
+	);
+
+	return { languages, setLanguages, isSaving: mutation.isPending };
+};