@remit/ui 0.0.8 → 0.0.9

package/package.json

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

package/src/components/isolated-email-frame.keys.test.ts

@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { isForwardableKey } from "./isolated-email-frame.js";
+
+describe("isForwardableKey", () => {
+	it("forwards the keys that move around the app", () => {
+		for (const key of [
+			"j",
+			"k",
+			"g",
+			"x",
+			"r",
+			"#",
+			"Enter",
+			"Escape",
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End",
+		]) {
+			assert.equal(isForwardableKey(key), true, key);
+		}
+	});
+
+	it("keeps destructive keys inside the message body", () => {
+		// The replayed event carries no focused control, so the app routes what it
+		// recognises straight at the message list. Backspace while reading must not
+		// become a delete of the row behind the reader.
+		assert.equal(isForwardableKey("Backspace"), false);
+		assert.equal(isForwardableKey("Delete"), false);
+	});
+
+	it("keeps Space inside the message body", () => {
+		// Space belongs to reading the email, not to selecting rows behind it.
+		assert.equal(isForwardableKey(" "), false);
+	});
+
+	it("does not forward unknown named keys", () => {
+		assert.equal(isForwardableKey("F5"), false);
+		assert.equal(isForwardableKey("Tab"), false);
+		assert.equal(isForwardableKey("PageDown"), false);
+	});
+});

package/src/components/isolated-email-frame.tsx

@@ -104,6 +104,61 @@ const useMatchMedia = (query: string): boolean => {
 	return matches;
 };
 
+/** Named (non-character) keys worth replaying: moving around and closing. */
+const FORWARDED_NAMED_KEYS = new Set([
+	"Enter",
+	"Escape",
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+]);
+
+/**
+ * Which keystrokes leave the frame. An allowlist rather than a denylist: the
+ * replayed event's target is the host window, so the app's keyboard layer sees
+ * no focused control and routes everything it recognises to the message list.
+ * Forwarding indiscriminately would therefore let Backspace pressed while
+ * reading delete the message under the cursor, and Space select it.
+ *
+ * Single characters (letters, digits, punctuation) carry the app's navigation
+ * and verb bindings and are safe to replay. Space is excluded: it belongs to
+ * reading the email, not to selecting rows behind it.
+ */
+export const isForwardableKey = (key: string): boolean => {
+	if (key === " ") return false;
+	if (key.length === 1) return true;
+	return FORWARDED_NAMED_KEYS.has(key);
+};
+
+/**
+ * Keydown events raised inside an iframe never reach the embedding window, so
+ * once the reader clicks into the message body every app shortcut goes dead —
+ * j/k, arrows, Esc, the lot (#43). Replay the allowlisted keystrokes on the host
+ * window so the app's one keyboard layer keeps hearing them. The replay is a
+ * copy: the original event is untouched, so selecting and scrolling inside the
+ * email still behave normally. Modifier combos stay with the frame and the
+ * browser.
+ */
+const forwardKeyDown = (event: KeyboardEvent) => {
+	if (event.metaKey || event.ctrlKey || event.altKey) return;
+	if (!isForwardableKey(event.key)) return;
+	const doc = (event.currentTarget ?? event.target) as Document | null;
+	const host = doc?.defaultView?.parent;
+	if (!host || host === doc?.defaultView) return;
+	host.dispatchEvent(
+		new KeyboardEvent("keydown", {
+			key: event.key,
+			code: event.code,
+			shiftKey: event.shiftKey,
+			bubbles: true,
+			cancelable: true,
+		}),
+	);
+};
+
 /**
  * Render untrusted (sanitized) email HTML in a sandboxed iframe that fits the
  * viewport width on mobile and isolates the email's CSS from the app chrome.
@@ -175,6 +230,7 @@ export const IsolatedEmailFrame = ({
 		};
 
 		let observer: ResizeObserver | undefined;
+		let keyDoc: Document | undefined;
 		const handleLoad = () => {
 			measure();
 			const doc = iframe.contentDocument;
@@ -182,11 +238,14 @@ export const IsolatedEmailFrame = ({
 			observer = new ResizeObserver(measure);
 			observer.observe(doc.body);
 			if (doc.documentElement) observer.observe(doc.documentElement);
+			doc.addEventListener("keydown", forwardKeyDown);
+			keyDoc = doc;
 		};
 
 		iframe.addEventListener("load", handleLoad);
 		return () => {
 			iframe.removeEventListener("load", handleLoad);
+			keyDoc?.removeEventListener("keydown", forwardKeyDown);
 			observer?.disconnect();
 		};
 	}, []);