@remit/web-client 0.0.133 → 0.0.135

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.133",
+  "version": "0.0.135",
   "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": {
@@ -61,9 +61,6 @@
   },
   "dependencies": {
     "@hookform/resolvers": "*",
-    "@platejs/autoformat": "*",
-    "@platejs/basic-nodes": "*",
-    "@platejs/link": "*",
     "@remit/api-http-client": "*",
     "@remit/domain-enums": "*",
     "@remit/ui": "*",
@@ -82,7 +79,6 @@
     "i18next-http-backend": "^3.0.6",
     "lucide-react": "^0.468",
     "p-map": "*",
-    "platejs": "*",
     "react-hook-form": "*",
     "react-i18next": "^15",
     "tailwind-merge": "^2",

package/src/components/compose/ComposeBody.tsx

@@ -1,36 +1,22 @@
-import type { Value } from "platejs";
-import { Plate } from "platejs/react";
-import { PlateEditorContent, usePlateComposeEditor } from "./PlateEditor.js";
-import { PlateToolbar } from "./PlateToolbar.js";
+import { RichTextEditor, type RichTextValue } from "@remit/ui/rich-text";
 
 interface ComposeBodyProps {
-	value: Value;
-	onChange: (value: Value) => void;
+	initialHtml: string;
+	onChange: (value: RichTextValue) => void;
 	onSubmit?: () => void;
 	autoFocus?: boolean;
 }
 
 export const ComposeBody = ({
-	value,
+	initialHtml,
 	onChange,
 	onSubmit,
 	autoFocus,
-}: ComposeBodyProps) => {
-	const editor = usePlateComposeEditor(value);
-
-	return (
-		<Plate
-			editor={editor}
-			onValueChange={({ value: v }) => {
-				onChange(v);
-			}}
-		>
-			<PlateToolbar />
-			<PlateEditorContent
-				editor={editor}
-				onSubmit={onSubmit}
-				autoFocus={autoFocus}
-			/>
-		</Plate>
-	);
-};
+}: ComposeBodyProps) => (
+	<RichTextEditor
+		initialHtml={initialHtml}
+		onChange={onChange}
+		onSubmit={onSubmit}
+		autoFocus={autoFocus}
+	/>
+);

package/src/components/compose/ComposeForm.tsx

