@remit/ui 0.0.106 → 0.0.108

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

@@ -9,19 +9,28 @@ import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import { mergeRegister } from "@lexical/utils";
 import {
+	$getNodeByKey,
 	$getRoot,
 	$getSelection,
 	$insertNodes,
 	$isRangeSelection,
+	$isTextNode,
 	COMMAND_PRIORITY_CRITICAL,
 	COMMAND_PRIORITY_LOW,
 	KEY_DOWN_COMMAND,
 	type LexicalEditor,
 	PASTE_COMMAND,
 } from "lexical";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { $adoptHtml, $readRichText } from "./rich-text-document.js";
 import { RICH_TEXT_NODES, richTextTheme } from "./rich-text-nodes.js";
+import type {
+	CheckSpan,
+	Finding,
+	ProviderStatus,
+	SpellcheckOptions,
+	SpellProvider,
+} from "./rich-text-spellcheck.js";
 import { RichTextToolbar } from "./rich-text-toolbar.js";
 import type { RichTextValue } from "./rich-text-value.js";
 
@@ -44,6 +53,13 @@ export interface RichTextEditorProps {
 	 * ignore it. Every screen reader picks a voice from it.
 	 */
 	lang?: string;
+	/**
+	 * Where checking comes from. Left out, the browser does its own and the
+	 * editor behaves as it does today. The engine is injected: this component
+	 * never imports one, and a `provider` resolving null means no dictionary for
+	 * `lang`, which is also when the browser keeps checking.
+	 */
+	spellcheck?: SpellcheckOptions;
 }
 
 /**
@@ -141,6 +157,282 @@ const ChangePlugin = ({
 	return null;
 };
 
+const SPELLCHECK_IDLE_MS = 250;
+const SPELLCHECK_HIGHLIGHT = "spell-error";
+
+interface SpellMarks {
+	add(range: Range): void;
+}
+
+interface MarkRegistry {
+	set(name: string, marks: SpellMarks): void;
+	delete(name: string): void;
+}
+
+/**
+ * The registry is read off the global rather than through the DOM typings,
+ * which describe `Highlight` without the members that put a range in it. Where
+ * a browser has neither, nothing is drawn and the provider is never opened.
+ */
+interface MarkHost {
+	CSS?: { highlights?: MarkRegistry };
+	Highlight?: new () => SpellMarks;
+}
+
+const markHost = (): MarkHost => globalThis as unknown as MarkHost;
+
+const marksSupported = (): boolean => {
+	const host = markHost();
+	return Boolean(host.CSS?.highlights) && typeof host.Highlight === "function";
+};
+
+/**
+ * One registry entry carries the marks of every editor on the page, because a
+ * highlight name is a page-wide thing and `::highlight(spell-error)` names it
+ * statically. Each editor owns its own ranges here and hands over the whole set
+ * each pass, so a second composer neither overwrites the first nor takes its
+ * marks down when it closes.
+ */
+const painters = new Map<symbol, readonly Range[]>();
+
+const paintMarks = (painter: symbol, ranges: readonly Range[]): void => {
+	const host = markHost();
+	const registry = host.CSS?.highlights;
+	const Marks = host.Highlight;
+	if (!registry || !Marks) return;
+	if (ranges.length === 0) painters.delete(painter);
+	else painters.set(painter, ranges);
+
+	const marks = new Marks();
+	let drawn = 0;
+	for (const owned of painters.values())
+		for (const range of owned) {
+			marks.add(range);
+			drawn += 1;
+		}
+	if (drawn === 0) {
+		registry.delete(SPELLCHECK_HIGHLIGHT);
+		return;
+	}
+	registry.set(SPELLCHECK_HIGHLIGHT, marks);
+};
+
+/**
+ * The characters of a leaf. A format Lexical renders with a tag of its own —
+ * code, subscript, superscript — puts the text one level further down, so the
+ * element the node key resolves to is not always the text itself.
+ */
+const leafCharacters = (node: Node): Node | null => {
+	if (node.nodeType === Node.TEXT_NODE) return node;
+	for (let child = node.firstChild; child; child = child.nextSibling) {
+		const characters = leafCharacters(child);
+		if (characters) return characters;
+	}
+	return null;
+};
+
+/**
+ * Marks, and nothing else. Only the leaves an edit touched are sent, a quarter
+ * of a second after the typing stops, so a word is not called wrong while it is
+ * still being written — and the word the caret sits in is never marked at all.
+ * An answer carrying a revision the document has moved past is dropped.
+ *
+ * The marks live in the highlight registry, keyed by node key and rebuilt after
+ * every reconciliation. Nothing enters the document, so history, the outgoing
+ * HTML and the Markdown never see one.
+ */
+const SpellcheckPlugin = ({
+	language,
+	options,
+	onReady,
+}: {
+	language: string;
+	options: SpellcheckOptions;
+	onReady: (ready: boolean) => void;
+}) => {
+	const [editor] = useLexicalComposerContext();
+	const settings = useRef(options);
+	const report = useRef(onReady);
+
+	useEffect(() => {
+		settings.current = options;
+		report.current = onReady;
+	}, [options, onReady]);
+
+	useEffect(() => {
+		if (!marksSupported()) return;
+		const painter = Symbol(SPELLCHECK_HIGHLIGHT);
+		const found = new Map<string, readonly Finding[]>();
+		const touched = new Set<string>();
+		let provider: SpellProvider | null = null;
+		let unsubscribe: (() => void) | undefined;
+		let idle: ReturnType<typeof setTimeout> | undefined;
+		let live = true;
+		let state: ProviderStatus["state"] = "opening";
+		let revision = 0;
+		let asked = 0;
+
+		const repaint = (): void => {
+			const ranges: Range[] = [];
+			editor.read(() => {
+				const selection = $getSelection();
+				const caret =
+					$isRangeSelection(selection) && selection.isCollapsed()
+						? selection.anchor
+						: null;
+				for (const [key, findings] of found) {
+					const node = $getNodeByKey(key);
+					if (!$isTextNode(node)) {
+						found.delete(key);
+						continue;
+					}
+					const element = editor.getElementByKey(key);
+					const text = element ? leafCharacters(element) : null;
+					if (!text) continue;
+					const length = text.textContent?.length ?? 0;
+					for (const finding of findings) {
+						if (finding.end > length) continue;
+						if (
+							caret?.key === key &&
+							caret.offset > finding.start &&
+							caret.offset <= finding.end
+						)
+							continue;
+						const range = text.ownerDocument?.createRange();
+						if (!range) continue;
+						range.setStart(text, finding.start);
+						range.setEnd(text, finding.end);
+						ranges.push(range);
+					}
+				}
+			});
+			paintMarks(painter, ranges);
+		};
+
+		const check = (): void => {
+			// Anything queued while the provider is not answering stays queued: the
+			// next status that says ready sends it.
+			if (!provider || state !== "ready") return;
+			const keys = [...touched];
+			touched.clear();
+			const spans: CheckSpan[] = [];
+			editor.read(() => {
+				for (const key of keys) {
+					const node = $getNodeByKey(key);
+					if (!$isTextNode(node)) {
+						found.delete(key);
+						continue;
+					}
+					spans.push({ spanId: key, text: node.getTextContent() });
+				}
+			});
+			if (spans.length === 0) {
+				repaint();
+				return;
+			}
+			asked += 1;
+			const sent = revision;
+			provider
+				.check({ requestId: `${asked}`, language, revision: sent, spans })
+				.then((response) => {
+					if (!live) return;
+					// The text moved while this was in flight, so the offsets are
+					// answers to a document that no longer exists. The leaves go back
+					// on the queue: dropping them here would leave them unchecked
+					// until the writer happened to touch them again.
+					if (response.revision !== revision) {
+						for (const span of spans) touched.add(span.spanId);
+						schedule();
+						return;
+					}
+					const grouped = new Map<string, Finding[]>();
+					for (const finding of response.findings) {
+						const list = grouped.get(finding.spanId);
+						if (list) {
+							list.push(finding);
+							continue;
+						}
+						grouped.set(finding.spanId, [finding]);
+					}
+					for (const span of spans) found.delete(span.spanId);
+					for (const [key, findings] of grouped) found.set(key, findings);
+					repaint();
+				});
+		};
+
+		const schedule = (): void => {
+			clearTimeout(idle);
+			idle = setTimeout(check, SPELLCHECK_IDLE_MS);
+		};
+
+		const unregister = editor.registerUpdateListener(({ dirtyLeaves }) => {
+			if (dirtyLeaves.size === 0) {
+				repaint();
+				return;
+			}
+			revision += 1;
+			// Characters moved under the findings this leaf carries, so they are
+			// answers about text that is no longer there. They go now rather than
+			// sitting over the wrong letters until the next answer arrives.
+			for (const key of dirtyLeaves) {
+				found.delete(key);
+				touched.add(key);
+			}
+			repaint();
+			schedule();
+		});
+
+		settings.current.provider(language).then((opened) => {
+			if (!live) {
+				opened?.close();
+				return;
+			}
+			provider = opened;
+			if (!opened) {
+				settings.current.onStatus?.({ state: "unavailable", language });
+				report.current(false);
+				return;
+			}
+			unsubscribe = opened.onStatus((status) => {
+				state = status.state;
+				settings.current.onStatus?.(status);
+				const ready = status.state === "ready";
+				report.current(ready);
+				if (ready) {
+					schedule();
+					return;
+				}
+				// Checking stopped, so the browser's own is back. Its squiggles are
+				// the only ones on screen from here.
+				found.clear();
+				touched.clear();
+				repaint();
+			});
+			// The document the editor opened on was reconciled before this
+			// listener existed, so its leaves are checked here rather than waiting
+			// for an edit that may never come.
+			editor.read(() => {
+				for (const node of $getRoot().getAllTextNodes())
+					touched.add(node.getKey());
+			});
+			schedule();
+		});
+
+		return () => {
+			live = false;
+			clearTimeout(idle);
+			unregister();
+			unsubscribe?.();
+			provider?.close();
+			provider = null;
+			report.current(false);
+			paintMarks(painter, []);
+		};
+	}, [editor, language]);
+
+	return null;
+};
+
 const AutoFocus = ({ enabled }: { enabled: boolean }) => {
 	const [editor] = useLexicalComposerContext();
 
@@ -171,56 +463,75 @@ export const RichTextEditor = ({
 	ariaLabel = "Message body",
 	trailing,
 	lang,
-}: RichTextEditorProps) => (
-	<LexicalComposer
-		initialConfig={{
-			namespace: "compose",
-			nodes: RICH_TEXT_NODES,
-			theme: richTextTheme,
-			editorState: initialHtml ? seedDocument(initialHtml) : undefined,
-			onError: (error) => {
-				throw error;
-			},
-		}}
-	>
-		{/* The editable claims the height its container offers rather than only the
-		    height of its own text. What is under the last line is the document, so
-		    a click there reaches it instead of an unfocusable parent. */}
-		<div className="flex shrink-0 grow flex-col">
-			<RichTextToolbar trailing={trailing} />
-			<div className="relative flex shrink-0 grow flex-col">
-				<RichTextPlugin
-					contentEditable={
-						<ContentEditable
-							lang={lang}
-							aria-label={ariaLabel}
-							aria-placeholder={placeholder}
-							data-testid="compose-body"
-							className="min-h-[120px] w-full shrink-0 grow bg-canvas px-3 py-2 text-sm text-fg outline-none"
-							placeholder={
-								<div className="pointer-events-none absolute inset-x-0 top-0 px-3 py-2 text-sm text-fg-subtle">
-									{placeholder}
-								</div>
-							}
-							onKeyDown={(event) => {
-								if (!onSubmit) return;
-								if (!(event.metaKey || event.ctrlKey) || event.key !== "Enter")
-									return;
-								event.preventDefault();
-								onSubmit();
-							}}
-						/>
-					}
-					ErrorBoundary={LexicalErrorBoundary}
-				/>
+	spellcheck,
+}: RichTextEditorProps) => {
+	const [checkedHere, setCheckedHere] = useState(false);
+
+	return (
+		<LexicalComposer
+			initialConfig={{
+				namespace: "compose",
+				nodes: RICH_TEXT_NODES,
+				theme: richTextTheme,
+				editorState: initialHtml ? seedDocument(initialHtml) : undefined,
+				onError: (error) => {
+					throw error;
+				},
+			}}
+		>
+			{/* The editable claims the height its container offers rather than only the
+			    height of its own text. What is under the last line is the document, so
+			    a click there reaches it instead of an unfocusable parent. */}
+			<div className="flex shrink-0 grow flex-col">
+				<RichTextToolbar trailing={trailing} />
+				<div className="relative flex shrink-0 grow flex-col">
+					<RichTextPlugin
+						contentEditable={
+							<ContentEditable
+								lang={lang}
+								/* Two sets of squiggles never coexist: the browser stops
+								   checking exactly while a provider of ours is ready, and
+								   checks again the moment one is not. */
+								spellCheck={spellcheck ? !checkedHere : undefined}
+								aria-label={ariaLabel}
+								aria-placeholder={placeholder}
+								data-testid="compose-body"
+								className="min-h-[120px] w-full shrink-0 grow bg-canvas px-3 py-2 text-sm text-fg outline-none"
+								placeholder={
+									<div className="pointer-events-none absolute inset-x-0 top-0 px-3 py-2 text-sm text-fg-subtle">
+										{placeholder}
+									</div>
+								}
+								onKeyDown={(event) => {
+									if (!onSubmit) return;
+									if (
+										!(event.metaKey || event.ctrlKey) ||
+										event.key !== "Enter"
+									)
+										return;
+									event.preventDefault();
+									onSubmit();
+								}}
+							/>
+						}
+						ErrorBoundary={LexicalErrorBoundary}
+					/>
+				</div>
 			</div>
-		</div>
-		<HistoryPlugin />
-		<ListPlugin />
-		<LinkPlugin />
-		<TablePlugin />
-		<PastePlugin />
-		<AutoFocus enabled={autoFocus} />
-		{onChange && <ChangePlugin onChange={onChange} />}
-	</LexicalComposer>
-);
+			<HistoryPlugin />
+			<ListPlugin />
+			<LinkPlugin />
+			<TablePlugin />
+			<PastePlugin />
+			<AutoFocus enabled={autoFocus} />
+			{onChange && <ChangePlugin onChange={onChange} />}
+			{spellcheck && lang ? (
+				<SpellcheckPlugin
+					language={lang}
+					options={spellcheck}
+					onReady={setCheckedHere}
+				/>
+			) : null}
+		</LexicalComposer>
+	);
+};

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

