@remit/web-client 0.0.228 → 0.0.229

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.228",
+  "version": "0.0.229",
   "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/ComposeForm.tsx

@@ -9,6 +9,7 @@ import type {
 	RemitImapDescribeMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
 import {
+	Banner,
 	ComposeActionBar,
 	ComposeBodySkeleton,
 	ComposeFormShell,
@@ -24,7 +25,6 @@ import {
 	SMTP_MISSING_MESSAGE,
 	sanitizeQuotedHtml,
 	unwrapLanguage,
-	wrapWithLanguage,
 } from "@remit/ui";
 import type { ComposeBodyMode } from "@remit/ui/rich-text";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -56,6 +56,13 @@ import type {
 import { AddressField } from "./AddressField";
 import { ComposeSmtpMissingBanner } from "./ComposeSmtpMissingBanner";
 import { composeSpellcheck } from "./compose-spellcheck.js";
+import {
+	buildQuotedBlock,
+	outgoingBody,
+	type QuotedBlock,
+	type QuotedSourceBody,
+	textToHtml,
+} from "./quoted-message.js";
 
 const LazyComposeBody = lazy(() =>
 	import("@remit/ui/rich-text").then((m) => ({ default: m.ComposeBody })),
@@ -90,19 +97,6 @@ interface ComposeFormProps {
 	layout?: ComposeShellLayout;
 }
 
-const escapeHtml = (text: string): string =>
-	text
-		.replace(/&/g, "&")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;")
-		.replace(/"/g, "&quot;");
-
-const textToHtml = (text: string): string =>
-	text
-		.split("\n")
-		.map((line) => `<p>${escapeHtml(line)}</p>`)
-		.join("");
-
 const buildInitialHtml = (signaturePlainText: string): string => {
 	if (!signaturePlainText) return "";
 	return `<p></p><p>-- </p>${textToHtml(signaturePlainText)}`;
@@ -185,34 +179,6 @@ 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,
-});
-
 type SendReadiness =
 	| { status: "sending" }
 	| { status: "blocked"; reason: string }
@@ -243,6 +209,22 @@ interface AddressFieldHandles {
  */
 const NO_TO_ADDRESS_MESSAGE = "Add a To address before sending.";
 
+/**
+ * Send waits for the message being quoted. Pressed before it lands, the send
+ * would go out carrying the answer and nothing of what it answers — the defect
+ * this refusal exists to make impossible rather than merely unlikely (#845.5).
+ */
+const QUOTE_LOADING_MESSAGE = "Loading the message you're quoting.";
+
+/**
+ * The quoted original could not be fetched. A forward without it is an empty
+ * message and a reply without it drops the thread, so the composer says so
+ * where the message is being written instead of sending a message the user
+ * believes carries the original.
+ */
+const QUOTE_FAILED_MESSAGE =
+	"The message you're quoting couldn't be loaded, so it won't be included.";
+
 /** A field holding text that is not an address, and which field it is. */
 interface UnparsedField {
 	label: string;
@@ -456,6 +438,15 @@ export const ComposeForm = ({
 	 * the subject the reader edited.
 	 */
 	const resumedDraftRef = useRef(outboxMessageId !== undefined);
+	/**
+	 * Whether the document on screen already carries the quoted original. True of
+	 * exactly one thing: a draft read back from the server, which was saved with
+	 * the quote in its body. Held as state rather than read off `resumedDraftRef`
+	 * because the quote is assembled during render.
+	 */
+	const [documentHoldsQuote, setDocumentHoldsQuote] = useState(
+		outboxMessageId !== undefined,
+	);
 	/**
 	 * The mode the fields on screen were last written for. A draft that is
 	 * resumed holds what its reader saved and must not be overwritten when it
@@ -521,6 +512,7 @@ export const ComposeForm = ({
 		prevOutboxMessageIdRef.current = outboxMessageId;
 		if (previous === undefined) return;
 		resumedDraftRef.current = outboxMessageId !== undefined;
+		setDocumentHoldsQuote(outboxMessageId !== undefined);
 		seededModeRef.current =
 			outboxMessageId !== undefined ? modeRef.current : undefined;
 		seededMyEmailRef.current = undefined;
@@ -679,22 +671,42 @@ export const ComposeForm = ({
 	}, [mode, sourceMessage, account?.email, clearPendingFields]);
 
 	// Quoted reply/forward content lives at the per-part `contentUrl` since
-	// #224 PR 3 — fetch it via the same hook MessageBody uses, and degrade
-	// to an empty quote when nothing renderable exists (the user can still
-	// attribute the reply manually).
+	// #224 PR 3 — fetch it via the same hook MessageBody uses.
 	const isQuoting =
 		mode === "reply" || mode === "reply-all" || mode === "forward";
-	const { data: sourceBody } = useMessageBodyContent({
+	const {
+		data: sourceBody,
+		isLoading: quoteIsLoading,
+		isError: quoteFailed,
+		refetch: refetchQuote,
+	} = useMessageBodyContent({
 		messageId: sourceMessage?.message.messageId,
 		bodyParts: sourceMessage?.bodyParts,
 		enabled: isQuoting && !!sourceMessage,
 	});
 
-	const quotedText = sourceBody?.kind === "text" ? sourceBody.body : "";
-	const quotedHtml =
-		sourceBody?.kind === "html"
-			? sanitizeQuotedHtml(sourceBody.body)
-			: undefined;
+	/**
+	 * The original as it will be sent, and as it is shown while the answer is
+	 * written — one value for both, because the two disagreeing is the whole of
+	 * #845.5.
+	 *
+	 * Absent for a draft read back from the server: that document was saved with
+	 * the quote already in it, so the editor holds it and appending a second copy
+	 * would send the original twice.
+	 */
+	const quotedBlock = useMemo<QuotedBlock | undefined>(() => {
+		if (!isQuoting || !sourceMessage || documentHoldsQuote) return undefined;
+		if (!sourceBody) return undefined;
+		const body: QuotedSourceBody =
+			sourceBody.kind === "html"
+				? { kind: "html", content: sanitizeQuotedHtml(sourceBody.body) }
+				: { kind: "text", content: sourceBody.body };
+		return buildQuotedBlock(
+			mode === "forward" ? "forward" : "reply",
+			sourceMessage.envelope,
+			body,
+		);
+	}, [isQuoting, sourceMessage, documentHoldsQuote, sourceBody, mode]);
 
 	const senderName =
 		sourceMessage?.envelope.from[0]?.displayName ??
@@ -806,6 +818,9 @@ export const ComposeForm = ({
 			if (selectedAccountMissingSmtp) {
 				return { status: "blocked", reason: SMTP_MISSING_MESSAGE };
 			}
+			if (quoteIsLoading) {
+				return { status: "blocked", reason: QUOTE_LOADING_MESSAGE };
+			}
 			if (unparsed) {
 				return { status: "blocked", reason: unparsedRefusal(unparsed) };
 			}
@@ -814,7 +829,7 @@ export const ComposeForm = ({
 			}
 			return { status: "ready", accountId: selectedAccountId };
 		},
-		[isSending, selectedAccountId, selectedAccountMissingSmtp],
+		[isSending, selectedAccountId, selectedAccountMissingSmtp, quoteIsLoading],
 	);
 	const sendReadiness = useMemo<SendReadiness>(
 		() =>
@@ -850,6 +865,7 @@ export const ComposeForm = ({
 			bodyMode,
 			body,
 			composeLanguage,
+			quotedBlock,
 		);
 
 		const payload = {
@@ -887,6 +903,7 @@ export const ComposeForm = ({
 		body,
 		bodyMode,
 		composeLanguage,
+		quotedBlock,
 		saveDraft,
 	]);
 
@@ -908,6 +925,7 @@ export const ComposeForm = ({
 					bodyMode,
 					body,
 					composeLanguage,
+					quotedBlock,
 				);
 				const createdThisAttempt = !outboxMessageId;
 
@@ -976,6 +994,7 @@ export const ComposeForm = ({
 			body,
 			bodyMode,
 			composeLanguage,
+			quotedBlock,
 			mode,
 			sourceMessage,
 			outboxMessageId,
@@ -1066,12 +1085,28 @@ export const ComposeForm = ({
 		<ComposeFormShell
 			layout={layout}
 			banner={
-				selectedAccount && selectedAccountMissingSmtp ? (
-					<ComposeSmtpMissingBanner
-						accountId={selectedAccount.accountId}
-						configureRef={smtpConfigureRef}
-					/>
-				) : undefined
+				<>
+					{selectedAccount && selectedAccountMissingSmtp ? (
+						<ComposeSmtpMissingBanner
+							accountId={selectedAccount.accountId}
+							configureRef={smtpConfigureRef}
+						/>
+					) : null}
+					{quoteFailed ? (
+						<Banner tone="warning" data-testid="compose-quote-failed">
+							<span>{QUOTE_FAILED_MESSAGE}</span>{" "}
+							<button
+								type="button"
+								className="underline"
+								onClick={() => {
+									void refetchQuote();
+								}}
+							>
+								Try again
+							</button>
+						</Banner>
+					) : null}
+				</>
 			}
 			header={
 				<WiredComposeHeader
@@ -1095,10 +1130,10 @@ export const ComposeForm = ({
 				/>
 			}
 			quoted={
-				quotedText || quotedHtml ? (
+				quotedBlock ? (
 					<QuotedText
-						text={quotedText}
-						html={quotedHtml}
+						text={quotedBlock.text}
+						html={quotedBlock.html}
 						senderName={senderName}
 					/>
 				) : undefined

package/src/components/compose/quote-leaves-with-the-send.render.test.ts

@@ -0,0 +1,234 @@
+/**
+ * Issue #845.5: the composer showed the quoted original under the editor the
+ * whole time a reply or a forward was being written, and sent neither. A
+ * forward left carrying the signature and nothing else.
+ *
+ * Asserted here on the request, because the request is what the recipient gets:
+ * the body compose writes before it dispatches has to hold the message on
+ * screen. Send is also refused while that message is still being fetched — a
+ * press landing in that window is the same empty forward with the timing
+ * changed.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapAccountResponse,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
+import { createElement, useState } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { ComposeForm } from "./ComposeForm";
+import type { ComposeMode } from "./ComposeProvider";
+import { ComposeProvider } from "./ComposeProvider";
+
+const ACCOUNT_ID = "acc-1";
+const BODY_URL = "/content/msg-1/body.txt";
+const ORIGINAL = "Are we still on for Thursday?\n\nI can do 12:30.";
+
+const account = {
+	accountId: ACCOUNT_ID,
+	email: "me@example.com",
+	smtpEnabled: true,
+} as unknown as RemitImapAccountResponse;
+
+const sourceMessage = {
+	message: { messageId: "msg-1" },
+	envelope: {
+		subject: "Lunch",
+		date: Date.UTC(2026, 5, 24, 9, 14),
+		messageIdValue: "<m1@example.com>",
+		from: [{ normalizedEmail: "dana@example.com", displayName: "Dana" }],
+		replyTo: [],
+		to: [{ normalizedEmail: "me@example.com" }],
+		cc: [],
+	},
+	references: [],
+	bodyParts: [
+		{
+			mediaType: "TEXT",
+			mediaSubtype: "PLAIN",
+			contentUrl: BODY_URL,
+			isMultipart: false,
+		},
+	],
+} as unknown as RemitImapDescribeMessageResponse;
+
+const outboxEntry = () => ({
+	outboxMessageId: "ob-845",
+	accountId: ACCOUNT_ID,
+	fromAddress: account.email,
+	toAddresses: ["dana@example.com"],
+	ccAddresses: [],
+	bccAddresses: [],
+	references: [],
+	subject: "Re: Lunch",
+	status: "draft",
+});
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const Opened = ({ mode }: { mode: ComposeMode }) => {
+	const [draftId, setDraftId] = useState<string | undefined>(undefined);
+
+	return createElement(ComposeForm, {
+		mode,
+		account,
+		sourceMessage,
+		outboxMessageId: draftId,
+		onDraftCreated: setDraftId,
+		onClose: () => {},
+	});
+};
+
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const rootRoute = createRootRoute();
+const mailboxRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/mail/$mailboxId",
+	validateSearch: (search: Record<string, unknown>) => search,
+});
+
+const testRouter = (): AnyRouter =>
+	createRouter({
+		routeTree: rootRoute.addChildren([mailboxRoute]),
+		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
+	}) as unknown as AnyRouter;
+
+interface MountOptions {
+	mode: ComposeMode;
+	/** Hold the quoted body's fetch open, so Send is pressed without it. */
+	gateBody?: boolean;
+}
+
+const mount = async (
+	options: MountOptions,
+): Promise<{ releaseBody: () => void }> => {
+	let release = (): void => {};
+	const bodyGate = options.gateBody
+		? new Promise<void>((resolve) => {
+				release = resolve;
+			})
+		: Promise.resolve();
+
+	http = mockFetch(async (call) => {
+		if (call.path === BODY_URL) {
+			await bodyGate;
+			return new Response(ORIGINAL, {
+				status: 200,
+				headers: { "content-type": "text/plain" },
+			});
+		}
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		return outboxEntry();
+	});
+
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(RouterContextProvider, {
+			router: testRouter(),
+			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
+			children: createElement(
+				ComposeProvider,
+				null,
+				createElement(Opened, { mode: options.mode }),
+			),
+		}),
+	);
+	await harness.flush();
+	await harness.wait(100);
+	await harness.flush();
+
+	return { releaseBody: release };
+};
+
+const sendButton = (): HTMLElement => {
+	const button = harness?.byText("button", "Send");
+	if (!button) throw new Error("the compose send button is not mounted");
+	return button;
+};
+
+const addRecipient = (email: string): void => {
+	const field = harness?.query<HTMLInputElement>("#address-field-To");
+	if (!field) throw new Error("the To field is not mounted");
+	harness?.type(field, email);
+};
+
+const written = (): Record<string, unknown> => {
+	const body = (http?.calls ?? []).find(
+		(call) =>
+			(call.method === "POST" && call.path.endsWith("/outbox")) ||
+			call.method === "PATCH",
+	)?.body;
+	if (!body) throw new Error("nothing was written for the send");
+	return body;
+};
+
+describe("the message a reply and a forward leave with (#845.5)", () => {
+	it("sends a reply carrying the message it answers", async () => {
+		await mount({ mode: "reply" });
+
+		harness?.click(sendButton());
+		await harness?.flush();
+		await harness?.wait(100);
+
+		const body = written();
+		assert.match(String(body.textBody), /^On .+ Dana .+ wrote:$/m);
+		assert.match(String(body.textBody), /^> Are we still on for Thursday\?$/m);
+		assert.match(String(body.htmlBody), /<blockquote type="cite">/);
+		assert.match(String(body.htmlBody), /Are we still on for Thursday\?/);
+	});
+
+	it("sends a forward carrying the message it forwards", async () => {
+		await mount({ mode: "forward" });
+
+		addRecipient("bob@example.com");
+		harness?.click(sendButton());
+		await harness?.flush();
+		await harness?.wait(100);
+
+		const body = written();
+		assert.match(String(body.textBody), /-+ Forwarded message -+/);
+		assert.match(String(body.textBody), /^Subject: Lunch$/m);
+		assert.match(String(body.textBody), /Are we still on for Thursday\?/);
+		assert.match(String(body.htmlBody), /Forwarded message/);
+		assert.match(String(body.htmlBody), /Are we still on for Thursday\?/);
+	});
+
+	it("refuses to send while the message being quoted is still loading", async () => {
+		const { releaseBody } = await mount({ mode: "reply", gateBody: true });
+
+		harness?.click(sendButton());
+		await harness?.flush();
+		await harness?.wait(50);
+
+		assert.equal(
+			(http?.calls ?? []).filter((call) => call.path.endsWith("/send")).length,
+			0,
+			"nothing was dispatched without the message it quotes",
+		);
+		assert.match(harness?.text() ?? "", /Loading the message you're quoting/);
+
+		releaseBody();
+		await harness?.flush();
+		await harness?.wait(50);
+	});
+});

package/src/components/compose/quoted-message.test.ts

@@ -0,0 +1,158 @@
+/**
+ * Issue #845.5: the quoted original was a layout slot and never part of the
+ * body, so a forward left carrying the signature alone. These hold the two
+ * halves of what a send now carries — the block itself, and its merge into the
+ * two body columns in each of the two body modes.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { RemitImapDescribeMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type { RichTextValue } from "@remit/ui";
+import { buildQuotedBlock, outgoingBody } from "./quoted-message";
+
+type Envelope = RemitImapDescribeMessageResponse["envelope"];
+
+const envelope = {
+	subject: "Lunch",
+	date: Date.UTC(2026, 5, 24, 9, 14),
+	messageIdValue: "<m1@example.com>",
+	from: [
+		{ normalizedEmail: "dana@example.com", displayName: "Dana Whitfield" },
+	],
+	replyTo: [],
+	to: [{ normalizedEmail: "me@example.com", displayName: "Me" }],
+	cc: [],
+} as unknown as Envelope;
+
+const written = (text: string, html: string): RichTextValue => ({
+	text,
+	html,
+	formatting: [],
+});
+
+describe("the quoted original a reply carries", () => {
+	const block = buildQuotedBlock("reply", envelope, {
+		kind: "text",
+		content: "Are we still on for Thursday?\n\nI can do 12:30.",
+	});
+
+	it("opens on the attribution line the rest of the tree recognises", () => {
+		assert.match(block.text.split("\n")[0] ?? "", /^On .+ wrote:$/);
+		assert.match(block.text, /Dana Whitfield <dana@example\.com>/);
+	});
+
+	it("indents every line of the original behind it", () => {
+		assert.match(block.text, /^> Are we still on for Thursday\?$/m);
+		assert.match(block.text, /^> I can do 12:30\.$/m);
+	});
+
+	it("carries the same original in the HTML column, as a quote", () => {
+		assert.match(block.html, /<blockquote type="cite">/);
+		assert.match(block.html, /Are we still on for Thursday\?/);
+	});
+});
+
+describe("the quoted original a forward carries", () => {
+	const block = buildQuotedBlock(
+		"forward",
+		{
+			...envelope,
+			cc: [{ normalizedEmail: "sam@example.com" }],
+		} as unknown as Envelope,
+		{ kind: "text", content: "Are we still on for Thursday?" },
+	);
+
+	it("states who wrote it, when, about what and to whom", () => {
+		assert.match(block.text, /^-+ Forwarded message -+$/m);
+		assert.match(block.text, /^From: Dana Whitfield <dana@example\.com>$/m);
+		assert.match(block.text, /^Subject: Lunch$/m);
+		assert.match(block.text, /^To: Me <me@example\.com>$/m);
+		assert.match(block.text, /^Cc: sam@example\.com$/m);
+	});
+
+	it("passes the original on whole rather than quoting it", () => {
+		assert.match(block.text, /^Are we still on for Thursday\?$/m);
+		assert.doesNotMatch(block.text, /^> /m);
+	});
+
+	it("carries the header and the original in the HTML column", () => {
+		assert.match(block.html, /Forwarded message/);
+		assert.match(block.html, /Subject: Lunch/);
+		assert.match(block.html, /Are we still on for Thursday\?/);
+	});
+});
+
+describe("the two representations of one original", () => {
+	it("reads an HTML original into lines for the text column", () => {
+		const block = buildQuotedBlock("reply", envelope, {
+			kind: "html",
+			content: "<p>First paragraph.</p><p>Second paragraph.</p>",
+		});
+		assert.match(block.text, /^> First paragraph\.$/m);
+		assert.match(block.text, /^> Second paragraph\.$/m);
+		assert.doesNotMatch(block.text, /<p>|<\/p>/);
+	});
+
+	it("escapes a plain-text original on its way into the HTML column", () => {
+		const block = buildQuotedBlock("reply", envelope, {
+			kind: "text",
+			content: '5 < 6 & "quoted"',
+		});
+		assert.match(block.html, /5 &lt; 6 &amp; &quot;quoted&quot;/);
+		assert.match(block.text, /5 < 6 & "quoted"/);
+	});
+});
+
+describe("the body a send leaves with", () => {
+	const block = buildQuotedBlock("reply", envelope, {
+		kind: "text",
+		content: "Are we still on for Thursday?",
+	});
+
+	it("carries the answer and the original in both columns, in rich mode", () => {
+		const body = outgoingBody(
+			"rich",
+			written("Yes, 12:30 works.", "<p>Yes, 12:30 works.</p>"),
+			"en",
+			block,
+		);
+		assert.match(body.textBody ?? "", /Yes, 12:30 works\./);
+		assert.match(body.textBody ?? "", /^> Are we still on for Thursday\?$/m);
+		assert.match(body.htmlBody ?? "", /Yes, 12:30 works\./);
+		assert.match(body.htmlBody ?? "", /<blockquote type="cite">/);
+		assert.match(body.htmlBody ?? "", /^<div lang="en">/);
+	});
+
+	it("carries the original in the text column alone, in plain mode", () => {
+		const body = outgoingBody(
+			"plain",
+			written("Yes, 12:30 works.", ""),
+			"en",
+			block,
+		);
+		assert.match(body.textBody ?? "", /Yes, 12:30 works\./);
+		assert.match(body.textBody ?? "", /^> Are we still on for Thursday\?$/m);
+		assert.doesNotMatch(body.textBody ?? "", /<blockquote/);
+		// An HTML column here would reopen the draft as rich and send the
+		// recipient an HTML alternative of a message written as plain text.
+		assert.equal(body.htmlBody, "");
+	});
+
+	it("sends the quote when the editor has not reported its document yet", () => {
+		const body = outgoingBody("rich", written("", ""), "en", block);
+		assert.match(body.textBody ?? "", /^> Are we still on for Thursday\?$/m);
+		assert.match(body.htmlBody ?? "", /<blockquote type="cite">/);
+	});
+
+	it("writes what it always wrote when there is nothing to quote", () => {
+		const body = outgoingBody(
+			"rich",
+			written("A new message.", "<p>A new message.</p>"),
+			"en",
+			undefined,
+		);
+		assert.equal(body.textBody, "A new message.");
+		assert.equal(body.htmlBody, '<div lang="en"><p>A new message.</p></div>');
+	});
+});

package/src/components/compose/quoted-message.ts

@@ -0,0 +1,216 @@
+import type { RemitImapDescribeMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { type RichTextValue, wrapWithLanguage } from "@remit/ui";
+import type { ComposeBodyMode } from "@remit/ui/rich-text";
+import { formatDate } from "../../lib/format";
+
+type Envelope = RemitImapDescribeMessageResponse["envelope"];
+type EnvelopeAddress = Envelope["from"][number];
+
+/** Whether the original is being answered or passed on. */
+export type QuoteKind = "reply" | "forward";
+
+/** The message being quoted, in both the representations a send carries. */
+export interface QuotedBlock {
+	text: string;
+	html: string;
+}
+
+/**
+ * The original's body as the content route hands it over: one part, either
+ * HTML or plain text, never both. The other representation is derived here,
+ * because a message goes out with both and HTML markup dropped into the
+ * `text/plain` part arrives as visible tags.
+ */
+export type QuotedSourceBody =
+	| { kind: "text"; content: string }
+	| { kind: "html"; content: string };
+
+export const escapeHtml = (text: string): string =>
+	text
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;");
+
+export const textToHtml = (text: string): string =>
+	text
+		.split("\n")
+		.map((line) => `<p>${escapeHtml(line)}</p>`)
+		.join("");
+
+/**
+ * Elements that end the line they are on. Everything else is inline and runs
+ * into its neighbours, which is what separates a plain-text rendering of a
+ * message from its `textContent` — that returns one long line with the words
+ * of adjacent paragraphs joined together.
+ */
+const LINE_BREAKING_TAGS = new Set([
+	"ADDRESS",
+	"ARTICLE",
+	"BLOCKQUOTE",
+	"BR",
+	"DIV",
+	"H1",
+	"H2",
+	"H3",
+	"H4",
+	"H5",
+	"H6",
+	"HR",
+	"LI",
+	"OL",
+	"P",
+	"PRE",
+	"SECTION",
+	"TABLE",
+	"TR",
+	"UL",
+]);
+
+const htmlToPlainText = (html: string): string => {
+	const parsed = new DOMParser().parseFromString(html, "text/html");
+	const lines: string[] = [];
+	let line = "";
+
+	const endLine = (): void => {
+		lines.push(line.trim());
+		line = "";
+	};
+
+	const visit = (node: Node): void => {
+		if (node.nodeType === node.TEXT_NODE) {
+			line += (node.textContent ?? "").replace(/\s+/g, " ");
+			return;
+		}
+		if (node.nodeType !== node.ELEMENT_NODE) return;
+		const breaks = LINE_BREAKING_TAGS.has((node as Element).tagName);
+		if (breaks && line !== "") endLine();
+		for (const child of node.childNodes) visit(child);
+		if (breaks) endLine();
+	};
+
+	visit(parsed.body);
+	if (line !== "") endLine();
+	return lines
+		.join("\n")
+		.replace(/\n{3,}/g, "\n\n")
+		.trim();
+};
+
+const addressLabel = (address: EnvelopeAddress): string =>
+	address.displayName
+		? `${address.displayName} <${address.normalizedEmail}>`
+		: address.normalizedEmail;
+
+const addressList = (addresses: readonly EnvelopeAddress[]): string =>
+	addresses.map(addressLabel).join(", ");
+
+/**
+ * An absolute date, because the attribution outlives the moment it was written
+ * — the relative form the message list uses would reach the recipient reading
+ * "Yesterday" about a day that is no longer yesterday.
+ */
+const quotedDate = (date: Envelope["date"]): string =>
+	formatDate(date, {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "numeric",
+	});
+
+/** The form `snippet.ts` and the search chunker both recognise as a quote. */
+const attributionLine = (envelope: Envelope): string => {
+	const who = addressList(envelope.from) || "the sender";
+	const when = quotedDate(envelope.date);
+	if (!when) return `${who} wrote:`;
+	return `On ${when}, ${who} wrote:`;
+};
+
+const FORWARD_RULE = "---------- Forwarded message ----------";
+
+const forwardHeader = (envelope: Envelope): string[] => {
+	const lines = [
+		FORWARD_RULE,
+		`From: ${addressList(envelope.from)}`,
+		`Date: ${quotedDate(envelope.date)}`,
+		`Subject: ${envelope.subject ?? ""}`,
+		`To: ${addressList(envelope.to)}`,
+	];
+	if (envelope.cc.length > 0) lines.push(`Cc: ${addressList(envelope.cc)}`);
+	return lines;
+};
+
+const quotePrefixed = (text: string): string[] =>
+	text.split("\n").map((line) => (line === "" ? ">" : `> ${line}`));
+
+/**
+ * The original, as the message being written will carry it. One value, so what
+ * the composer shows under the editor is the same block that leaves for the
+ * API rather than a second rendering of the same source (#845.5).
+ *
+ * A reply indents the original behind an attribution line; a forward passes it
+ * on whole under the header block, because a forward is the original message
+ * rather than a passage cited from it.
+ */
+export const buildQuotedBlock = (
+	kind: QuoteKind,
+	envelope: Envelope,
+	body: QuotedSourceBody,
+): QuotedBlock => {
+	const bodyText =
+		body.kind === "text" ? body.content.trim() : htmlToPlainText(body.content);
+	const bodyHtml =
+		body.kind === "html" ? body.content : textToHtml(body.content.trim());
+
+	if (kind === "forward") {
+		const header = forwardHeader(envelope);
+		return {
+			text: [...header, "", bodyText].join("\n"),
+			html: `${textToHtml(header.join("\n"))}${bodyHtml}`,
+		};
+	}
+
+	const attribution = attributionLine(envelope);
+	return {
+		text: [attribution, ...quotePrefixed(bodyText)].join("\n"),
+		html: `<p>${escapeHtml(attribution)}</p><blockquote type="cite">${bodyHtml}</blockquote>`,
+	};
+};
+
+const joinText = (written: string, quoted: string): string =>
+	written === "" ? quoted : `${written}\n\n${quoted}`;
+
+/**
+ * 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. It is also why the
+ * quote reaches a plain message through `textBody` alone: putting its markup in
+ * `htmlBody` would reopen the draft as rich and send the recipient an HTML
+ * alternative of a message written as plain text.
+ *
+ * Rich mode leaves `htmlBody` 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. A quote is something to say, so a send pressed in those
+ * moments still carries the message it quotes.
+ */
+export const outgoingBody = (
+	bodyMode: ComposeBodyMode,
+	body: RichTextValue,
+	language: string,
+	quoted: QuotedBlock | undefined,
+): { textBody: string | undefined; htmlBody: string | undefined } => {
+	const text = quoted ? joinText(body.text, quoted.text) : body.text;
+	if (bodyMode === "plain")
+		return { textBody: text || undefined, htmlBody: "" };
+	const html = quoted ? `${body.html}${quoted.html}` : body.html;
+	return {
+		textBody: text || undefined,
+		htmlBody: html ? wrapWithLanguage(html, language) : undefined,
+	};
+};