@remit/ui 0.0.106 → 0.0.107

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();
+	});
+});

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

@@ -0,0 +1,83 @@
+/**
+ * A provider over a port. The editor holds it through the interface only, so
+ * where the checking runs — a worker here, a backend later — is not something
+ * the plugin can observe. Closing it takes the port down with it.
+ */
+import type {
+	CheckResponse,
+	LanguageTag,
+	ProviderStatus,
+	SpellProvider,
+	SpellWorkerRequest,
+	SpellWorkerResponse,
+} from "./rich-text-spellcheck.js";
+
+export interface SpellWorkerPort {
+	post(message: SpellWorkerRequest): void;
+	listen(listener: (message: SpellWorkerResponse) => void): void;
+	fail(listener: (detail: string) => void): void;
+	terminate(): void;
+}
+
+export const openSpellProvider = (
+	language: LanguageTag,
+	port: SpellWorkerPort,
+): SpellProvider => {
+	const pending = new Map<string, (response: CheckResponse) => void>();
+	const listeners = new Set<(status: ProviderStatus) => void>();
+	let status: ProviderStatus = { state: "opening", language };
+
+	const publish = (next: ProviderStatus): void => {
+		status = next;
+		for (const listener of listeners) listener(next);
+	};
+
+	port.listen((message) => {
+		if (message.type === "ready") {
+			publish({ state: "ready", language });
+			return;
+		}
+		if (message.type === "failed") {
+			publish({
+				state: "failed",
+				language,
+				reason: message.reason,
+				detail: message.detail,
+			});
+			return;
+		}
+		const settle = pending.get(message.requestId);
+		if (!settle) return;
+		pending.delete(message.requestId);
+		settle({
+			requestId: message.requestId,
+			revision: message.revision,
+			findings: message.findings,
+		});
+	});
+	port.fail((detail) =>
+		publish({ state: "failed", language, reason: "worker", detail }),
+	);
+	port.post({ type: "open", language });
+
+	return {
+		language,
+		onStatus: (listener) => {
+			listeners.add(listener);
+			listener(status);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		check: (request) =>
+			new Promise((resolve) => {
+				pending.set(request.requestId, resolve);
+				port.post({ type: "check", ...request });
+			}),
+		close: () => {
+			pending.clear();
+			listeners.clear();
+			port.terminate();
+		},
+	};
+};

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

@@ -0,0 +1,214 @@
+/**
+ * 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.
+ */
+import type { LanguageTag } from "./rich-text-spellcheck.js";
+
+export interface WordRange {
+	readonly start: number;
+	readonly end: number;
+}
+
+const ENGLISH: ReadonlySet<string> = new Set([
+	"a",
+	"about",
+	"after",
+	"again",
+	"all",
+	"also",
+	"an",
+	"and",
+	"any",
+	"are",
+	"as",
+	"at",
+	"be",
+	"because",
+	"been",
+	"before",
+	"both",
+	"but",
+	"by",
+	"can",
+	"come",
+	"could",
+	"day",
+	"did",
+	"do",
+	"does",
+	"done",
+	"down",
+	"draft",
+	"each",
+	"end",
+	"even",
+	"every",
+	"few",
+	"find",
+	"first",
+	"for",
+	"friday",
+	"from",
+	"get",
+	"give",
+	"go",
+	"good",
+	"had",
+	"has",
+	"have",
+	"he",
+	"help",
+	"her",
+	"here",
+	"him",
+	"his",
+	"how",
+	"i",
+	"if",
+	"in",
+	"into",
+	"is",
+	"it",
+	"its",
+	"just",
+	"keep",
+	"know",
+	"last",
+	"let",
+	"like",
+	"long",
+	"look",
+	"made",
+	"make",
+	"many",
+	"may",
+	"me",
+	"meeting",
+	"month",
+	"more",
+	"most",
+	"much",
+	"must",
+	"my",
+	"need",
+	"new",
+	"next",
+	"no",
+	"not",
+	"note",
+	"notes",
+	"now",
+	"number",
+	"numbers",
+	"of",
+	"off",
+	"on",
+	"once",
+	"one",
+	"only",
+	"or",
+	"other",
+	"our",
+	"out",
+	"over",
+	"own",
+	"people",
+	"please",
+	"put",
+	"quarter",
+	"read",
+	"ready",
+	"receive",
+	"report",
+	"right",
+	"same",
+	"say",
+	"see",
+	"send",
+	"sent",
+	"she",
+	"should",
+	"show",
+	"since",
+	"so",
+	"some",
+	"still",
+	"such",
+	"take",
+	"team",
+	"tell",
+	"than",
+	"that",
+	"the",
+	"their",
+	"them",
+	"then",
+	"there",
+	"these",
+	"they",
+	"thing",
+	"think",
+	"this",
+	"those",
+	"through",
+	"time",
+	"to",
+	"today",
+	"too",
+	"two",
+	"up",
+	"us",
+	"use",
+	"very",
+	"want",
+	"was",
+	"way",
+	"we",
+	"week",
+	"well",
+	"were",
+	"what",
+	"when",
+	"where",
+	"which",
+	"while",
+	"who",
+	"why",
+	"will",
+	"with",
+	"word",
+	"work",
+	"would",
+	"year",
+	"yes",
+	"you",
+	"your",
+]);
+
+const DICTIONARIES: ReadonlyMap<string, ReadonlySet<string>> = new Map([
+	["en", ENGLISH],
+]);
+
+export const dictionaryFor = (
+	language: LanguageTag,
+): ReadonlySet<string> | null =>
+	DICTIONARIES.get(language.toLowerCase().split("-")[0]) ?? null;
+
+export const findMisspellings = (
+	text: string,
+	words: ReadonlySet<string>,
+): readonly WordRange[] => {
+	const pattern = /\p{L}[\p{L}\p{M}'’]*/gu;
+	const found: WordRange[] = [];
+	let match = pattern.exec(text);
+	while (match) {
+		const word = match[0];
+		if (word.length > 1 && !words.has(word.toLowerCase().replace(/’/g, "'"))) {
+			found.push({ start: match.index, end: match.index + word.length });
+		}
+		match = pattern.exec(text);
+	}
+	return found;
+};

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

@@ -0,0 +1,42 @@
+/**
+ * The `spellcheck.provider` a composer hands the editor, over a real worker.
+ * A language with no dictionary answers null and no worker ever starts.
+ *
+ * Its own module, and deliberately not on the package barrel: a bundler emits
+ * the worker chunk for whatever graph reaches this `new URL`, and until the
+ * build carries an engine (#692, decision 11) that chunk has no business in an
+ * app build.
+ */
+
+import type {
+	LanguageTag,
+	SpellProvider,
+	SpellWorkerResponse,
+} from "./rich-text-spellcheck.js";
+import type { SpellWorkerPort } from "./rich-text-spellcheck-provider.js";
+import { openSpellProvider } from "./rich-text-spellcheck-provider.js";
+import { dictionaryFor } from "./rich-text-spellcheck-words.js";
+
+const workerPort = (worker: Worker): SpellWorkerPort => ({
+	post: (message) => worker.postMessage(message),
+	listen: (listener) =>
+		worker.addEventListener("message", (event: MessageEvent) =>
+			listener(event.data as SpellWorkerResponse),
+		),
+	fail: (listener) =>
+		worker.addEventListener("error", (event: ErrorEvent) =>
+			listener(event.message),
+		),
+	terminate: () => worker.terminate(),
+});
+
+export const openSpellcheckWorker = async (
+	language: LanguageTag,
+): Promise<SpellProvider | null> => {
+	if (!dictionaryFor(language)) return null;
+	const worker = new Worker(
+		new URL("./rich-text-spellcheck-worker.ts", import.meta.url),
+		{ type: "module" },
+	);
+	return openSpellProvider(language, workerPort(worker));
+};

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

@@ -0,0 +1,54 @@
+/**
+ * The checking side, off the main thread. It answers with the revision it was
+ * asked at and never touches the document, which is what lets the editor throw
+ * a late answer away. The word list it consults is a stub; the engine that
+ * replaces it changes nothing above this file.
+ */
+
+import type {
+	CheckRequest,
+	Finding,
+	SpellWorkerRequest,
+	SpellWorkerResponse,
+} from "./rich-text-spellcheck.js";
+import {
+	dictionaryFor,
+	findMisspellings,
+} from "./rich-text-spellcheck-words.js";
+
+interface WorkerScope {
+	postMessage(message: SpellWorkerResponse): void;
+	addEventListener(
+		type: "message",
+		listener: (event: MessageEvent<SpellWorkerRequest>) => void,
+	): void;
+}
+
+const spell = (request: CheckRequest): Finding[] => {
+	const words = dictionaryFor(request.language);
+	if (!words) return [];
+	return request.spans.flatMap((span) =>
+		findMisspellings(span.text, words).map((range) => ({
+			spanId: span.spanId,
+			start: range.start,
+			end: range.end,
+			kind: "spelling" as const,
+			suggestions: [],
+		})),
+	);
+};
+
+const scope = globalThis as unknown as WorkerScope;
+
+scope.addEventListener("message", ({ data }) => {
+	if (data.type === "open") {
+		scope.postMessage({ type: "ready", language: data.language });
+		return;
+	}
+	scope.postMessage({
+		type: "checked",
+		requestId: data.requestId,
+		revision: data.revision,
+		findings: spell(data),
+	});
+});