@remit/ui 0.0.119 → 0.0.121

package/src/components/rich-text-spellcheck-engine.ts

@@ -0,0 +1,267 @@
+/**
+ * Hunspell, over the WebAssembly build in `docker/hunspell/`. The engine
+ * and the two dictionary files are fetched, never bundled: a language costs
+ * nothing until someone writes in it, and the bytes are reported as they arrive
+ * because the first Dutch download is fourteen seconds on a bad link and a
+ * composer that says nothing for fourteen seconds looks broken.
+ *
+ * Dictionaries are handed to Hunspell as paths, so the two files go into the
+ * module's own in-memory filesystem exactly as downloaded. Nothing rewrites
+ * them — the served bytes are the upstream source, which is what keeps every
+ * dictionary licence at its verbatim-redistribution minimum.
+ */
+
+export interface SpellEngine {
+	spell(word: string): boolean;
+	suggest(word: string): readonly string[];
+	add(word: string): void;
+	close(): void;
+}
+
+export interface DownloadProgress {
+	readonly bytesLoaded: number;
+	readonly bytesTotal: number;
+}
+
+export interface EngineFailure {
+	readonly ok: false;
+	/** Never arrived, or arrived and was rejected — different remedies. */
+	readonly reason: "download" | "engine";
+	readonly detail: string;
+}
+
+/**
+ * Opening is two designed failures and a success, so it answers with which one
+ * rather than throwing: what the composer puts in front of the writer, and what
+ * the report link carries, is this string.
+ */
+export type EngineResult =
+	| { readonly ok: true; readonly engine: SpellEngine }
+	| EngineFailure;
+
+type Attempt<T> = { readonly ok: true; readonly value: T } | EngineFailure;
+
+interface HunspellModule {
+	readonly FS: { writeFile(path: string, data: Uint8Array): void };
+	_free(pointer: number): void;
+	_remit_open(affPath: number, dicPath: number): number;
+	_remit_close(handle: number): void;
+	_remit_spell(handle: number, word: number): number;
+	_remit_add(handle: number, word: number): number;
+	_remit_suggest(handle: number, word: number): number;
+	stringToNewUTF8(text: string): number;
+	UTF8ToString(pointer: number): string;
+}
+
+interface HunspellOptions {
+	instantiateWasm(
+		imports: WebAssembly.Imports,
+		ready: (instance: WebAssembly.Instance, module: WebAssembly.Module) => void,
+	): Record<string, never>;
+}
+
+type HunspellFactory = (options: HunspellOptions) => Promise<HunspellModule>;
+
+const isFactory = (value: unknown): value is { default: HunspellFactory } =>
+	typeof value === "object" &&
+	value !== null &&
+	typeof (value as { default?: unknown }).default === "function";
+
+export interface EngineAssets {
+	/** The Emscripten loader, as an ES module with the factory as its default. */
+	loadFactory(url: string): Promise<unknown>;
+	fetch(url: string): Promise<Response>;
+}
+
+const browserAssets: EngineAssets = {
+	loadFactory: (url) => import(/* @vite-ignore */ url),
+	fetch: (url) => fetch(url),
+};
+
+const failure = (
+	reason: "download" | "engine",
+	detail: string,
+): EngineFailure => ({ ok: false, reason, detail });
+
+const said = (error: unknown): string =>
+	error instanceof Error ? error.message : String(error);
+
+const attempt = <T>(
+	work: Promise<T>,
+	reason: "download" | "engine",
+	describe: (message: string) => string,
+): Promise<Attempt<T>> =>
+	work.then(
+		(value) => ({ ok: true as const, value }),
+		(error: unknown) => failure(reason, describe(said(error))),
+	);
+
+/**
+ * A failure a person can act on: the file, the status, and nothing about
+ * promises.
+ */
+const download = async (
+	assets: EngineAssets,
+	url: string,
+): Promise<Attempt<Response>> => {
+	const fetched = await attempt(
+		assets.fetch(url),
+		"download",
+		(message) => `${url} could not be reached: ${message}`,
+	);
+	if (!fetched.ok) return fetched;
+	if (!fetched.value.ok) {
+		return failure("download", `${url} answered ${fetched.value.status}`);
+	}
+	return fetched;
+};
+
+const readBody = async (
+	response: Response,
+	counted: (added: number) => void,
+): Promise<Uint8Array<ArrayBuffer>> => {
+	const body = response.body;
+	if (!body) {
+		const whole = new Uint8Array(await response.arrayBuffer());
+		counted(whole.byteLength);
+		return whole;
+	}
+	const reader = body.getReader();
+	const chunks: Uint8Array[] = [];
+	let size = 0;
+	for (;;) {
+		const step = await reader.read();
+		if (step.done) break;
+		chunks.push(step.value);
+		size += step.value.byteLength;
+		counted(step.value.byteLength);
+	}
+	const whole = new Uint8Array(size);
+	let at = 0;
+	for (const chunk of chunks) {
+		whole.set(chunk, at);
+		at += chunk.byteLength;
+	}
+	return whole;
+};
+
+export interface EngineRequest {
+	/** Where `hunspell.mjs`, `hunspell.wasm` and `dictionaries/` are served. */
+	readonly base: string;
+	/** The tag the build staged, which is not always the tag the writer picked. */
+	readonly tag: string;
+	/**
+	 * What the build says these files weigh. `content-length` is the wrong
+	 * number: the files are served brotli-compressed and counted here
+	 * decompressed, so believing the header names a size a quarter of the truth
+	 * and then walks past it while the writer watches.
+	 */
+	readonly bytesExpected: number;
+	onProgress(progress: DownloadProgress): void;
+	assets?: EngineAssets;
+}
+
+export const openEngine = async ({
+	base,
+	tag,
+	bytesExpected,
+	onProgress,
+	assets = browserAssets,
+}: EngineRequest): Promise<EngineResult> => {
+	const dictionary = `${base}dictionaries/${tag}`;
+	const answers = await Promise.all([
+		download(assets, `${base}hunspell.wasm`),
+		download(assets, `${dictionary}/index.aff`),
+		download(assets, `${dictionary}/index.dic`),
+	]);
+	for (const answer of answers) if (!answer.ok) return answer;
+	const responses = answers
+		.filter((answer) => answer.ok)
+		.map((answer) => answer.value);
+
+	let bytesLoaded = 0;
+	const report = (added: number): void => {
+		bytesLoaded += added;
+		onProgress({
+			bytesLoaded,
+			bytesTotal: Math.max(bytesExpected, bytesLoaded),
+		});
+	};
+	report(0);
+
+	const [wasm, aff, dic] = await Promise.all(
+		responses.map((response) => readBody(response, report)),
+	);
+
+	const loaded = await attempt(
+		assets.loadFactory(`${base}hunspell.mjs`),
+		"download",
+		(message) => `${base}hunspell.mjs could not be loaded: ${message}`,
+	);
+	if (!loaded.ok) return loaded;
+	if (!isFactory(loaded.value)) {
+		return failure("engine", `${base}hunspell.mjs exports no engine`);
+	}
+
+	const started = await attempt(
+		loaded.value.default({
+			instantiateWasm: (imports, ready) => {
+				WebAssembly.instantiate(wasm, imports).then((built) => {
+					ready(built.instance, built.module);
+				});
+				return {};
+			},
+		}),
+		"engine",
+		(message) => `the engine did not start: ${message}`,
+	);
+	if (!started.ok) return started;
+	const engine = started.value;
+
+	engine.FS.writeFile("/index.aff", aff);
+	engine.FS.writeFile("/index.dic", dic);
+	const affPath = engine.stringToNewUTF8("/index.aff");
+	const dicPath = engine.stringToNewUTF8("/index.dic");
+	const handle = engine._remit_open(affPath, dicPath);
+	engine._free(affPath);
+	engine._free(dicPath);
+	if (handle === 0) {
+		return failure("engine", `the ${tag} dictionary did not load`);
+	}
+
+	const withWord = <T>(word: string, use: (pointer: number) => T): T => {
+		const pointer = engine.stringToNewUTF8(word);
+		try {
+			return use(pointer);
+		} finally {
+			engine._free(pointer);
+		}
+	};
+
+	let open = true;
+	return {
+		ok: true,
+		engine: {
+			spell: (word) =>
+				open && withWord(word, (at) => engine._remit_spell(handle, at) !== 0),
+			suggest: (word) => {
+				if (!open) return [];
+				const answer = withWord(word, (at) =>
+					engine._remit_suggest(handle, at),
+				);
+				if (answer === 0) return [];
+				const joined = engine.UTF8ToString(answer);
+				engine._free(answer);
+				return joined === "" ? [] : joined.split("\n");
+			},
+			add: (word) => {
+				if (open) withWord(word, (at) => engine._remit_add(handle, at));
+			},
+			close: () => {
+				if (!open) return;
+				open = false;
+				engine._remit_close(handle);
+			},
+		},
+	};
+};

