@remit/ui 0.0.113 → 0.0.115

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

@@ -4,7 +4,7 @@
  * ships inside the worker, over the same messages a real one exchanges.
  */
 import assert from "node:assert/strict";
-import { before, describe, it } from "node:test";
+import { before, describe, it, mock } from "node:test";
 import type {
 	ProviderStatus,
 	SpellWorkerRequest,
@@ -13,10 +13,12 @@ import type {
 import {
 	openSpellProvider,
 	type SpellWorkerPort,
+	SUGGEST_DEADLINE_MS,
 } from "./rich-text-spellcheck-provider.js";
 import {
 	dictionaryFor,
 	findMisspellings,
+	suggestionsFor,
 } from "./rich-text-spellcheck-words.js";
 
 interface WorkerScope {
@@ -84,6 +86,37 @@ describe("the stub dictionary", () => {
 			"a single letter is not a word to check",
 		);
 	});
+
+	it("offers the words a keystroke or two away, nearest first", () => {
+		const words = dictionaryFor("en");
+		assert.ok(words);
+		assert.deepEqual(suggestionsFor("redy", words), ["ready", "read", "very"]);
+		assert.deepEqual(
+			suggestionsFor("recieve", words),
+			["receive", "received"],
+			"a swapped pair of letters is one keystroke, not two",
+		);
+		assert.deepEqual(
+			suggestionsFor("Attachd", words),
+			["Attached"],
+			"a suggestion arrives dressed the way the word was written",
+		);
+		assert.equal(
+			suggestionsFor("Ths", words).length,
+			5,
+			"a short word has many neighbours, and the menu takes five",
+		);
+		assert.deepEqual(
+			suggestionsFor("qwertyuiop", words),
+			[],
+			"nothing near it is not the same as anything at all",
+		);
+		assert.deepEqual(
+			suggestionsFor("report", words),
+			[],
+			"a word it holds needs no correcting",
+		);
+	});
 });
 
 describe("a provider over a worker", () => {
@@ -145,6 +178,86 @@ describe("a provider over a worker", () => {
 		provider.close();
 	});
 
+	it("answers a correction menu one word at a time", async () => {
+		const provider = openSpellProvider("en", port);
+		const response = await provider.suggest({
+			requestId: "9",
+			language: "en",
+			word: "redy",
+		});
+
+		assert.equal(response.requestId, "9");
+		assert.equal(response.word, "redy");
+		assert.deepEqual(response.suggestions, ["ready", "read", "very"]);
+		provider.close();
+	});
+
+	it("tells a waiting menu when the worker stops answering", async () => {
+		let raise: ((detail: string) => void) | undefined;
+		const provider = openSpellProvider("en", {
+			...port,
+			post: () => {},
+			listen: () => {},
+			fail: (listener) => {
+				raise = listener;
+			},
+		});
+		const asking = provider.suggest({
+			requestId: "1",
+			language: "en",
+			word: "redy",
+		});
+		raise?.("worker exited");
+
+		await assert.rejects(asking, /worker exited/);
+		provider.close();
+	});
+
+	it("tells a waiting menu when the checker closes under it", async () => {
+		const provider = openSpellProvider("en", {
+			...port,
+			post: () => {},
+			listen: () => {},
+		});
+		const asking = provider.suggest({
+			requestId: "1",
+			language: "en",
+			word: "redy",
+		});
+
+		provider.close();
+
+		await assert.rejects(
+			asking,
+			/the checker closed/,
+			"a menu waiting on a provider that went away hears about it",
+		);
+	});
+
+	it("gives up on a worker that took the word and went quiet", async () => {
+		mock.timers.enable({ apis: ["setTimeout"] });
+		const provider = openSpellProvider("en", {
+			...port,
+			post: () => {},
+			listen: () => {},
+		});
+		const asking = provider.suggest({
+			requestId: "1",
+			language: "en",
+			word: "redy",
+		});
+
+		mock.timers.tick(SUGGEST_DEADLINE_MS);
+
+		await assert.rejects(
+			asking,
+			/no suggestions for "redy"/,
+			"skeleton rows that will never fill become the failure row instead",
+		);
+		mock.timers.reset();
+		provider.close();
+	});
+
 	it("says which language it has no words for", async () => {
 		const provider = openSpellProvider("de", port);
 		const response = await provider.check({

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

@@ -10,6 +10,7 @@ import type {
 	SpellProvider,
 	SpellWorkerRequest,
 	SpellWorkerResponse,
+	SuggestResponse,
 } from "./rich-text-spellcheck.js";
 
 export interface SpellWorkerPort {
@@ -19,14 +20,42 @@ export interface SpellWorkerPort {
 	terminate(): void;
 }
 
+/**
+ * How long a menu waits for its suggestions before it is told there are none
+ * coming. A worker that took the request and went quiet is indistinguishable
+ * from a slow one, and skeleton rows that never fill are the worst of both.
+ */
+export const SUGGEST_DEADLINE_MS = 5000;
+
 export const openSpellProvider = (
 	language: LanguageTag,
 	port: SpellWorkerPort,
 ): SpellProvider => {
 	const pending = new Map<string, (response: CheckResponse) => void>();
+	const asking = new Map<
+		string,
+		{ settle(response: SuggestResponse): void; abandon(reason: Error): void }
+	>();
 	const listeners = new Set<(status: ProviderStatus) => void>();
 	let status: ProviderStatus = { state: "opening", language };
 
+	/**
+	 * A check that never comes back costs a pass; a suggestion that never comes
+	 * back leaves a menu open in front of someone. The one is dropped, the other
+	 * is told.
+	 */
+	const abandonSuggestion = (requestId: string, detail: string): void => {
+		const request = asking.get(requestId);
+		if (!request) return;
+		asking.delete(requestId);
+		request.abandon(new Error(detail));
+	};
+
+	const abandonSuggestions = (detail: string): void => {
+		for (const requestId of [...asking.keys()])
+			abandonSuggestion(requestId, detail);
+	};
+
 	const publish = (next: ProviderStatus): void => {
 		status = next;
 		for (const listener of listeners) listener(next);
@@ -44,6 +73,18 @@ export const openSpellProvider = (
 				reason: message.reason,
 				detail: message.detail,
 			});
+			abandonSuggestions(message.detail);
+			return;
+		}
+		if (message.type === "suggested") {
+			const request = asking.get(message.requestId);
+			if (!request) return;
+			asking.delete(message.requestId);
+			request.settle({
+				requestId: message.requestId,
+				word: message.word,
+				suggestions: message.suggestions,
+			});
 			return;
 		}
 		const settle = pending.get(message.requestId);
@@ -55,9 +96,10 @@ export const openSpellProvider = (
 			findings: message.findings,
 		});
 	});
-	port.fail((detail) =>
-		publish({ state: "failed", language, reason: "worker", detail }),
-	);
+	port.fail((detail) => {
+		publish({ state: "failed", language, reason: "worker", detail });
+		abandonSuggestions(detail);
+	});
 	port.post({ type: "open", language });
 
 	return {
@@ -74,8 +116,31 @@ export const openSpellProvider = (
 				pending.set(request.requestId, resolve);
 				port.post({ type: "check", ...request });
 			}),
+		suggest: (request) =>
+			new Promise((resolve, reject) => {
+				const deadline = setTimeout(
+					() =>
+						abandonSuggestion(
+							request.requestId,
+							`no suggestions for "${request.word}" within ${SUGGEST_DEADLINE_MS}ms`,
+						),
+					SUGGEST_DEADLINE_MS,
+				);
+				asking.set(request.requestId, {
+					settle: (response) => {
+						clearTimeout(deadline);
+						resolve(response);
+					},
+					abandon: (reason) => {
+						clearTimeout(deadline);
+						reject(reason);
+					},
+				});
+				port.post({ type: "suggest", ...request });
+			}),
 		close: () => {
 			pending.clear();
+			abandonSuggestions("the checker closed");
 			listeners.clear();
 			port.terminate();
 		},

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

@@ -1,8 +1,8 @@
 /**
  * The placeholder a real dictionary replaces (#707): a word list small enough
- * to read, so the marks can be driven end to end before an engine exists. The
- * tokeniser is the part that stays — a provider is handed paragraph text and
- * decides for itself where the words are.
+ * to read, so the marks and the corrections can be driven end to end before an
+ * engine exists. The tokeniser is the part that stays — a provider is handed
+ * paragraph text and decides for itself where the words are.
  */
 import type { LanguageTag } from "./rich-text-spellcheck.js";
 
@@ -11,44 +11,75 @@ export interface WordRange {
 	readonly end: number;
 }
 
+/** What a correction menu shows, and what the engine is asked for. */
+export const SUGGESTION_LIMIT = 5;
+
 const ENGLISH: ReadonlySet<string> = new Set([
 	"a",
 	"about",
+	"address",
 	"after",
+	"afternoon",
 	"again",
+	"agenda",
 	"all",
+	"already",
 	"also",
+	"always",
 	"an",
 	"and",
+	"answer",
 	"any",
+	"apologies",
+	"approved",
 	"are",
 	"as",
 	"at",
+	"attached",
+	"available",
 	"be",
 	"because",
 	"been",
 	"before",
 	"both",
+	"budget",
 	"but",
 	"by",
+	"calendar",
+	"call",
 	"can",
+	"change",
+	"client",
+	"colleague",
 	"come",
+	"confirm",
 	"could",
+	"customer",
 	"day",
+	"deadline",
+	"decision",
+	"definitely",
+	"delivery",
 	"did",
 	"do",
+	"document",
 	"does",
 	"done",
 	"down",
 	"draft",
 	"each",
+	"email",
 	"end",
+	"environment",
 	"even",
 	"every",
 	"few",
+	"figures",
 	"find",
 	"first",
+	"follow",
 	"for",
+	"forward",
 	"friday",
 	"from",
 	"get",
@@ -69,6 +100,7 @@ const ENGLISH: ReadonlySet<string> = new Set([
 	"if",
 	"in",
 	"into",
+	"invoice",
 	"is",
 	"it",
 	"its",
@@ -86,12 +118,15 @@ const ENGLISH: ReadonlySet<string> = new Set([
 	"may",
 	"me",
 	"meeting",
+	"message",
 	"month",
 	"more",
+	"morning",
 	"most",
 	"much",
 	"must",
 	"my",
+	"necessary",
 	"need",
 	"new",
 	"next",
@@ -102,8 +137,10 @@ const ENGLISH: ReadonlySet<string> = new Set([
 	"now",
 	"number",
 	"numbers",
+	"occurred",
 	"of",
 	"off",
+	"office",
 	"on",
 	"once",
 	"one",
@@ -114,32 +151,52 @@ const ENGLISH: ReadonlySet<string> = new Set([
 	"out",
 	"over",
 	"own",
+	"page",
+	"payment",
 	"people",
 	"please",
+	"presentation",
+	"price",
+	"process",
+	"product",
+	"project",
 	"put",
 	"quarter",
+	"question",
 	"read",
 	"ready",
+	"receipt",
 	"receive",
+	"received",
+	"recommend",
+	"regards",
 	"report",
+	"review",
 	"right",
 	"same",
 	"say",
+	"schedule",
 	"see",
 	"send",
 	"sent",
+	"separate",
+	"service",
 	"she",
 	"should",
 	"show",
 	"since",
 	"so",
 	"some",
+	"sorry",
 	"still",
 	"such",
+	"summary",
+	"support",
 	"take",
 	"team",
 	"tell",
 	"than",
+	"thanks",
 	"that",
 	"the",
 	"their",
@@ -156,17 +213,22 @@ const ENGLISH: ReadonlySet<string> = new Set([
 	"time",
 	"to",
 	"today",
+	"together",
+	"tomorrow",
 	"too",
 	"two",
 	"up",
+	"update",
 	"us",
 	"use",
+	"version",
 	"very",
 	"want",
 	"was",
 	"way",
 	"we",
 	"week",
+	"welcome",
 	"well",
 	"were",
 	"what",
@@ -196,6 +258,14 @@ export const dictionaryFor = (
 ): ReadonlySet<string> | null =>
 	DICTIONARIES.get(language.toLowerCase().split("-")[0]) ?? null;
 
+/**
+ * The form a word is looked up and remembered under. The session's ignore list
+ * uses it too, so ignoring a word at the start of a sentence ignores it in the
+ * middle of the next one.
+ */
+export const normaliseWord = (word: string): string =>
+	word.toLowerCase().replace(/’/g, "'");
+
 export const findMisspellings = (
 	text: string,
 	words: ReadonlySet<string>,
@@ -205,10 +275,104 @@ export const findMisspellings = (
 	let match = pattern.exec(text);
 	while (match) {
 		const word = match[0];
-		if (word.length > 1 && !words.has(word.toLowerCase().replace(/’/g, "'"))) {
+		if (word.length > 1 && !words.has(normaliseWord(word))) {
 			found.push({ start: match.index, end: match.index + word.length });
 		}
 		match = pattern.exec(text);
 	}
 	return found;
 };
+
+const NEAR_ENOUGH = 2;
+
+/**
+ * Optimal string alignment: insertions, deletions, substitutions and the
+ * swapped pair of letters that is most of what a keyboard produces. Rows are
+ * abandoned once every cell in one is further away than a suggestion may be.
+ */
+const editDistance = (word: string, candidate: string): number => {
+	let twoBack: number[] = [];
+	let previous = Array.from({ length: candidate.length + 1 }, (_, at) => at);
+	for (let row = 1; row <= word.length; row += 1) {
+		const current = [row];
+		let best = row;
+		for (let column = 1; column <= candidate.length; column += 1) {
+			const cost = word[row - 1] === candidate[column - 1] ? 0 : 1;
+			let step = Math.min(
+				current[column - 1] + 1,
+				previous[column] + 1,
+				previous[column - 1] + cost,
+			);
+			if (
+				row > 1 &&
+				column > 1 &&
+				word[row - 1] === candidate[column - 2] &&
+				word[row - 2] === candidate[column - 1]
+			) {
+				step = Math.min(step, twoBack[column - 2] + 1);
+			}
+			current[column] = step;
+			if (step < best) best = step;
+		}
+		if (best > NEAR_ENOUGH) return NEAR_ENOUGH + 1;
+		twoBack = previous;
+		previous = current;
+	}
+	return previous[candidate.length];
+};
+
+const sharedPrefix = (word: string, candidate: string): number => {
+	let shared = 0;
+	while (
+		shared < word.length &&
+		shared < candidate.length &&
+		word[shared] === candidate[shared]
+	) {
+		shared += 1;
+	}
+	return shared;
+};
+
+/** A suggestion arrives dressed the way the word it replaces was written. */
+const wearingTheCaseOf = (word: string, suggestion: string): string => {
+	const upper = word.toUpperCase();
+	if (word === upper && word !== word.toLowerCase())
+		return suggestion.toUpperCase();
+	if (word[0] === upper[0] && word[0] !== word.toLowerCase()[0]) {
+		return suggestion[0].toUpperCase() + suggestion.slice(1);
+	}
+	return suggestion;
+};
+
+/**
+ * The corrections a word list can offer without an engine: everything within a
+ * couple of keystrokes, nearest first, and the one that starts the same way
+ * ahead of the one that does not.
+ */
+export const suggestionsFor = (
+	word: string,
+	words: ReadonlySet<string>,
+): readonly string[] => {
+	const target = normaliseWord(word);
+	if (target.length < 2 || words.has(target)) return [];
+	const ranked: { candidate: string; distance: number; prefix: number }[] = [];
+	for (const candidate of words) {
+		if (Math.abs(candidate.length - target.length) > NEAR_ENOUGH) continue;
+		const distance = editDistance(target, candidate);
+		if (distance > NEAR_ENOUGH) continue;
+		ranked.push({
+			candidate,
+			distance,
+			prefix: sharedPrefix(target, candidate),
+		});
+	}
+	ranked.sort(
+		(left, right) =>
+			left.distance - right.distance ||
+			right.prefix - left.prefix ||
+			left.candidate.localeCompare(right.candidate),
+	);
+	return ranked
+		.slice(0, SUGGESTION_LIMIT)
+		.map(({ candidate }) => wearingTheCaseOf(word, candidate));
+};

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

@@ -14,6 +14,7 @@ import type {
 import {
 	dictionaryFor,
 	findMisspellings,
+	suggestionsFor,
 } from "./rich-text-spellcheck-words.js";
 
 interface WorkerScope {
@@ -45,6 +46,16 @@ scope.addEventListener("message", ({ data }) => {
 		scope.postMessage({ type: "ready", language: data.language });
 		return;
 	}
+	if (data.type === "suggest") {
+		const words = dictionaryFor(data.language);
+		scope.postMessage({
+			type: "suggested",
+			requestId: data.requestId,
+			word: data.word,
+			suggestions: words ? suggestionsFor(data.word, words) : [],
+		});
+		return;
+	}
 	scope.postMessage({
 		type: "checked",
 		requestId: data.requestId,

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

@@ -26,6 +26,7 @@ import type {
 import {
 	dictionaryFor,
 	findMisspellings,
+	suggestionsFor,
 } from "./rich-text-spellcheck-words.js";
 
 const SENTENCE = "Ths report is redy today";
@@ -117,6 +118,12 @@ const stubSpellcheck = (
 				held.push(() => resolve(response));
 			});
 		},
+		suggest: (request) =>
+			Promise.resolve({
+				requestId: request.requestId,
+				word: request.word,
+				suggestions: suggestionsFor(request.word, words),
+			}),
 		close: () => {
 			closed += 1;
 		},

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

@@ -34,6 +34,23 @@ export interface CheckResponse {
 	readonly findings: readonly Finding[];
 }
 
+/**
+ * One word, asked when a correction menu opens. Never a paragraph: a menu is
+ * about the word under the pointer, and asking wider would spend the engine on
+ * words nobody is looking at.
+ */
+export interface SuggestRequest {
+	readonly requestId: string;
+	readonly language: LanguageTag;
+	readonly word: string;
+}
+
+export interface SuggestResponse {
+	readonly requestId: string;
+	readonly word: string;
+	readonly suggestions: readonly string[];
+}
+
 export type ProviderStatus =
 	| { readonly state: "opening"; readonly language: LanguageTag }
 	| { readonly state: "ready"; readonly language: LanguageTag }
@@ -51,6 +68,8 @@ export interface SpellProvider {
 	/** Emits the current status to the listener before any later one. */
 	onStatus(listener: (status: ProviderStatus) => void): () => void;
 	check(request: CheckRequest): Promise<CheckResponse>;
+	/** Rejects when the checker cannot answer, so the menu can say so. */
+	suggest(request: SuggestRequest): Promise<SuggestResponse>;
 	close(): void;
 }
 
@@ -58,11 +77,17 @@ export interface SpellcheckOptions {
 	/** Resolving null means no dictionary for that language. */
 	provider(language: LanguageTag): Promise<SpellProvider | null>;
 	onStatus?(status: ProviderStatus): void;
+	/**
+	 * Adds the word to whatever holds the writer's own words. The correction
+	 * menu offers the row only when this is passed.
+	 */
+	onAddWord?(word: string): void;
 }
 
 export type SpellWorkerRequest =
 	| { readonly type: "open"; readonly language: LanguageTag }
-	| ({ readonly type: "check" } & CheckRequest);
+	| ({ readonly type: "check" } & CheckRequest)
+	| ({ readonly type: "suggest" } & SuggestRequest);
 
 export type SpellWorkerResponse =
 	| { readonly type: "ready"; readonly language: LanguageTag }
@@ -72,4 +97,5 @@ export type SpellWorkerResponse =
 			readonly reason: "download" | "engine";
 			readonly detail: string;
 	  }
-	| ({ readonly type: "checked" } & CheckResponse);
+	| ({ readonly type: "checked" } & CheckResponse)
+	| ({ readonly type: "suggested" } & SuggestResponse);