@@ -0,0 +1,217 @@
+/**
+ * The provider and the worker against each other. The worker module is loaded
+ * with a stand-in for the worker global, so what runs here is the code that
+ * 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 type {
+	ProviderStatus,
+	SpellWorkerRequest,
+	SpellWorkerResponse,
+} from "./rich-text-spellcheck.js";
+import {
+	openSpellProvider,
+	type SpellWorkerPort,
+} from "./rich-text-spellcheck-provider.js";
+import {
+	dictionaryFor,
+	findMisspellings,
+} from "./rich-text-spellcheck-words.js";
+
+interface WorkerScope {
+	postMessage(message: SpellWorkerResponse): void;
+	addEventListener(
+		type: "message",
+		listener: (event: { data: SpellWorkerRequest }) => void,
+	): void;
+}
+
+let receive: (event: { data: SpellWorkerRequest }) => void;
+let deliver: ((message: SpellWorkerResponse) => void) | undefined;
+let terminated = 0;
+
+/** Wires the loaded worker module to a provider, the way a real port does. */
+const port: SpellWorkerPort = {
+	post: (message) => receive({ data: message }),
+	listen: (listener) => {
+		deliver = listener;
+	},
+	fail: () => {},
+	terminate: () => {
+		terminated += 1;
+	},
+};
+
+before(async () => {
+	const scope: WorkerScope = {
+		postMessage: (message) => deliver?.(message),
+		addEventListener: (_type, listener) => {
+			receive = listener;
+		},
+	};
+	Object.defineProperty(globalThis, "postMessage", {
+		value: scope.postMessage,
+		configurable: true,
+	});
+	Object.defineProperty(globalThis, "addEventListener", {
+		value: scope.addEventListener,
+		configurable: true,
+	});
+	await import("./rich-text-spellcheck-worker.js");
+});
+
+describe("the stub dictionary", () => {
+	it("takes a region tag and answers for the language", () => {
+		assert.ok(dictionaryFor("en-GB"), "a region variant reads the same words");
+		assert.equal(
+			dictionaryFor("de"),
+			null,
+			"no dictionary is not an empty one",
+		);
+	});
+
+	it("ranges the words it does not hold", () => {
+		const words = dictionaryFor("en");
+		assert.ok(words);
+		assert.deepEqual(findMisspellings("Ths report is redy today", words), [
+			{ start: 0, end: 3 },
+			{ start: 14, end: 18 },
+		]);
+		assert.deepEqual(
+			findMisspellings("A report", words),
+			[],
+			"a single letter is not a word to check",
+		);
+	});
+});
+
+describe("a provider over a worker", () => {
+	it("opens, checks and closes", async () => {
+		const seen: ProviderStatus[] = [];
+		const provider = openSpellProvider("en", port);
+		const unsubscribe = provider.onStatus((status) => seen.push(status));
+
+		assert.deepEqual(
+			seen.at(-1),
+			{ state: "ready", language: "en" },
+			"a listener that subscribes late still learns the worker is up",
+		);
+
+		const response = await provider.check({
+			requestId: "7",
+			language: "en",
+			revision: 3,
+			spans: [{ spanId: "a", text: "Ths report" }],
+		});
+
+		assert.equal(response.requestId, "7");
+		assert.equal(response.revision, 3, "the answer carries the revision asked");
+		assert.deepEqual(response.findings, [
+			{
+				spanId: "a",
+				start: 0,
+				end: 3,
+				kind: "spelling",
+				suggestions: [],
+			},
+		]);
+
+		unsubscribe();
+		provider.close();
+		assert.equal(terminated, 1, "closing the provider takes the worker down");
+	});
+
+	it("answers each request with its own findings", async () => {
+		const provider = openSpellProvider("en", port);
+		const [first, second] = await Promise.all([
+			provider.check({
+				requestId: "1",
+				language: "en",
+				revision: 1,
+				spans: [{ spanId: "a", text: "redy" }],
+			}),
+			provider.check({
+				requestId: "2",
+				language: "en",
+				revision: 2,
+				spans: [{ spanId: "b", text: "the report" }],
+			}),
+		]);
+
+		assert.equal(first?.findings.length, 1);
+		assert.equal(first?.findings[0]?.spanId, "a");
+		assert.deepEqual(second?.findings, []);
+		provider.close();
+	});
+
+	it("says which language it has no words for", async () => {
+		const provider = openSpellProvider("de", port);
+		const response = await provider.check({
+			requestId: "1",
+			language: "de",
+			revision: 1,
+			spans: [{ spanId: "a", text: "Vielen Dank" }],
+		});
+
+		assert.deepEqual(
+			response.findings,
+			[],
+			"a language with no dictionary marks nothing rather than everything",
+		);
+		provider.close();
+	});
+
+	it("passes on a failure the worker names itself", () => {
+		const seen: ProviderStatus[] = [];
+		let answer: ((message: SpellWorkerResponse) => void) | undefined;
+		const provider = openSpellProvider("nl", {
+			...port,
+			post: () => {},
+			listen: (listener) => {
+				answer = listener;
+			},
+		});
+		provider.onStatus((status) => seen.push(status));
+		answer?.({
+			type: "failed",
+			language: "nl",
+			reason: "download",
+			detail: "503 fetching the dictionary",
+		});
+
+		assert.deepEqual(seen.at(-1), {
+			state: "failed",
+			language: "nl",
+			reason: "download",
+			detail: "503 fetching the dictionary",
+		});
+		provider.close();
+	});
+
+	it("reports a worker that fell over", () => {
+		const seen: ProviderStatus[] = [];
+		let raise: ((detail: string) => void) | undefined;
+		const provider = openSpellProvider("en", {
+			...port,
+			post: () => {},
+			listen: () => {},
+			fail: (listener) => {
+				raise = listener;
+			},
+		});
+		provider.onStatus((status) => seen.push(status));
+		raise?.("worker exited");
+
+		assert.deepEqual(seen, [
+			{ state: "opening", language: "en" },
+			{
+				state: "failed",
+				language: "en",
+				reason: "worker",
+				detail: "worker exited",
+			},
+		]);
+		provider.close();
+	});
+});