@remit/web-client 0.0.136 → 0.0.137

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.136",
+  "version": "0.0.137",
   "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,274 @@
+import type { RichTextValue } from "@remit/ui/rich-text";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { expect, fn, userEvent, 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 Harness = ({
+	initialHtml = "",
+	initialText = "",
+	startIn = "rich",
+	onConversionError = () => undefined,
+	conversions,
+}: {
+	initialHtml?: string;
+	initialText?: string;
+	startIn?: "rich" | "plain";
+	onConversionError?: (failure: ConversionFailure) => void;
+	conversions?: {
+		toPlain: (value: RichTextValue) => string;
+		toRich: (text: string) => 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}
+			/>
+		</div>
+	);
+};
+
+/**
+ * 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();
+	},
+};

package/src/components/compose/ComposeBody.tsx

@@ -1,22 +1,170 @@
-import { RichTextEditor, type RichTextValue } from "@remit/ui/rich-text";
+import {
+	type ComposeBodyMode,
+	ComposeModeToggle,
+	markdownToHtml,
+	PlainTextEditor,
+	RichTextEditor,
+	type RichTextValue,
+} from "@remit/ui/rich-text";
+import { 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 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,
+}: ComposeBodyProps) => {
+	const [richHtml, setRichHtml] = useState(initialHtml);
+	const [richGeneration, setRichGeneration] = useState(0);
+	const [plainText, setPlainText] = 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: [],
+	});
+
+	const handleRichChange = (value: RichTextValue) => {
+		richValue.current = value;
+		onChange(value);
+	};
+
+	const handlePlainChange = (text: string) => {
+		setPlainText(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);
+		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();
+	};
+
+	const toggle = <ComposeModeToggle mode={mode} onToggle={handleToggle} />;
+
+	return (
+		<>
+			{mode === "plain" ? (
+				<PlainTextEditor
+					value={plainText}
+					onChange={handlePlainChange}
+					onSubmit={onSubmit}
+					autoFocus={focusSwitchedSurface}
+					trailing={toggle}
+				/>
+			) : (
+				<RichTextEditor
+					key={richGeneration}
+					initialHtml={richHtml}
+					onChange={handleRichChange}
+					onSubmit={onSubmit}
+					autoFocus={autoFocus || focusSwitchedSurface}
+					trailing={toggle}
+				/>
+			)}
+			<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

@@ -16,6 +16,7 @@ import {
 	type RichTextValue,
 	sanitizeQuotedHtml,
 } from "@remit/ui";
+import type { ComposeBodyMode } from "@remit/ui/rich-text";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import {
 	lazy,
@@ -37,6 +38,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 +149,28 @@ 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,
+): { textBody: string | undefined; htmlBody: string | undefined } => ({
+	textBody: body.text || undefined,
+	htmlBody: bodyMode === "plain" ? "" : body.html || undefined,
+});
+
 const isFormEmpty = (
 	toAddresses: AddressEntry[],
 	ccAddresses: AddressEntry[],
@@ -330,6 +354,8 @@ export const ComposeForm = ({
 		setShowCc(false);
 		setShowBcc(false);
 		setInitialHtml("");
+		setInitialText("");
+		setBodyMode("rich");
 		setBody(EMPTY_RICH_TEXT);
 		setDocumentGeneration((generation) => generation + 1);
 		setDraftLoaded(false);
@@ -344,9 +370,12 @@ export const ComposeForm = ({
 	const [initialHtml, setInitialHtml] = useState(() =>
 		buildInitialHtml(signature.plainText),
 	);
+	const [initialText, setInitialText] = useState(signature.plainText);
+	const [bodyMode, setBodyMode] = useState<ComposeBodyMode>("rich");
 	const [body, setBody] = useState<RichTextValue>(() => ({
 		html: buildInitialHtml(signature.plainText),
 		text: signature.plainText,
+		formatting: [],
 	}));
 
 	const { data: draftData } = useQuery({
@@ -381,12 +410,16 @@ 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.
+		const loadedHtml = draftData.htmlBody ?? "";
+		const loadedText = draftData.textBody ?? "";
+		setBodyMode(modeOfDraft(draftData.htmlBody));
 		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);
@@ -512,7 +545,7 @@ export const ComposeForm = ({
 		if (isFormEmpty(toAddresses, ccAddresses, bccAddresses, subject, body))
 			return;
 
-		const { html: htmlBody, text: textBody } = body;
+		const { htmlBody, textBody } = outgoingBody(bodyMode, body);
 
 		saveDraft({
 			accountId: selectedAccountId,
@@ -522,8 +555,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 +567,7 @@ export const ComposeForm = ({
 		bccAddresses,
 		subject,
 		body,
+		bodyMode,
 		saveDraft,
 	]);
 
@@ -551,7 +585,7 @@ export const ComposeForm = ({
 					? getReferences(sourceMessage)
 					: {};
 
-			const { html: htmlBody, text: textBody } = body;
+			const { htmlBody, textBody } = outgoingBody(bodyMode, body);
 			const createdThisAttempt = !outboxMessageId;
 
 			// The debounce dropped above may have been holding the last two seconds
@@ -568,8 +602,8 @@ export const ComposeForm = ({
 						? bccAddresses.map((a) => a.email)
 						: undefined,
 				subject: subject || undefined,
-				textBody: textBody || undefined,
-				htmlBody: htmlBody || undefined,
+				textBody,
+				htmlBody,
 				...replyData,
 			});
 
@@ -618,6 +652,7 @@ export const ComposeForm = ({
 		bccAddresses,
 		subject,
 		body,
+		bodyMode,
 		mode,
 		sourceMessage,
 		outboxMessageId,
@@ -703,10 +738,14 @@ 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}
 				/>
 			</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/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. */}