@remit/ui 0.0.131 → 0.0.133

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.131",
+  "version": "0.0.133",
   "type": "module",
   "files": [
     "src"

package/src/components/compose-action-bar.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof ComposeActionBar> = {
 		onSend: fn(),
 		onBlocked: fn(),
 		onDiscard: fn(),
-		saveStatus: "idle",
+		save: { status: "idle" },
 	},
 };
 export default meta;
@@ -26,11 +26,35 @@ type Story = StoryObj<typeof ComposeActionBar>;
 
 export const Ready: Story = {};
 
-export const Saving: Story = { args: { saveStatus: "saving" } };
+export const Saving: Story = { args: { save: { status: "saving" } } };
 
-export const Saved: Story = { args: { saveStatus: "saved" } };
+export const Saved: Story = { args: { save: { status: "saved" } } };
 
-export const SaveFailed: Story = { args: { saveStatus: "error" } };
+export const SaveFailed: Story = { args: { save: { status: "error" } } };
+
+/**
+ * Nothing has been written to the server yet and nothing will be until the
+ * draft has a To address to be created against. Silence here was the worst of
+ * both: the text was not being kept, and the composer looked exactly like one
+ * that had nothing to keep. The sentence names To rather than "a recipient",
+ * which a message addressed only in Cc already has.
+ */
+export const NotSavedYet: Story = {
+	name: "Unsaved — the draft has no To address yet",
+	args: {
+		send: { status: "blocked", reason: "Add a To address before sending." },
+		save: {
+			status: "unsaved",
+			reason: "Not saved — add a To address to keep this draft.",
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByRole("status")).toHaveTextContent(
+			"Not saved — add a To address to keep this draft.",
+		);
+	},
+};
 
 export const Sending: Story = {
 	name: "Sending — also while the pending draft is written",
@@ -45,7 +69,7 @@ export const Sending: Story = {
 export const NoRecipient: Story = {
 	name: "Blocked — nobody to send to",
 	args: {
-		send: { status: "blocked", reason: "Add at least one recipient." },
+		send: { status: "blocked", reason: "Add a To address before sending." },
 	},
 	render: (args) => {
 		const [reason, setReason] = useState<string>();
@@ -74,7 +98,7 @@ export const NoRecipient: Story = {
 		const canvas = within(canvasElement);
 		await userEvent.click(canvas.getByRole("button", { name: "Send" }));
 		await expect(canvas.getByTestId("compose-unavailable")).toHaveTextContent(
-			"Add at least one recipient.",
+			"Add a To address before sending.",
 		);
 		await expect(args.onSend).not.toHaveBeenCalled();
 	},

package/src/components/compose-action-bar.tsx

@@ -1,7 +1,20 @@
 import { Loader2, Send, Trash2 } from "lucide-react";
 import { Button } from "./button.js";
 
-export type ComposeSaveStatus = "idle" | "saving" | "saved" | "error";
+/**
+ * What the draft is doing, and — when it is not being saved — the sentence that
+ * says why. Built the same way as `ComposeSendState` and for the same reason:
+ * a composer holding text it is not persisting must never be able to say so
+ * without saying what is missing. The bare "idle" this replaces rendered
+ * nothing at all, so a message that could not be saved yet looked identical to
+ * one that had nothing to save.
+ */
+export type ComposeSaveState =
+	| { status: "idle" }
+	| { status: "saving" }
+	| { status: "saved" }
+	| { status: "error" }
+	| { status: "unsaved"; reason: string };
 
 /**
  * Whether Send can act, and when it cannot, the sentence that says why.
@@ -22,20 +35,25 @@ export interface ComposeActionBarProps {
 	/** Called with the reason when Send is pressed while it cannot act. */
 	onBlocked: (reason: string) => void;
 	onDiscard: () => void;
-	saveStatus?: ComposeSaveStatus;
+	save?: ComposeSaveState;
 }
 
-const SaveStatusIndicator = ({ status }: { status: ComposeSaveStatus }) => {
-	if (status === "saving") {
+const SaveStateIndicator = ({ save }: { save: ComposeSaveState }) => {
+	if (save.status === "saving") {
 		return (
-			<span className="animate-pulse text-xs text-fg-muted">Saving...</span>
+			<output className="animate-pulse text-xs text-fg-muted">Saving...</output>
 		);
 	}
-	if (status === "saved") {
-		return <span className="text-xs text-fg-muted">Draft saved</span>;
+	if (save.status === "saved") {
+		return <output className="text-xs text-fg-muted">Draft saved</output>;
+	}
+	if (save.status === "error") {
+		return <output className="text-xs text-danger">Save failed</output>;
 	}
-	if (status === "error") {
-		return <span className="text-xs text-danger">Save failed</span>;
+	if (save.status === "unsaved") {
+		return (
+			<output className="truncate text-xs text-warning">{save.reason}</output>
+		);
 	}
 	return null;
 };
@@ -51,7 +69,7 @@ export function ComposeActionBar({
 	onSend,
 	onBlocked,
 	onDiscard,
-	saveStatus = "idle",
+	save = { status: "idle" },
 }: ComposeActionBarProps) {
 	const sending = send.status === "sending";
 	const blockedReason = send.status === "blocked" ? send.reason : undefined;
@@ -84,7 +102,7 @@ export function ComposeActionBar({
 				>
 					Send
 				</Button>
-				<SaveStatusIndicator status={saveStatus} />
+				<SaveStateIndicator save={save} />
 			</div>
 			<Button
 				variant="ghost"

package/src/components/editor-focus.ts

@@ -0,0 +1,78 @@
+/**
+ * Whether the reader is already typing somewhere else.
+ *
+ * Both writing surfaces open with the caret in the message, and both arrive on
+ * their own lazily-loaded chunk — so "on mount" is whenever that chunk lands.
+ * On a cold cache that is well after the composer opened and the reader moved
+ * on to the recipients, the subject or the search field, and claiming the caret
+ * then takes it out of a sentence in progress: the rest of what they type goes
+ * into the message body.
+ *
+ * Pressing a button to open the composer leaves focus on that button, which is
+ * not typing — so the ordinary open still lands the caret in the message.
+ */
+
+/**
+ * The types an `<input>` accepts prose in. Everything else it can be — a
+ * checkbox, a radio, a button, a file or colour picker — is a control the
+ * reader clicks, not one they are mid-word in.
+ */
+const TEXT_INPUT_TYPES = new Set([
+	"text",
+	"search",
+	"email",
+	"url",
+	"tel",
+	"password",
+	"number",
+	"date",
+	"datetime-local",
+	"month",
+	"time",
+	"week",
+]);
+
+/**
+ * Focus as the reader experiences it. `activeElement` stops at a shadow host,
+ * so a field inside a web component reports as the host; this walks in to the
+ * element actually holding the caret.
+ */
+const deepActiveElement = (scope: Document | ShadowRoot): Element | null => {
+	const active = scope.activeElement;
+	if (!active?.shadowRoot) return active;
+	return deepActiveElement(active.shadowRoot) ?? active;
+};
+
+/**
+ * Whether text goes into this element. Read off the tag and the `type`
+ * attribute rather than `instanceof`, which is per-realm and answers wrongly
+ * for anything reached through a frame.
+ */
+const takesTyping = (element: Element): boolean => {
+	const tag = element.tagName.toUpperCase();
+	// A focused frame is a document of its own — whatever is being typed in
+	// there is not ours to interrupt, and we cannot see it to ask.
+	if (tag === "IFRAME" || tag === "FRAME") return true;
+	if (tag === "TEXTAREA") return true;
+	// Typeahead: a reader part-way through selecting an option is choosing with
+	// the keyboard, and losing it drops them somewhere they did not pick.
+	if (tag === "SELECT") return true;
+	if (tag === "INPUT") {
+		const type = (element.getAttribute("type") ?? "text").toLowerCase();
+		return TEXT_INPUT_TYPES.has(type);
+	}
+	// The attribute as well as the property: `isContentEditable` is computed by
+	// the engine, and a document that never lays out does not answer for it.
+	const editable = element.getAttribute("contenteditable");
+	if (editable !== null && editable.toLowerCase() !== "false") return true;
+	return (element as Partial<HTMLElement>).isContentEditable === true;
+};
+
+export const isWritingElsewhere = (root: HTMLElement | null): boolean => {
+	const owner = root?.ownerDocument ?? globalThis.document;
+	if (!owner) return false;
+	const active = deepActiveElement(owner);
+	if (!active || active === root) return false;
+	if (root?.contains(active)) return false;
+	return takesTyping(active);
+};

package/src/components/plain-text-editor.mount.test.ts

@@ -147,6 +147,33 @@ describe("PlainTextEditor", () => {
 		assert.equal(textarea.selectionStart, textarea.value.length);
 	});
 
+	/**
+	 * The surface arrives in the same lazily-loaded chunk as the rich editor, so
+	 * its mount is whenever that chunk lands rather than when the composer
+	 * opened. Resuming a plain-text draft is the reachable path: the draft read
+	 * remounts the body once it resolves, by which time the reader may well be
+	 * typing in the search field.
+	 */
+	it("leaves the caret in a field the reader is typing in", async () => {
+		const elsewhere = document.createElement("input");
+		elsewhere.setAttribute("aria-label", "Search mail");
+		document.body.append(elsewhere);
+		elsewhere.focus();
+
+		await mount("", { initialCaret: "start" });
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 5));
+		});
+
+		const holder = document.activeElement?.getAttribute("aria-label");
+		elsewhere.remove();
+		assert.equal(
+			holder,
+			"Search mail",
+			`the caret ended up on ${holder ?? "nothing"}`,
+		);
+	});
+
 	it("sends on Cmd+Enter", async () => {
 		let sent = 0;
 		await mount("Ready to go.", {

package/src/components/plain-text-editor.tsx

@@ -8,6 +8,7 @@ import {
 	useState,
 } from "react";
 import { Banner } from "./banner.js";
+import { isWritingElsewhere } from "./editor-focus.js";
 import { htmlToMarkdown } from "./rich-text-document.js";
 import type { ComposeCaret } from "./rich-text-value.js";
 
@@ -95,6 +96,7 @@ export const PlainTextEditor = ({
 		const textarea = textareaRef.current;
 		if (!textarea) return;
 		const timer = setTimeout(() => {
+			if (isWritingElsewhere(textarea)) return;
 			textarea.focus();
 			const at = initialCaret === "start" ? 0 : textarea.value.length;
 			textarea.setSelectionRange(at, at);

package/src/components/rich-text-editor.mount.test.ts

@@ -118,3 +118,97 @@ describe("RichTextEditor", () => {
 		assert.equal(field.value, "https://");
 	});
 });
+
+/**
+ * The writing surface is loaded on its own chunk, so it mounts whenever that
+ * chunk arrives rather than when the composer opened. A reader who pressed
+ * Compose and started typing in the search field, the recipients or the subject
+ * is mid-sentence by then, and the caret is theirs.
+ */
+describe("RichTextEditor opening on a caret", () => {
+	const mount = async (): Promise<void> => {
+		await act(async () => {
+			root = createRoot(container);
+			root.render(createElement(RichTextEditor, { initialCaret: "start" }));
+		});
+		// The caret is claimed off a timer, so let it run.
+		await act(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 0));
+		});
+	};
+
+	it("takes the caret when nothing else holds it", async () => {
+		await mount();
+
+		const editable = container.querySelector<HTMLElement>(
+			"[data-testid=compose-body]",
+		);
+		assert.ok(editable, "the editable surface is mounted");
+		assert.equal(document.activeElement === editable, true);
+	});
+
+	/**
+	 * One case per kind of thing that can hold focus when the chunk lands. The
+	 * open is only allowed to lose to something the reader is typing in.
+	 */
+	const holders: readonly [string, () => HTMLElement, boolean][] = [
+		[
+			"a search field",
+			() => {
+				const field = document.createElement("input");
+				field.setAttribute("aria-label", "Search mail");
+				return field;
+			},
+			true,
+		],
+		[
+			"a subject field with no type attribute",
+			() => document.createElement("input"),
+			true,
+		],
+		["a plain textarea", () => document.createElement("textarea"), true],
+		[
+			"a select being typed through",
+			() => document.createElement("select"),
+			true,
+		],
+		[
+			"another contenteditable",
+			() => {
+				const surface = document.createElement("div");
+				surface.setAttribute("contenteditable", "true");
+				return surface;
+			},
+			true,
+		],
+		[
+			"the button that opened the composer",
+			() => document.createElement("button"),
+			false,
+		],
+		[
+			"a checkbox",
+			() => {
+				const box = document.createElement("input");
+				box.setAttribute("type", "checkbox");
+				return box;
+			},
+			false,
+		],
+	];
+
+	for (const [what, build, keepsIt] of holders) {
+		it(`${keepsIt ? "leaves the caret on" : "takes the caret from"} ${what}`, async () => {
+			const elsewhere = build();
+			elsewhere.setAttribute("data-holder", "");
+			document.body.append(elsewhere);
+			elsewhere.focus();
+
+			await mount();
+
+			const held = document.activeElement?.hasAttribute("data-holder") === true;
+			elsewhere.remove();
+			assert.equal(held, keepsIt);
+		});
+	}
+});

package/src/components/rich-text-editor.tsx

@@ -30,6 +30,7 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { isWritingElsewhere } from "./editor-focus.js";
 import { RichTextCorrectionMenu } from "./rich-text-correction-menu.js";
 import { $adoptHtml, $readRichText } from "./rich-text-document.js";
 import { RICH_TEXT_NODES, richTextTheme } from "./rich-text-nodes.js";
@@ -886,6 +887,7 @@ const AutoFocus = ({ caret }: { caret?: ComposeCaret }) => {
 		// the caret is placed here rather than left to `focus`, which would open a
 		// new message below the signature instead of above it.
 		const timer = setTimeout(() => {
+			if (isWritingElsewhere(editor.getRootElement())) return;
 			editor.update(
 				() => {
 					const root = $getRoot();

package/src/index.ts

@@ -166,7 +166,7 @@ export { Checkbox, type CheckboxProps } from "./components/checkbox.js";
 export {
 	ComposeActionBar,
 	type ComposeActionBarProps,
-	type ComposeSaveStatus,
+	type ComposeSaveState,
 	type ComposeSendState,
 } from "./components/compose-action-bar.js";
 export {