@remit/ui 0.0.119 → 0.0.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "type": "module",
   "files": [
     "src"
@@ -51,6 +51,9 @@
   "devDependencies": {
     "@storybook/react": "^9",
     "@types/jsdom": "^28.0.3",
+    "dictionary-en": "4.0.0",
+    "dictionary-en-gb": "3.0.0",
+    "dictionary-nl": "2.0.0",
     "jsdom": "^29.1.1",
     "react": "^19",
     "react-dom": "^19",

package/src/components/compose-body.spellcheck.test.ts

@@ -348,7 +348,10 @@ describe("the composer's spellchecker", () => {
 
 		assert.deepEqual(
 			statuses,
-			[{ state: "failed", language: "en", reason: "worker", detail: "boom" }],
+			[
+				{ state: "opening", language: "en", bytesLoaded: 0, bytesTotal: 0 },
+				{ state: "failed", language: "en", reason: "worker", detail: "boom" },
+			],
 			"the composer hears why checking is not happening, in the shape it reports",
 		);
 		assert.equal(
@@ -376,7 +379,7 @@ describe("the composer's spellchecker", () => {
 
 		assert.deepEqual(
 			statuses.map((status) => status.state),
-			["ready", "failed"],
+			["opening", "ready", "failed"],
 			"the stop is reported, not swallowed",
 		);
 		assert.deepEqual(marked(), [], "no mark outlives the checker that drew it");

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

@@ -13,10 +13,8 @@ import type {
 	Finding,
 	SpellcheckOptions,
 } from "./rich-text-spellcheck.js";
-import {
-	dictionaryFor,
-	findMisspellings,
-} from "./rich-text-spellcheck-words.js";
+import { stubKnows } from "./rich-text-spellcheck-double.js";
+import { findMisspellings } from "./rich-text-spellcheck-words.js";
 import { openSpellcheckWorker } from "./rich-text-spellcheck-worker-provider.js";
 
 /**
@@ -255,14 +253,78 @@ export const NarrowToolbar: Story = {
 
 const MISSPELT = "Ths report is redy today, and the notes are attachd.";
 
+const DUTCH = "De vergaderingg gaat over de begrooting.";
+
 /**
- * A real module worker does the checking, over the same messages an engine
- * would answer: the component is handed a provider and never learns where the
- * words came from. What the worker holds instead of a dictionary is a short
- * list of English words.
+ * A real module worker does the checking, over Hunspell and the dictionary this
+ * build staged: the component is handed a provider and never learns where the
+ * words came from.
  */
 const workerSpellcheck: SpellcheckOptions = { provider: openSpellcheckWorker };
 
+/** A download that never finishes, which on a bad link is most of a minute. */
+const stalledSpellcheck = (bytesTotal: number): SpellcheckOptions => ({
+	provider: async (language) => ({
+		language,
+		onStatus: (listener) => {
+			listener({ state: "opening", language, bytesLoaded: 0, bytesTotal });
+			const timer = setInterval(
+				() =>
+					listener({
+						state: "opening",
+						language,
+						bytesLoaded: Math.round(bytesTotal / 4),
+						bytesTotal,
+					}),
+				500,
+			);
+			return () => clearInterval(timer);
+		},
+		check: (request) =>
+			Promise.resolve({
+				requestId: request.requestId,
+				revision: request.revision,
+				findings: [],
+			}),
+		suggest: (request) =>
+			Promise.resolve({
+				requestId: request.requestId,
+				word: request.word,
+				suggestions: [],
+			}),
+		close: () => {},
+	}),
+});
+
+/** The dictionary answered, and what it answered was 503. */
+const refusedSpellcheck: SpellcheckOptions = {
+	provider: async (language) => ({
+		language,
+		onStatus: (listener) => {
+			listener({
+				state: "failed",
+				language,
+				reason: "download",
+				detail: `/spellcheck/dictionaries/${language}/index.dic answered 503`,
+			});
+			return () => {};
+		},
+		check: (request) =>
+			Promise.resolve({
+				requestId: request.requestId,
+				revision: request.revision,
+				findings: [],
+			}),
+		suggest: (request) =>
+			Promise.resolve({
+				requestId: request.requestId,
+				word: request.word,
+				suggestions: [],
+			}),
+		close: () => {},
+	}),
+};
+
 /**
  * The same findings, answered against the revision before the one asked for —
  * what a slow engine looks like when the text has already moved on.
@@ -278,12 +340,11 @@ const staleSpellcheck: SpellcheckOptions = {
 		},
 		check: (request: CheckRequest) => {
 			staleAnswers.push(request.requestId);
-			const words = dictionaryFor(request.language) ?? new Set<string>();
 			return Promise.resolve({
 				requestId: request.requestId,
 				revision: request.revision - 1,
 				findings: request.spans.flatMap((span) =>
-					findMisspellings(span.text, words).map(
+					findMisspellings(span.text, stubKnows).map(
 						(range): Finding => ({
 							spanId: span.spanId,
 							start: range.start,
@@ -377,6 +438,115 @@ export const SpellcheckMarks: Story = {
 	},
 };
 
+/**
+ * The same worker on a Dutch message, against OpenTaal's 180,745 entries. Two
+ * Dutch misspellings carry a squiggle and every other Dutch word does not —
+ * which is the whole point, since a Dutch message in an English-configured
+ * Chrome gets a squiggle under every word.
+ */
+export const SpellcheckDutch: Story = {
+	name: "Spellcheck in Dutch (real dictionary)",
+	args: {
+		initialHtml: `<p>${DUTCH}</p>`,
+		lang: "nl",
+		spellcheck: workerSpellcheck,
+	},
+	play: async ({ canvasElement }) => {
+		const editable = writingSurface(canvasElement);
+		await waitFor(
+			() =>
+				expect(spellMarkOffsets(editable)).toEqual([
+					[3, 15],
+					[29, 39],
+				]),
+			{ timeout: 15000 },
+		);
+		await expect(editable.getAttribute("spellcheck")).toBe("false");
+	},
+};
+
+/**
+ * Fourteen seconds of a composer that looks like it has no opinion about
+ * spelling is the failure this must not have. The browser keeps checking, the
+ * banner names the language and its size once the wait is long enough to be
+ * worth mentioning, and cancelling leaves the writer with a way back.
+ */
+export const SpellcheckSlowDownload: Story = {
+	name: "Spellcheck while the dictionary downloads",
+	args: {
+		initialHtml: `<p>${DUTCH}</p>`,
+		lang: "nl",
+		spellcheck: stalledSpellcheck(702_464),
+	},
+	play: async ({ canvasElement }) => {
+		const editable = writingSurface(canvasElement);
+		await expect(editable.getAttribute("spellcheck")).toBe("true");
+		await expect(spellMarks(editable)).toHaveLength(0);
+
+		const notice = await waitFor(
+			() => {
+				const row = canvasElement.querySelector<HTMLElement>(
+					"[data-testid=spellcheck-notice]",
+				);
+				expect(row).not.toBeNull();
+				return row as HTMLElement;
+			},
+			{ timeout: 12000 },
+		);
+		await expect(notice.textContent).toContain("Nederlands");
+		await expect(notice.textContent).toContain("686 KB");
+
+		const cancel = notice.querySelector<HTMLElement>(
+			"[data-testid=spellcheck-cancel]",
+		);
+		if (!cancel)
+			throw new Error("a download nobody can stop is not a download");
+		await userEvent.click(cancel);
+
+		await waitFor(() =>
+			expect(
+				canvasElement.querySelector("[data-testid=spellcheck-retry]"),
+			).not.toBeNull(),
+		);
+		await expect(editable.getAttribute("spellcheck")).toBe("true");
+	},
+};
+
+/**
+ * The dead squiggle-free editor is the worst outcome, so a failure says which
+ * file, what it answered, and where to report it — and hands the spelling back
+ * to the browser rather than leaving nobody checking.
+ */
+export const SpellcheckDownloadFailed: Story = {
+	name: "Spellcheck when the dictionary fails to load",
+	args: {
+		initialHtml: `<p>${DUTCH}</p>`,
+		lang: "nl",
+		spellcheck: refusedSpellcheck,
+	},
+	play: async ({ canvasElement }) => {
+		const editable = writingSurface(canvasElement);
+		const detail = await waitFor(() => {
+			const row = canvasElement.querySelector<HTMLElement>(
+				"[data-testid=spellcheck-detail]",
+			);
+			expect(row).not.toBeNull();
+			return row as HTMLElement;
+		});
+
+		await expect(detail.textContent).toContain("answered 503");
+		await expect(
+			canvasElement.querySelector("[data-testid=spellcheck-retry]"),
+		).not.toBeNull();
+		const report = canvasElement.querySelector<HTMLAnchorElement>(
+			"[data-testid=spellcheck-report]",
+		);
+		await expect(report?.href).toContain("issues/new?title=");
+		await expect(editable.getAttribute("spellcheck")).toBe("true");
+		await expect(spellMarks(editable)).toHaveLength(0);
+	},
+};
+
 /** A language the build carries no dictionary for: the browser keeps checking. */
 export const SpellcheckWithoutDictionary: Story = {
 	name: "Spellcheck with no dictionary for the language",
@@ -562,7 +732,7 @@ export const SpellcheckSuggestions: Story = {
 			timeout: 5000,
 		});
 
-		clickOn(editable, "Ths");
+		clickOn(editable, "attachd");
 		await waitFor(() =>
 			expect(spellNode(canvasElement, "[data-testid=spell-menu]")).toBeTruthy(),
 		);
@@ -570,22 +740,26 @@ export const SpellcheckSuggestions: Story = {
 			menuRows(canvasElement, "spell-suggestion-skeleton"),
 		).toHaveLength(3);
 
+		// What Hunspell offers over SCOWL, in its own order. The word the writer
+		// meant is in it, which is the whole reason for a real dictionary.
 		await waitFor(
 			() =>
 				expect(
 					menuRows(canvasElement, "spell-suggestion").map(
 						(row) => row.textContent,
 					),
-				).toEqual(["The", "This", "Than", "That", "Them"]),
+				).toEqual(["attach", "attached", "attache", "attach d"]),
 			{ timeout: 5000 },
 		);
 
-		const [first] = menuRows(canvasElement, "spell-suggestion");
-		if (!first) throw new Error("no suggestion to pick");
-		await userEvent.click(first);
+		const meant = menuRows(canvasElement, "spell-suggestion").find(
+			(row) => row.textContent === "attached",
+		);
+		if (!meant) throw new Error("no suggestion to pick");
+		await userEvent.click(meant);
 
 		await expect(editable.textContent).toBe(
-			MISSPELT.replace("Ths report", "The report"),
+			MISSPELT.replace("attachd", "attached"),
 		);
 		await waitFor(() => expect(spellMarks(editable).length).toBe(2), {
 			timeout: 5000,

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

@@ -40,6 +40,7 @@ import type {
 	SpellcheckOptions,
 	SpellProvider,
 } from "./rich-text-spellcheck.js";
+import { RichTextSpellcheckNotice } from "./rich-text-spellcheck-notice.js";
 import {
 	normaliseWord,
 	SUGGESTION_LIMIT,
@@ -397,6 +398,19 @@ const SpellcheckPlugin = ({
 		null,
 	);
 	const [failure, setFailure] = useState<string | null>(null);
+	// A cancelled download and a retry are the same effect run again, so the
+	// attempt is what the effect keys off; standing down withholds the run.
+	const [attempt, setAttempt] = useState(0);
+	const [standDown, setStandDown] = useState(false);
+	const [status, setStatus] = useState<ProviderStatus>({
+		state: "opening",
+		language,
+		bytesLoaded: 0,
+		bytesTotal: 0,
+	});
+	// Nothing here can draw a mark without the highlight registry, so there is
+	// nothing to narrate either: the browser has the text to itself.
+	const [drawable] = useState(marksSupported);
 
 	useEffect(() => {
 		settings.current = options;
@@ -404,7 +418,7 @@ const SpellcheckPlugin = ({
 	}, [options, onReady]);
 
 	useEffect(() => {
-		if (!marksSupported()) return;
+		if (!marksSupported() || standDown) return;
 		const painter = Symbol(SPELLCHECK_HIGHLIGHT);
 		const findings = found.current;
 		const touched = new Set<string>();
@@ -473,7 +487,14 @@ const SpellcheckPlugin = ({
 			passes += 1;
 			const sent = revision;
 			provider
-				.check({ requestId: `${passes}`, language, revision: sent, spans })
+				// The attempt is part of the id, so a retry's answers are legible
+				// against the ones the download it replaced never delivered.
+				.check({
+					requestId: `${attempt}:${passes}`,
+					language,
+					revision: sent,
+					spans,
+				})
 				.then((response) => {
 					if (!live) return;
 					// The text moved while this was in flight, so the offsets are
@@ -656,16 +677,18 @@ const SpellcheckPlugin = ({
 			schedule();
 		});
 
+		const announce = (next: ProviderStatus): void => {
+			setStatus(next);
+			settings.current.onStatus?.(next);
+		};
+
 		const stopped = (detail: string): void => {
-			settings.current.onStatus?.({
-				state: "failed",
-				language,
-				reason: "worker",
-				detail,
-			});
+			announce({ state: "failed", language, reason: "worker", detail });
 			report.current(false);
 		};
 
+		announce({ state: "opening", language, bytesLoaded: 0, bytesTotal: 0 });
+
 		settings.current
 			.provider(language)
 			.then((opened) => {
@@ -675,19 +698,24 @@ const SpellcheckPlugin = ({
 				}
 				checker.current = opened;
 				if (!opened) {
-					settings.current.onStatus?.({ state: "unavailable", language });
+					announce({ state: "unavailable", language });
 					report.current(false);
 					return;
 				}
 				unsubscribe = opened.onStatus((status) => {
 					state = status.state;
-					settings.current.onStatus?.(status);
+					announce(status);
 					const ready = status.state === "ready";
 					report.current(ready);
 					if (ready) {
 						schedule();
 						return;
 					}
+					// A dictionary on its way is not checking stopped, and it arrives in
+					// twenty progress reports: treating each as a stop would empty the
+					// queue the first pass is supposed to drain, and nothing would ever
+					// be checked.
+					if (status.state === "opening") return;
 					// Checking stopped, so the browser's own is back. Its squiggles are
 					// the only ones on screen from here.
 					findings.clear();
@@ -723,7 +751,7 @@ const SpellcheckPlugin = ({
 			report.current(false);
 			paintMarks(painter, []);
 		};
-	}, [editor, language, hostRef]);
+	}, [editor, language, hostRef, attempt, standDown]);
 
 	useEffect(() => {
 		if (!target) return;
@@ -780,9 +808,8 @@ const SpellcheckPlugin = ({
 		[editor, dismiss],
 	);
 
-	if (!target) return null;
-
 	const replace = (suggestion: string) => {
+		if (!target) return;
 		// One entry, so one undo puts the misspelling back (#707, decision 9).
 		editor.update(
 			() => {
@@ -809,27 +836,43 @@ const SpellcheckPlugin = ({
 	};
 
 	const addWord = () => {
+		if (!target) return;
 		settings.current.onAddWord?.(target.word);
 		forget(target.word);
 	};
 
 	return (
-		<RichTextCorrectionMenu
-			word={target.word}
-			suggestions={suggestions}
-			failure={failure}
-			anchor={{
-				left: target.left,
-				right: target.right,
-				top: target.top,
-				bottom: target.bottom,
-			}}
-			language={language}
-			onReplace={replace}
-			onIgnore={() => forget(target.word)}
-			onAddWord={options.onAddWord ? addWord : undefined}
-			onDismiss={dismiss}
-		/>
+		<>
+			{drawable ? (
+				<RichTextSpellcheckNotice
+					status={status}
+					standDown={standDown}
+					onCancel={() => setStandDown(true)}
+					onRetry={() => {
+						setStandDown(false);
+						setAttempt((run) => run + 1);
+					}}
+				/>
+			) : null}
+			{target ? (
+				<RichTextCorrectionMenu
+					word={target.word}
+					suggestions={suggestions}
+					failure={failure}
+					anchor={{
+						left: target.left,
+						right: target.right,
+						top: target.top,
+						bottom: target.bottom,
+					}}
+					language={language}
+					onReplace={replace}
+					onIgnore={() => forget(target.word)}
+					onAddWord={options.onAddWord ? addWord : undefined}
+					onDismiss={dismiss}
+				/>
+			) : null}
+		</>
 	);
 };
 

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

@@ -0,0 +1,65 @@
+/**
+ * The stand-in the marks, the menu and the stale-answer stories drive the
+ * editor with. It is not a spellchecker and never was: those tests are about
+ * what the editor does with an answer, so the answer has to be a fixed one.
+ * What a real dictionary says is proved against a real dictionary, in
+ * `rich-text-spellcheck-worker.test.ts`.
+ */
+import { normaliseWord } from "./rich-text-spellcheck-words.js";
+
+const KNOWN = new Set([
+	"a",
+	"again",
+	"agenda",
+	"and",
+	"are",
+	"attached",
+	"budget",
+	"confirm",
+	"figures",
+	"for",
+	"is",
+	"i",
+	"meeting",
+	"notes",
+	"report",
+	"schedule",
+	"separately",
+	"the",
+	"this",
+	"today",
+	"tomorrow",
+	"well",
+	"will",
+]);
+
+const CORRECTIONS = new Map<string, readonly string[]>([
+	["ths", ["the", "this", "than", "that", "them"]],
+	["redy", ["ready", "read", "very"]],
+	["attachd", ["attached"]],
+	["tomorow", ["tomorrow"]],
+	["budgt", ["budget"]],
+	["meetign", ["meeting"]],
+	["confrm", ["confirm"]],
+	["schedual", ["schedule"]],
+	["seperately", ["separately"]],
+]);
+
+/** 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;
+};
+
+export const stubKnows = (word: string): boolean =>
+	KNOWN.has(normaliseWord(word));
+
+export const stubSuggestionsFor = (word: string): readonly string[] =>
+	(CORRECTIONS.get(normaliseWord(word)) ?? []).map((suggestion) =>
+		wearingTheCaseOf(word, suggestion),
+	);