package/src/components/rich-text-spellcheck-languages.ts

@@ -0,0 +1,62 @@
+/**
+ * What this build carries, and where it serves it from. Both are decided by
+ * `REMIT_SPELLCHECK_LANGUAGES` at build time and written in by the web client's
+ * spellcheck plugin, which stages exactly the same set — so there is no second
+ * list to fall out of step with the files on disk.
+ *
+ * A build that stages nothing leaves both undefined, and every language is
+ * `unavailable`: no worker starts, and the browser keeps checking.
+ */
+
+declare const __REMIT_SPELLCHECK_LANGUAGES__: readonly string[];
+declare const __REMIT_SPELLCHECK_BASE__: string;
+declare const __REMIT_SPELLCHECK_BYTES__: Readonly<Record<string, number>>;
+
+export const spellcheckLanguages = (): readonly string[] =>
+	typeof __REMIT_SPELLCHECK_LANGUAGES__ === "undefined"
+		? []
+		: __REMIT_SPELLCHECK_LANGUAGES__;
+
+/**
+ * Absolute, and resolved here rather than baked in: a Storybook build is
+ * published under a path it cannot know at build time, so what the plugin
+ * writes in is relative and the document says where it lands. The app's own
+ * base is already absolute and survives the same resolution unchanged.
+ */
+export const spellcheckBase = (): string => {
+	const staged =
+		typeof __REMIT_SPELLCHECK_BASE__ === "undefined" ||
+		__REMIT_SPELLCHECK_BASE__ === ""
+			? "/spellcheck/"
+			: __REMIT_SPELLCHECK_BASE__;
+	if (typeof document === "undefined") return staged;
+	return new URL(staged, document.baseURI).href;
+};
+
+/**
+ * What opening a language costs, counted by the build over the bytes it staged.
+ * `content-length` cannot answer this: the engine and the dictionaries are
+ * served brotli-compressed, so the header is the compressed length while what
+ * arrives — and what the composer counts — is the decompressed file.
+ */
+export const spellcheckBytes = (tag: string): number =>
+	typeof __REMIT_SPELLCHECK_BYTES__ === "undefined"
+		? 0
+		: (__REMIT_SPELLCHECK_BYTES__[tag] ?? 0);
+
+/**
+ * The staged dictionary that answers for a tag. `en-GB` takes the British one
+ * where the build carries it and the American one where it does not, because
+ * being checked against the wrong English is a long way better than not being
+ * checked at all.
+ */
+export const dictionaryTagFor = (
+	language: string,
+	built: readonly string[] = spellcheckLanguages(),
+): string | null => {
+	const wanted = language.toLowerCase();
+	const exact = built.find((tag) => tag.toLowerCase() === wanted);
+	if (exact) return exact;
+	const base = wanted.split("-")[0];
+	return built.find((tag) => tag.toLowerCase().split("-")[0] === base) ?? null;
+};