@@ -3,15 +3,20 @@ import {
 	outboxDetailOperationsDeleteOutboxMessageMutation,
 	outboxDetailOperationsGetOutboxMessageOptions,
 	outboxDetailOperationsSendOutboxMessageMutation,
-	outboxOperationsCreateOutboxMessageMutation,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type {
 	RemitImapAccountResponse,
 	RemitImapDescribeMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
-import { ComposeActionBar, ComposeFormShell, QuotedText } from "@remit/ui";
+import {
+	ComposeActionBar,
+	ComposeFormShell,
+	EMPTY_RICH_TEXT,
+	QuotedText,
+	type RichTextValue,
+	sanitizeQuotedHtml,
+} from "@remit/ui";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import type { Value } from "platejs";
 import {
 	lazy,
 	Suspense,
@@ -23,10 +28,6 @@ import {
 import { useMessageBodyContent } from "../../hooks/useMessageBodyContent";
 import { useSaveDraft } from "../../hooks/useSaveDraft";
 import { useSignature } from "../../hooks/useSignature.js";
-import {
-	plateValueToHtml,
-	plateValueToText,
-} from "../../lib/plate-serializer.js";
 import { accountIsMissingSmtp } from "../settings/account-form-helpers.js";
 import { useErrorBanners } from "../ui/ErrorBannerProvider.js";
 import {
@@ -54,7 +55,6 @@ import type { ComposeMode } from "./ComposeProvider";
 import { useCompose } from "./ComposeProvider";
 import { FromSelector } from "./FromSelector";
 import { SubjectField } from "./SubjectField";
-import { sanitizeQuoteHtml } from "./sanitize-quote-html.js";
 
 interface ComposeFormProps {
 	mode: ComposeMode;
@@ -64,19 +64,22 @@ interface ComposeFormProps {
 	onAccountChange?: (account: RemitImapAccountResponse) => void;
 }
 
-const EMPTY_PARAGRAPH: Value = [{ type: "p", children: [{ text: "" }] }];
-
-const SIGNATURE_SEPARATOR: Value = [
-	{ type: "p", children: [{ text: "" }] },
-	{ type: "p", children: [{ text: "-- " }] },
-];
-
-const buildInitialBody = (signaturePlainText: string): Value => {
-	if (!signaturePlainText) return EMPTY_PARAGRAPH;
-	return [
-		...SIGNATURE_SEPARATOR,
-		{ type: "p", children: [{ text: signaturePlainText }] },
-	];
+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)}`;
 };
 
 const buildReplySubject = (subject?: string): string => {
@@ -149,13 +152,13 @@ const isFormEmpty = (
 	ccAddresses: AddressEntry[],
 	bccAddresses: AddressEntry[],
 	subject: string,
-	body: Value,
+	body: RichTextValue,
 ): boolean =>
 	toAddresses.length === 0 &&
 	ccAddresses.length === 0 &&
 	bccAddresses.length === 0 &&
 	subject.trim() === "" &&
-	plateValueToText(body).trim() === "";
+	body.text.trim() === "";
 
 // ---------------------------------------------------------------------------
 // ComposeHeader — collapsed on mobile when the software keyboard is open
@@ -310,24 +313,41 @@ export const ComposeForm = ({
 	// changes while compose is already open). Without this, the previous draft's
 	// fields stay visible and the new draft never loads because draftLoaded
 	// remains true from the prior session (#536).
+	//
+	// A first autosave also sets the id, from nothing to the draft it just
+	// created. That is this session's own content arriving back, not a switch to
+	// somebody else's document, and blanking the form there would throw away
+	// whatever is being typed.
 	useEffect(() => {
-		if (prevOutboxMessageIdRef.current === outboxMessageId) return;
+		const previous = prevOutboxMessageIdRef.current;
+		if (previous === outboxMessageId) return;
 		prevOutboxMessageIdRef.current = outboxMessageId;
-		if (!outboxMessageId) return;
+		if (!outboxMessageId || previous === undefined) return;
 		setToAddresses([]);
 		setCcAddresses([]);
 		setBccAddresses([]);
 		setSubject("");
 		setShowCc(false);
 		setShowBcc(false);
-		setBody(EMPTY_PARAGRAPH);
+		setInitialHtml("");
+		setBody(EMPTY_RICH_TEXT);
+		setDocumentGeneration((generation) => generation + 1);
 		setDraftLoaded(false);
 	}, [outboxMessageId]);
 
 	const { signature } = useSignature(selectedAccountId);
-	const [body, setBody] = useState<Value>(() =>
-		buildInitialBody(signature.plainText),
+	// The editor reads its document once, so this is the document it opens on,
+	// not the live value, and it is remounted when the generation changes. Only
+	// loading a different document bumps that — remounting mid-compose would take
+	// the caret, the focus and the undo history with it.
+	const [documentGeneration, setDocumentGeneration] = useState(0);
+	const [initialHtml, setInitialHtml] = useState(() =>
+		buildInitialHtml(signature.plainText),
 	);
+	const [body, setBody] = useState<RichTextValue>(() => ({
+		html: buildInitialHtml(signature.plainText),
+		text: signature.plainText,
+	}));
 
 	const { data: draftData } = useQuery({
 		...outboxDetailOperationsGetOutboxMessageOptions({
@@ -361,8 +381,13 @@ export const ComposeForm = ({
 			setShowBcc(true);
 		}
 		if (draftData.subject) setSubject(draftData.subject);
-		if (draftData.textBody)
-			setBody([{ type: "p", children: [{ text: draftData.textBody }] }]);
+		// 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 ?? "");
+		setInitialHtml(loadedHtml);
+		setBody({ html: loadedHtml, text: draftData.textBody ?? "" });
+		setDocumentGeneration((generation) => generation + 1);
 		setSelectedAccountId(draftData.accountId);
 		setDraftLoaded(true);
 	}, [draftData, draftLoaded]);
@@ -398,17 +423,29 @@ export const ComposeForm = ({
 	const quotedText = sourceBody?.kind === "text" ? sourceBody.body : "";
 	const quotedHtml =
 		sourceBody?.kind === "html"
-			? sanitizeQuoteHtml(sourceBody.body)
+			? sanitizeQuotedHtml(sourceBody.body)
 			: undefined;
 
 	const senderName =
 		sourceMessage?.envelope.from[0]?.displayName ??
 		sourceMessage?.envelope.from[0]?.normalizedEmail;
 
-	const { saveStatus, saveError, saveDraft, stopAutoSave } = useSaveDraft({
-		outboxMessageId,
-		onDraftCreated: setOutboxMessageId,
-	});
+	// The draft this session just created holds what is already on screen, so
+	// there is nothing to read back — and reading it back would replace the
+	// document under the caret with the server's copy of it.
+	const adoptCreatedDraft = useCallback(
+		(createdId: string) => {
+			setDraftLoaded(true);
+			setOutboxMessageId(createdId);
+		},
+		[setOutboxMessageId],
+	);
+
+	const { saveStatus, saveError, saveDraft, saveImmediately, stopAutoSave } =
+		useSaveDraft({
+			outboxMessageId,
+			onDraftCreated: adoptCreatedDraft,
+		});
 
 	// Auto-save runs on a debounce, so a failure has no inline call site to
 	// surface it. Push the real error detail to a banner instead of leaving only
@@ -423,10 +460,6 @@ export const ComposeForm = ({
 		});
 	}, [saveError, pushError]);
 
-	const createMutation = useMutation(
-		outboxOperationsCreateOutboxMessageMutation(),
-	);
-
 	const sendMutation = useMutation(
 		outboxDetailOperationsSendOutboxMessageMutation(),
 	);
@@ -459,7 +492,11 @@ export const ComposeForm = ({
 		? accountIsMissingSmtp(selectedAccount)
 		: false;
 
-	const isSending = createMutation.isPending || sendMutation.isPending;
+	// 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.
+	const sendInFlightRef = useRef(false);
+	const [isSending, setIsSending] = useState(false);
 	const canSend =
 		toAddresses.length > 0 &&
 		!!selectedAccountId &&
@@ -475,8 +512,7 @@ export const ComposeForm = ({
 		if (isFormEmpty(toAddresses, ccAddresses, bccAddresses, subject, body))
 			return;
 
-		const textBody = plateValueToText(body);
-		const htmlBody = plateValueToHtml(body);
+		const { html: htmlBody, text: textBody } = body;
 
 		saveDraft({
 			accountId: selectedAccountId,
@@ -502,77 +538,79 @@ export const ComposeForm = ({
 	]);
 
 	const handleSend = useCallback(async () => {
+		if (sendInFlightRef.current) return;
 		if (!selectedAccountId || toAddresses.length === 0) return;
 
-		stopAutoSave();
-
-		const replyData =
-			sourceMessage && (mode === "reply" || mode === "reply_all")
-				? getReferences(sourceMessage)
-				: {};
+		sendInFlightRef.current = true;
+		setIsSending(true);
+		try {
+			stopAutoSave();
+
+			const replyData =
+				sourceMessage && (mode === "reply" || mode === "reply_all")
+					? getReferences(sourceMessage)
+					: {};
+
+			const { html: htmlBody, text: textBody } = body;
+			const createdThisAttempt = !outboxMessageId;
+
+			// The debounce dropped above may have been holding the last two seconds
+			// of typing, and an existing entry would otherwise go out as the server
+			// last saw it (#674). What is on screen is written first, and a write
+			// that fails stops the send rather than transmitting the older copy.
+			const flushed = await saveImmediately({
+				accountId: selectedAccountId,
+				toAddresses: toAddresses.map((a) => a.email),
+				ccAddresses:
+					ccAddresses.length > 0 ? ccAddresses.map((a) => a.email) : undefined,
+				bccAddresses:
+					bccAddresses.length > 0
+						? bccAddresses.map((a) => a.email)
+						: undefined,
+				subject: subject || undefined,
+				textBody: textBody || undefined,
+				htmlBody: htmlBody || undefined,
+				...replyData,
+			});
 
-		let messageId = outboxMessageId;
-		let createdThisAttempt = false;
+			if (flushed.outcome === "failed") {
+				pushError({
+					title: "Couldn't send message",
+					detail:
+						formatErrorDetail(flushed.error) ??
+						"Saving the message failed, so nothing was sent. Try again.",
+					error: flushed.error,
+				});
+				return;
+			}
 
-		if (!messageId) {
-			const textBody = plateValueToText(body);
-			const htmlBody = plateValueToHtml(body);
+			const messageId = flushed.outboxMessageId;
 
-			const outboxMessage = await createMutation
+			const sent = await sendMutation
 				.mutateAsync({
-					body: {
-						accountId: selectedAccountId,
-						toAddresses: toAddresses.map((a) => a.email),
-						ccAddresses:
-							ccAddresses.length > 0
-								? ccAddresses.map((a) => a.email)
-								: undefined,
-						bccAddresses:
-							bccAddresses.length > 0
-								? bccAddresses.map((a) => a.email)
-								: undefined,
-						subject: subject || undefined,
-						textBody: textBody || undefined,
-						htmlBody: htmlBody || undefined,
-						sendImmediately: false,
-						...replyData,
-					},
+					path: { outboxMessageId: messageId },
 				})
 				.catch((error: unknown) => {
 					pushError({
 						title: "Couldn't send message",
-						detail: formatErrorDetail(error) ?? "Saving the draft failed.",
+						detail:
+							formatErrorDetail(error) ??
+							(createdThisAttempt
+								? "The draft was saved but the send request failed. Try again from the Outbox."
+								: "The send request failed. Try again."),
 						error,
 					});
 					return null;
 				});
-			if (outboxMessage === null) return;
-			messageId = outboxMessage.outboxMessageId;
-			createdThisAttempt = true;
-			setOutboxMessageId(messageId);
+			if (sent === null) return;
+
+			stopAutoSave(messageId);
+			startSendPolling(messageId);
+			onClose();
+		} finally {
+			sendInFlightRef.current = false;
+			setIsSending(false);
 		}
-
-		const sent = await sendMutation
-			.mutateAsync({
-				path: { outboxMessageId: messageId },
-			})
-			.catch((error: unknown) => {
-				pushError({
-					title: "Couldn't send message",
-					detail:
-						formatErrorDetail(error) ??
-						(createdThisAttempt
-							? "The draft was saved but the send request failed. Try again from the Outbox."
-							: "The send request failed. Try again."),
-					error,
-				});
-				return null;
-			});
-		if (sent === null) return;
-
-		stopAutoSave(messageId);
-		startSendPolling(messageId);
-		onClose();
 	}, [
 		selectedAccountId,
 		toAddresses,
@@ -583,11 +621,10 @@ export const ComposeForm = ({
 		mode,
 		sourceMessage,
 		outboxMessageId,
-		createMutation,
+		saveImmediately,
 		sendMutation,
 		stopAutoSave,
 		startSendPolling,
-		setOutboxMessageId,
 		pushError,
 		onClose,
 	]);
@@ -665,7 +702,8 @@ export const ComposeForm = ({
 		>
 			<Suspense fallback={<ComposeBodyFallback />}>
 				<LazyComposeBody
-					value={body}
+					key={documentGeneration}
+					initialHtml={initialHtml}
 					onChange={setBody}
 					onSubmit={handleSend}
 					autoFocus={mode === "new"}

package/src/components/compose/MobileComposeSheet.tsx

@@ -27,7 +27,7 @@ const useIsDraftDirty = (): (() => boolean) => {
 		const subject =
 			document.querySelector<HTMLInputElement>("[data-subject-field]")?.value ??
 			"";
-		const editorEl = document.querySelector("[data-slate-editor]");
+		const editorEl = document.querySelector('[data-testid="compose-body"]');
 		const bodyText = editorEl?.textContent ?? "";
 		// Strip signature separator "-- " to avoid false positives
 		const cleaned = bodyText.replace(/--\s*/g, "").trim();

package/src/components/compose/compose-send-stops-autosave.render.test.ts

@@ -14,6 +14,12 @@
  * then sends it — and creating it as already-queued makes that send a second
  * dispatch, which the server refuses.
  *
+ * Issue #674 is the boundary between the two: pressing Send inside the two
+ * seconds the debounce is still counting down. The cancelled timer was carrying
+ * the last edits, and the entry went out as the server last saw it. So the send
+ * writes what is on screen first, and a write that fails takes the send with it
+ * rather than transmitting the older copy behind the user's back.
+ *
  * The stub holds the outbox rule the API holds: only a draft accepts a send.
  */
 
@@ -81,8 +87,18 @@ afterEach(() => {
 const callsTo = (suffix: string) =>
 	(http?.calls ?? []).filter((call) => call.path.endsWith(suffix));
 
-const patchCount = (): number =>
-	(http?.calls ?? []).filter((call) => call.method === "PATCH").length;
+const patches = () =>
+	(http?.calls ?? []).filter((call) => call.method === "PATCH");
+
+const patchCount = (): number => patches().length;
+
+const patchesAfterTheSend = (): number => {
+	const calls = http?.calls ?? [];
+	const sendIndex = calls.findIndex((call) => call.path.endsWith("/send"));
+	if (sendIndex === -1) throw new Error("the send never went out");
+	return calls.slice(sendIndex + 1).filter((call) => call.method === "PATCH")
+		.length;
+};
 
 const Opened = ({ outboxMessageId }: { outboxMessageId?: string }) => {
 	const { state, openCompose } = useCompose();
@@ -108,6 +124,8 @@ interface MountOptions {
 	outboxMessageId?: string;
 	/** Hold the PATCH response open so a save is still in flight at send time. */
 	gatePatch?: boolean;
+	/** Refuse every PATCH, so the write compose makes before sending fails. */
+	failPatch?: boolean;
 }
 
 const mount = async (
@@ -140,6 +158,7 @@ const mount = async (
 
 		if (call.method === "PATCH") {
 			await patchGate;
+			if (options.failPatch) return httpError(409, "The draft moved on.");
 			return outboxEntry(status);
 		}
 
@@ -172,7 +191,7 @@ const sendButton = (): HTMLElement => {
 	return button;
 };
 
-describe("compose and the outbox entry it is sending (#604)", () => {
+describe("compose and the outbox entry it is sending (#604, #674)", () => {
 	it("writes no further PATCH to an entry once it has been sent", async () => {
 		const { releasePatch } = await mount({
 			outboxMessageId: OUTBOX_MESSAGE_ID,
@@ -193,7 +212,76 @@ describe("compose and the outbox entry it is sending (#604)", () => {
 		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 200);
 
 		assert.equal(callsTo("/send").length, 1, "the send went out");
-		assert.equal(patchCount(), 1, "no autosave PATCH followed the send");
+		assert.equal(patchesAfterTheSend(), 0, "no write followed the send");
+		// The in-flight autosave and the write before the send are the two, in
+		// that order: a second write issued alongside the first could land behind
+		// it and put the older body back.
+		assert.equal(
+			patchCount(),
+			2,
+			"the two writes went out one after the other",
+		);
+	});
+
+	it("writes the edit made inside the debounce window before it sends", async () => {
+		await mount({ outboxMessageId: OUTBOX_MESSAGE_ID });
+
+		harness?.type(subjectField(), "Re: Lunch tomorrow");
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 100);
+		assert.equal(patchCount(), 1, "the typing burst autosaves once");
+
+		// Inside the two seconds the next autosave would have waited.
+		harness?.type(subjectField(), "Re: Lunch on Thursday");
+		harness?.click(sendButton());
+		await harness?.flush();
+		await harness?.wait(100);
+
+		assert.equal(callsTo("/send").length, 1, "the send went out");
+		const written = patches().at(-1);
+		assert.equal(
+			written?.body?.subject,
+			"Re: Lunch on Thursday",
+			"the entry carries the edit the debounce was still holding",
+		);
+		// Autosave never writes these, so an entry autosaved before Send used to
+		// go out unchained from the message it replies to.
+		assert.equal(written?.body?.inReplyTo, "<m1@example.com>");
+		assert.deepEqual(written?.body?.references, ["<m1@example.com>"]);
+		assert.equal(closed, 1, "compose closed on a successful send");
+	});
+
+	it("sends nothing, and says so, when that write fails", async () => {
+		await mount({ outboxMessageId: OUTBOX_MESSAGE_ID, failPatch: true });
+
+		harness?.type(subjectField(), "Re: Lunch on Thursday");
+		harness?.click(sendButton());
+		await harness?.flush();
+		await harness?.wait(100);
+
+		assert.equal(patchCount(), 1, "the write was attempted");
+		assert.equal(callsTo("/send").length, 0, "the older copy stayed put");
+		assert.equal(closed, 0, "compose stayed open");
+		assert.match(harness?.text() ?? "", /Couldn't send message/);
+	});
+
+	it("dispatches once when Send is pressed twice over the write", async () => {
+		const { releasePatch } = await mount({
+			outboxMessageId: OUTBOX_MESSAGE_ID,
+			gatePatch: true,
+		});
+
+		harness?.type(subjectField(), "Re: Lunch on Thursday");
+		harness?.click(sendButton());
+		harness?.click(sendButton());
+		await harness?.flush();
+
+		releasePatch();
+		await harness?.flush();
+		await harness?.wait(100);
+
+		assert.equal(patchCount(), 1, "the entry was written once");
+		assert.equal(callsTo("/send").length, 1, "the message went out once");
+		assert.equal(closed, 1, "compose closed on a successful send");
 	});
 
 	it("sends a reply pressed before the first autosave, in one dispatch", async () => {

package/src/hooks/useSaveDraft.ts

@@ -8,6 +8,10 @@ import { useCallback, useRef, useState } from "react";
 
 export type SaveStatus = "idle" | "saving" | "saved" | "error";
 
+export type ImmediateSave =
+	| { outcome: "saved"; outboxMessageId: string }
+	| { outcome: "failed"; error: unknown };
+
 interface DraftData {
 	accountId: string;
 	toAddresses: string[];
@@ -25,6 +29,12 @@ interface UseSaveDraftOptions {
 	onDraftCreated: (id: string) => void;
 }
 
+const settled = (promise: Promise<unknown>): Promise<void> =>
+	promise.then(
+		() => undefined,
+		() => undefined,
+	);
+
 export const useSaveDraft = ({
 	outboxMessageId,
 	onDraftCreated,
@@ -35,6 +45,17 @@ export const useSaveDraft = ({
 	const closedIdsRef = useRef<Set<string>>(new Set());
 	const queryClient = useQueryClient();
 
+	// The entry a save writes to. That is the prop, except between a save
+	// creating the draft and the id arriving back as the prop — reading the prop
+	// in that window creates the same draft a second time and strands one of the
+	// two in the outbox.
+	const propIdRef = useRef(outboxMessageId);
+	const targetIdRef = useRef(outboxMessageId);
+	if (propIdRef.current !== outboxMessageId) {
+		propIdRef.current = outboxMessageId;
+		targetIdRef.current = outboxMessageId;
+	}
+
 	const createMutation = useMutation(
 		outboxOperationsCreateOutboxMessageMutation(),
 	);
@@ -47,9 +68,10 @@ export const useSaveDraft = ({
 			setSaveStatus("saving");
 			setSaveError(null);
 
-			if (outboxMessageId) {
+			const targetId = targetIdRef.current;
+			if (targetId) {
 				const result = await updateMutation.mutateAsync({
-					path: { outboxMessageId },
+					path: { outboxMessageId: targetId },
 					body: {
 						toAddresses: data.toAddresses,
 						ccAddresses: data.ccAddresses,
@@ -71,6 +93,7 @@ export const useSaveDraft = ({
 					sendImmediately: false,
 				},
 			});
+			targetIdRef.current = result.outboxMessageId;
 			onDraftCreated(result.outboxMessageId);
 			setSaveStatus("saved");
 			queryClient.invalidateQueries({
@@ -78,38 +101,60 @@ export const useSaveDraft = ({
 			});
 			return result;
 		},
-		[
-			outboxMessageId,
-			createMutation,
-			updateMutation,
-			onDraftCreated,
-			queryClient,
-		],
+		[createMutation, updateMutation, onDraftCreated, queryClient],
+	);
+
+	// One entry takes one write at a time. Overlapping writes settle in whatever
+	// order the network gives them, so an older body can land last — and two of
+	// them racing while the draft has no id yet each create one.
+	const writesRef = useRef<Promise<void>>(Promise.resolve());
+	const enqueueSave = useCallback(
+		(data: DraftData) => {
+			const write = writesRef.current.then(() => executeSave(data));
+			writesRef.current = settled(write);
+			return write;
+		},
+		[executeSave],
 	);
 
 	const saveDraft = useCallback(
 		(data: DraftData) => {
-			if (outboxMessageId && closedIdsRef.current.has(outboxMessageId)) return;
 			if (timerRef.current) clearTimeout(timerRef.current);
 			timerRef.current = setTimeout(() => {
+				const targetId = targetIdRef.current;
+				if (targetId && closedIdsRef.current.has(targetId)) return;
 				// Keep the real error, not just a vague "error" status — the caller
 				// surfaces its detail in a banner. A fatal 5xx additionally escalates
 				// through the global MutationCache.onError sink.
-				executeSave(data).catch((error: unknown) => {
+				enqueueSave(data).catch((error: unknown) => {
 					setSaveError(error);
 					setSaveStatus("error");
 				});
 			}, 2000);
 		},
-		[executeSave, outboxMessageId],
+		[enqueueSave],
 	);
 
+	// Whoever asks for this is acting on the draft right now and owns the
+	// outcome, so the failure is returned rather than thrown and `saveError` is
+	// left alone — the caller's own message is the accurate one, and setting
+	// `saveError` would raise a second "Couldn't save draft" banner beside it.
 	const saveImmediately = useCallback(
-		(data: DraftData) => {
+		(data: DraftData): Promise<ImmediateSave> => {
 			if (timerRef.current) clearTimeout(timerRef.current);
-			return executeSave(data);
+			return enqueueSave(data)
+				.then(
+					(result): ImmediateSave => ({
+						outcome: "saved",
+						outboxMessageId: result.outboxMessageId,
+					}),
+				)
+				.catch((error: unknown): ImmediateSave => {
+					setSaveStatus("error");
+					return { outcome: "failed", error };
+				});
 		},
-		[executeSave],
+		[enqueueSave],
 	);
 
 	// Called with an id, the entry is closed to autosave for good. Sending and

package/src/components/compose/PlateEditor.tsx

@@ -1,86 +0,0 @@
-import { AutoformatPlugin } from "@platejs/autoformat";
-import {
-	BlockquotePlugin,
-	BoldPlugin,
-	ItalicPlugin,
-} from "@platejs/basic-nodes/react";
-import { LinkPlugin } from "@platejs/link/react";
-import type { Value } from "platejs";
-import { PlateContent, usePlateEditor } from "platejs/react";
-import { useEffect } from "react";
-
-export interface PlateEditorProps {
-	initialValue?: Value;
-	onChange?: (value: Value) => void;
-	onSubmit?: () => void;
-	autoFocus?: boolean;
-}
-
-const EMPTY_VALUE: Value = [{ type: "p", children: [{ text: "" }] }];
-
-export const COMPOSE_PLUGINS = [
-	BoldPlugin,
-	ItalicPlugin,
-	LinkPlugin,
-	BlockquotePlugin,
-	AutoformatPlugin.configure({
-		options: {
-			rules: [
-				{
-					match: "**",
-					mode: "mark" as const,
-					type: "bold",
-				},
-				{
-					match: "*",
-					mode: "mark" as const,
-					type: "italic",
-				},
-				{
-					match: "> ",
-					mode: "block" as const,
-					type: "blockquote",
-				},
-			],
-			enableUndoOnDelete: true,
-		},
-	}),
-];
-
-export const usePlateComposeEditor = (initialValue?: Value) =>
-	usePlateEditor({
-		plugins: COMPOSE_PLUGINS,
-		value: initialValue ?? EMPTY_VALUE,
-	});
-
-export const PlateEditorContent = ({
-	onSubmit,
-	autoFocus,
-	editor,
-}: Omit<PlateEditorProps, "initialValue" | "onChange"> & {
-	editor: ReturnType<typeof usePlateComposeEditor>;
-}) => {
-	useEffect(() => {
-		if (autoFocus) {
-			const timer = setTimeout(() => {
-				editor.tf.focus();
-			}, 0);
-			return () => clearTimeout(timer);
-		}
-	}, [autoFocus, editor]);
-
-	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && onSubmit) {
-			e.preventDefault();
-			onSubmit();
-		}
-	};
-
-	return (
-		<PlateContent
-			className="w-full px-3 py-2 bg-canvas text-sm outline-none min-h-[120px] [&_blockquote]:pl-3 [&_blockquote]:border-l-2 [&_blockquote]:border-fg-subtle/30 [&_blockquote]:text-fg-muted [&_a]:text-accent [&_a]:underline"
-			placeholder="Write your message..."
-			onKeyDown={handleKeyDown}
-		/>
-	);
-};

package/src/components/compose/PlateToolbar.tsx

@@ -1,110 +0,0 @@
-import {
-	BlockquotePlugin,
-	BoldPlugin,
-	ItalicPlugin,
-} from "@platejs/basic-nodes/react";
-import { insertLink } from "@platejs/link";
-import { Bold, Italic, Link, Quote, Redo2, Undo2 } from "lucide-react";
-import { useEditorRef, useEditorSelector } from "platejs/react";
-
-const ToolbarButton = ({
-	isActive,
-	onClick,
-	children,
-	title,
-}: {
-	isActive: boolean;
-	onClick: () => void;
-	children: React.ReactNode;
-	title: string;
-}) => (
-	<button
-		type="button"
-		onMouseDown={(e) => {
-			e.preventDefault();
-			onClick();
-		}}
-		title={title}
-		className={`p-1.5 rounded transition-colors ${
-			isActive
-				? "text-fg bg-accent-2-soft"
-				: "text-fg-muted hover:text-fg hover:bg-surface-raised"
-		}`}
-	>
-		{children}
-	</button>
-);
-
-export const PlateToolbar = () => {
-	const editor = useEditorRef();
-
-	const isBoldActive = useEditorSelector(
-		(editor) => !!editor.api.mark(BoldPlugin.key),
-		[],
-	);
-	const isItalicActive = useEditorSelector(
-		(editor) => !!editor.api.mark(ItalicPlugin.key),
-		[],
-	);
-	const isBlockquoteActive = useEditorSelector((editor) => {
-		const entry = editor.api.block();
-		return entry ? entry[0].type === BlockquotePlugin.key : false;
-	}, []);
-
-	const canUndo = useEditorSelector(
-		(editor) => editor.history.undos.length > 0,
-		[],
-	);
-	const canRedo = useEditorSelector(
-		(editor) => editor.history.redos.length > 0,
-		[],
-	);
-
-	return (
-		<div className="flex items-center gap-0.5 px-3 py-1 border-b border-line">
-			<ToolbarButton
-				isActive={isBoldActive}
-				onClick={() => editor.tf.toggleMark(BoldPlugin.key)}
-				title="Bold (Ctrl+B)"
-			>
-				<Bold className="size-4" />
-			</ToolbarButton>
-			<ToolbarButton
-				isActive={isItalicActive}
-				onClick={() => editor.tf.toggleMark(ItalicPlugin.key)}
-				title="Italic (Ctrl+I)"
-			>
-				<Italic className="size-4" />
-			</ToolbarButton>
-			<ToolbarButton
-				isActive={false}
-				onClick={() => insertLink(editor, { url: "" })}
-				title="Link (Ctrl+K)"
-			>
-				<Link className="size-4" />
-			</ToolbarButton>
-			<ToolbarButton
-				isActive={isBlockquoteActive}
-				onClick={() => editor.tf.toggleBlock(BlockquotePlugin.key)}
-				title="Blockquote"
-			>
-				<Quote className="size-4" />
-			</ToolbarButton>
-			<div className="mx-1.5 h-4 w-px bg-line" />
-			<ToolbarButton
-				isActive={false}
-				onClick={() => editor.undo()}
-				title="Undo (Ctrl+Z)"
-			>
-				<Undo2 className={`size-4 ${!canUndo ? "opacity-40" : ""}`} />
-			</ToolbarButton>
-			<ToolbarButton
-				isActive={false}
-				onClick={() => editor.redo()}
-				title="Redo (Ctrl+Y)"
-			>
-				<Redo2 className={`size-4 ${!canRedo ? "opacity-40" : ""}`} />
-			</ToolbarButton>
-		</div>
-	);
-};

package/src/components/compose/sanitize-quote-html.ts

@@ -1,47 +0,0 @@
-import DOMPurify from "dompurify";
-
-const QUOTE_ALLOWED_TAGS = [
-	"p",
-	"br",
-	"strong",
-	"b",
-	"em",
-	"i",
-	"a",
-	"blockquote",
-	"ul",
-	"ol",
-	"li",
-];
-
-const QUOTE_ALLOWED_ATTR = ["href"];
-
-/**
- * Quoted mail renders in the app's own document rather than in the reading
- * pane's sandboxed frame, so a link in it would otherwise navigate the app
- * window itself to wherever the sender points. Launched from a home screen
- * there is no address bar and no back button to return from that, so quoted
- * links leave for a separate context and take no handle on this one with them.
- *
- * Its own DOMPurify instance: the hook below must not reach the default
- * instance any other caller might use.
- */
-let purifier: ReturnType<typeof DOMPurify> | null = null;
-
-const quotePurifier = (): ReturnType<typeof DOMPurify> => {
-	if (purifier) return purifier;
-	const instance = DOMPurify();
-	instance.addHook("afterSanitizeAttributes", (node) => {
-		if (node.tagName !== "A") return;
-		node.setAttribute("target", "_blank");
-		node.setAttribute("rel", "noopener noreferrer nofollow");
-	});
-	purifier = instance;
-	return instance;
-};
-
-export const sanitizeQuoteHtml = (html: string): string =>
-	quotePurifier().sanitize(html, {
-		ALLOWED_TAGS: QUOTE_ALLOWED_TAGS,
-		ALLOWED_ATTR: QUOTE_ALLOWED_ATTR,
-	});

package/src/lib/plate-serializer.ts

@@ -1,52 +0,0 @@
-import type { TElement, TText, Value } from "platejs";
-
-type PlateNode = TElement | TText;
-
-const isText = (node: PlateNode): node is TText =>
-	"text" in node && !("children" in node);
-
-const escapeHtml = (text: string): string =>
-	text
-		.replace(/&/g, "&")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;")
-		.replace(/"/g, "&quot;");
-
-const serializeTextNode = (node: TText): string => {
-	let html = escapeHtml(node.text);
-	if (node.bold) html = `<strong>${html}</strong>`;
-	if (node.italic) html = `<em>${html}</em>`;
-	return html;
-};
-
-const serializeElement = (node: TElement): string => {
-	const children = node.children
-		.map((child) =>
-			isText(child as PlateNode)
-				? serializeTextNode(child as TText)
-				: serializeElement(child as TElement),
-		)
-		.join("");
-
-	switch (node.type) {
-		case "blockquote":
-			return `<blockquote>${children}</blockquote>`;
-		case "a": {
-			const url = (node as TElement & { url?: string }).url ?? "";
-			return `<a href="${escapeHtml(url)}">${children}</a>`;
-		}
-		default:
-			return `<p>${children}</p>`;
-	}
-};
-
-export const plateValueToHtml = (value: Value): string =>
-	value.map(serializeElement).join("");
-
-const extractText = (node: PlateNode): string => {
-	if (isText(node)) return node.text;
-	return (node.children as PlateNode[]).map(extractText).join("");
-};
-
-export const plateValueToText = (value: Value): string =>
-	value.map(extractText).join("\n");