@remit/ui 0.0.132 → 0.0.134

package/package.json

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

package/src/components/confirm-dialog.stories.tsx

@@ -52,3 +52,31 @@ export const NonDestructive: Story = {
 		destructive: false,
 	},
 };
+
+/**
+ * Deleting mail that already sits in Trash expunges it on the server, so the
+ * dialog asks that question instead of "move to Trash?" — the wording follows
+ * the consequence, never the button that opened it (#845).
+ */
+export const PermanentDelete: Story = {
+	args: {
+		title: "Permanently delete 12 messages?",
+		description: "They are erased from the mail server and cannot be restored.",
+		confirmLabel: "Delete permanently",
+	},
+};
+
+/**
+ * The account's Trash appointment has not resolved yet, so which of the two
+ * dialogs above applies is not yet known. Rather than guess the reversible
+ * wording over what may be an expunge, the copy stays neutral and the confirm
+ * holds until the answer arrives.
+ */
+export const OutcomeUnknown: Story = {
+	args: {
+		title: "Delete 12 messages?",
+		description: "Checking where this account files deleted mail…",
+		confirmLabel: "Delete",
+		isBusy: true,
+	},
+};

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();