package/src/components/rich-text-spellcheck-menu.test.ts

@@ -27,10 +27,10 @@ import type {
 	SuggestRequest,
 } from "./rich-text-spellcheck.js";
 import {
-	dictionaryFor,
-	findMisspellings,
-	suggestionsFor,
-} from "./rich-text-spellcheck-words.js";
+	stubKnows,
+	stubSuggestionsFor,
+} from "./rich-text-spellcheck-double.js";
+import { findMisspellings } from "./rich-text-spellcheck-words.js";
 
 const SENTENCE = "Ths report is redy today";
 const IDLE_MS = 400;
@@ -77,13 +77,12 @@ const stubSpellcheck = (
 ): Stub => {
 	const wordsAsked: SuggestRequest[] = [];
 	const held: (() => void)[] = [];
-	const words = dictionaryFor("en") ?? new Set<string>();
 
 	const answer = (request: CheckRequest): CheckResponse => ({
 		requestId: request.requestId,
 		revision: request.revision,
 		findings: request.spans.flatMap((span) =>
-			findMisspellings(span.text, words).map(
+			findMisspellings(span.text, stubKnows).map(
 				(range): Finding => ({
 					spanId: span.spanId,
 					start: range.start,
@@ -109,7 +108,7 @@ const stubSpellcheck = (
 			const settled = {
 				requestId: request.requestId,
 				word: request.word,
-				suggestions: suggestionsFor(request.word, words),
+				suggestions: stubSuggestionsFor(request.word),
 			};
 			if (!tune.holdSuggestions) return Promise.resolve(settled);
 			return new Promise((resolve) => {
@@ -177,6 +176,20 @@ const characters = (): Node => {
 	return leaf;
 };
 
+/**
+ * jsdom lays out nothing and moves no caret, so a selection Lexical set on its
+ * own — `select()`, or an edit that carries the caret with it — lives only in
+ * Lexical's own state. The next commit reconciles against the document's
+ * selection, finds none, and puts the anchor back at the start. Everything
+ * about a withheld mark is read off the caret at paint time, so a test that
+ * left the browser's selection behind is asserting on whichever landed first:
+ * the answer to the check, or the reconciliation that undoes the caret. The
+ * browser is the one that does this; here the test has to.
+ */
+const putCaret = (offset: number): void => {
+	dom.window.document.getSelection()?.setPosition(characters(), offset);
+};
+
 /**
  * The desktop popover portals to the document body, clear of whatever
  * ancestor would otherwise clip it, so the menu and its rows are found
@@ -217,7 +230,7 @@ const pressDownAt = async (
 	pointerType: string,
 	button = 0,
 ): Promise<void> => {
-	dom.window.document.getSelection()?.setPosition(characters(), offset);
+	putCaret(offset);
 	await act(async () => {
 		editable().dispatchEvent(
 			pointerEvent("pointerdown", pointerType, {
@@ -268,6 +281,7 @@ const caretAt = async (
 			text?.select(offset, offset);
 		});
 	});
+	putCaret(offset);
 };
 
 /** A key on the writing surface, whatever it turns out to do. */
@@ -745,6 +759,7 @@ describe("the correction menu", () => {
 				text?.spliceText(18, 0, "y", true);
 			});
 		});
+		putCaret(19);
 		await settle();
 
 		assert.equal(editable().textContent, "Ths report is redyy today");

package/src/components/rich-text-spellcheck-notice.tsx

@@ -0,0 +1,168 @@
+import { AlertCircle, Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { formatByteSize } from "../lib/attachment-file.js";
+import { languageLabel } from "../lib/compose-language.js";
+import type { ProviderStatus } from "./rich-text-spellcheck.js";
+
+/**
+ * How long a dictionary may download before the composer says so. A first Dutch
+ * download is 435 ms on a fast link and fourteen seconds on a bad one (#692),
+ * and a composer that says nothing for fourteen seconds reads as a composer
+ * with no opinion about spelling.
+ */
+export const SPELLCHECK_SLOW_MS = 5000;
+
+export const SPELLCHECK_ISSUE_URL =
+	"https://github.com/remit-mail/reader/issues/new";
+
+export const spellcheckReportUrl = (
+	language: string,
+	detail: string,
+): string => {
+	const title = `Spellcheck dictionary failed to load (${language})`;
+	const body = [
+		`Language: ${language}`,
+		`What happened: ${detail}`,
+		"",
+		"What I was doing:",
+	].join("\n");
+	return `${SPELLCHECK_ISSUE_URL}?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`;
+};
+
+export interface RichTextSpellcheckNoticeProps {
+	status: ProviderStatus;
+	/** The writer cancelled the download, so nothing is coming unless they ask. */
+	standDown: boolean;
+	onCancel: () => void;
+	onRetry: () => void;
+}
+
+const Row = ({
+	tone,
+	children,
+}: {
+	tone: "quiet" | "danger";
+	children: React.ReactNode;
+}) => (
+	<div
+		role="status"
+		data-testid="spellcheck-notice"
+		className={`flex items-start gap-2 border-t px-3 py-1.5 text-xs ${
+			tone === "danger"
+				? "border-danger/30 bg-danger-soft"
+				: "border-border bg-surface-sunken"
+		}`}
+	>
+		{children}
+	</div>
+);
+
+/**
+ * What the composer says while a dictionary is on its way, and when it never
+ * arrives. The browser's own checker is on the whole time either way, so this
+ * never claims spelling has stopped — only that ours has not started.
+ *
+ * Quiet for the first five seconds, because a fast link finishes inside half of
+ * one and a banner that flashes on every composer open is worse than no banner.
+ */
+export function RichTextSpellcheckNotice({
+	status,
+	standDown,
+	onCancel,
+	onRetry,
+}: RichTextSpellcheckNoticeProps) {
+	const [waited, setWaited] = useState(false);
+	const opening = status.state === "opening";
+
+	useEffect(() => {
+		if (!opening) {
+			setWaited(false);
+			return;
+		}
+		const timer = setTimeout(() => setWaited(true), SPELLCHECK_SLOW_MS);
+		return () => clearTimeout(timer);
+	}, [opening]);
+
+	if (standDown) {
+		return (
+			<Row tone="quiet">
+				<p className="min-w-0 flex-1 text-fg-muted">
+					{languageLabel(status.language)} spelling is left to the browser.
+				</p>
+				<button
+					type="button"
+					onClick={onRetry}
+					data-testid="spellcheck-retry"
+					className="shrink-0 font-medium text-accent hover:underline"
+				>
+					Download again
+				</button>
+			</Row>
+		);
+	}
+
+	if (status.state === "failed") {
+		return (
+			<Row tone="danger">
+				<AlertCircle
+					className="mt-0.5 size-3.5 shrink-0 text-danger"
+					aria-hidden
+				/>
+				<div className="min-w-0 flex-1">
+					<p className="font-medium text-danger">
+						The {languageLabel(status.language)} dictionary did not load.
+					</p>
+					<p className="mt-0.5 text-fg-muted" data-testid="spellcheck-detail">
+						{status.detail}. The browser is still checking your spelling.
+					</p>
+				</div>
+				<div className="flex shrink-0 items-center gap-3">
+					<button
+						type="button"
+						onClick={onRetry}
+						data-testid="spellcheck-retry"
+						className="font-medium text-accent hover:underline"
+					>
+						Try again
+					</button>
+					<a
+						href={spellcheckReportUrl(status.language, status.detail)}
+						target="_blank"
+						rel="noreferrer"
+						data-testid="spellcheck-report"
+						className="font-medium text-accent hover:underline"
+					>
+						Report this
+					</a>
+				</div>
+			</Row>
+		);
+	}
+
+	if (!opening || !waited) return null;
+
+	return (
+		<Row tone="quiet">
+			<Loader2
+				className="mt-0.5 size-3.5 shrink-0 animate-spin text-fg-subtle"
+				aria-hidden
+			/>
+			<p className="min-w-0 flex-1 text-fg-muted">
+				Downloading the {languageLabel(status.language)} dictionary
+				{status.bytesTotal > 0 ? ` (${formatByteSize(status.bytesTotal)})` : ""}
+				{"… "}
+				<span data-testid="spellcheck-progress">
+					{formatByteSize(status.bytesLoaded)} so far
+				</span>
+			</p>
+			<button
+				type="button"
+				onClick={onCancel}
+				data-testid="spellcheck-cancel"
+				className="shrink-0 font-medium text-accent hover:underline"
+			>
+				Cancel
+			</button>
+		</Row>
+	);
+}