@remit/ui 0.0.101 → 0.0.102

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

@@ -38,6 +38,12 @@ export interface RichTextEditorProps {
 	ariaLabel?: string;
 	/** Pinned to the right of the toolbar strip. The mode toggle rides here. */
 	trailing?: React.ReactNode;
+	/**
+	 * BCP 47 tag of the language the message is being written in. Firefox picks
+	 * a dictionary from it among the ones the user installed; Chrome and Safari
+	 * ignore it. Every screen reader picks a voice from it.
+	 */
+	lang?: string;
 }
 
 /**
@@ -164,6 +170,7 @@ export const RichTextEditor = ({
 	placeholder = "Write your message…",
 	ariaLabel = "Message body",
 	trailing,
+	lang,
 }: RichTextEditorProps) => (
 	<LexicalComposer
 		initialConfig={{
@@ -185,6 +192,7 @@ export const RichTextEditor = ({
 				<RichTextPlugin
 					contentEditable={
 						<ContentEditable
+							lang={lang}
 							aria-label={ariaLabel}
 							aria-placeholder={placeholder}
 							data-testid="compose-body"

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

@@ -68,9 +68,9 @@ const INITIAL_STATE: ToolbarState = {
 
 export interface RichTextToolbarProps {
 	/**
-	 * Pinned to the right of the strip, outside the part that scrolls. The mode
-	 * toggle rides here, and it is the last element in the toolbar's DOM so one
-	 * Shift+Tab out of the body reaches it.
+	 * Pinned to the right of the strip, outside the part that scrolls. The
+	 * language chip and the mode toggle ride here, in that order, so one
+	 * Shift+Tab out of the body reaches the toggle and two reach the chip.
 	 */
 	trailing?: React.ReactNode;
 }
@@ -212,7 +212,11 @@ export const RichTextToolbar = ({ trailing }: RichTextToolbarProps) => {
 						<Redo2 className={`size-4 ${state.canRedo ? "" : "opacity-40"}`} />
 					</ToolbarButton>
 				</div>
-				{trailing && <div className="ml-auto shrink-0">{trailing}</div>}
+				{trailing && (
+					<div className="ml-auto flex shrink-0 items-center gap-1">
+						{trailing}
+					</div>
+				)}
 			</div>
 			{linkDraft !== null && (
 				<div className="flex items-center gap-2 border-t border-line px-3 py-1.5">

package/src/components/use-compose-language.ts

@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { detectComposeLanguage } from "../lib/detect-compose-language.js";
+
+/**
+ * Where the composer's current language came from. A value rather than an
+ * `isManual` flag: the chip reads it, and the spellchecker slice (#692) will
+ * want to know whether a language was chosen or guessed before it spends a
+ * worker on it.
+ */
+export type ComposeLanguageSource = "account" | "detected" | "manual";
+
+export interface ComposeLanguageState {
+	language: string;
+	source: ComposeLanguageSource;
+}
+
+export interface ComposeLanguageControl extends ComposeLanguageState {
+	/** The user picked this language. Detection stops for the rest of the message. */
+	choose: (tag: string) => void;
+}
+
+export interface UseComposeLanguageInput {
+	/** The account's configured tags, most-used first. The first is the default. */
+	languages: readonly string[];
+	/** The body as plain text. The quoted reply block is not part of it. */
+	text: string;
+	/**
+	 * The tag a reopened draft was written under. Treated as a choice already
+	 * made: it is the only record of a manual pick a draft carries, and detection
+	 * would otherwise overwrite it the moment the draft came back.
+	 */
+	initialLanguage?: string;
+	debounceMs?: number;
+}
+
+/**
+ * The composer's language while a message is being written: the account default
+ * until detection has enough text to say otherwise, and whatever the user
+ * picked from the moment they pick one.
+ */
+export const useComposeLanguage = ({
+	languages,
+	text,
+	initialLanguage,
+	debounceMs = 400,
+}: UseComposeLanguageInput): ComposeLanguageControl => {
+	// A caller building this array inline hands over a new identity on every
+	// render, and an effect keyed on it would restart its timer forever.
+	const candidateKey = languages.join(",");
+	const candidates = useMemo(
+		() => candidateKey.split(",").filter((tag) => tag !== ""),
+		[candidateKey],
+	);
+	const accountDefault = candidates[0] ?? "en";
+
+	const [state, setState] = useState<ComposeLanguageState>(() =>
+		initialLanguage
+			? { language: initialLanguage, source: "manual" }
+			: { language: accountDefault, source: "account" },
+	);
+
+	const settled = state.source === "manual";
+
+	useEffect(() => {
+		if (settled) return;
+		const timer = setTimeout(() => {
+			const detected = detectComposeLanguage(text, candidates);
+			const language = detected ?? accountDefault;
+			const source: ComposeLanguageSource = detected ? "detected" : "account";
+			setState((current) => {
+				if (current.source === "manual") return current;
+				if (current.language === language && current.source === source) {
+					return current;
+				}
+				return { language, source };
+			});
+		}, debounceMs);
+		return () => clearTimeout(timer);
+	}, [settled, text, candidates, accountDefault, debounceMs]);
+
+	const choose = useCallback((tag: string) => {
+		setState({ language: tag, source: "manual" });
+	}, []);
+
+	return { ...state, choose };
+};

package/src/index.ts

@@ -136,6 +136,10 @@ export {
 	type ComposeMode,
 	composeModeLabels,
 } from "./components/compose-form-shell.js";
+export {
+	ComposeLanguageSetting,
+	type ComposeLanguageSettingProps,
+} from "./components/compose-language-setting.js";
 export {
 	DangerZoneSection,
 	type DangerZoneSectionProps,
@@ -658,6 +662,18 @@ export {
 	type CidResolver,
 } from "./lib/cid-resolver.js";
 export { cn } from "./lib/cn.js";
+export {
+	browserSpellcheckHelp,
+	COMPOSE_LANGUAGE_OPTIONS,
+	type ComposeLanguageOption,
+	defaultComposeLanguages,
+	detectionCodeFor,
+	languageChipLabel,
+	languageLabel,
+	primaryLanguageSubtag,
+	unwrapLanguage,
+	wrapWithLanguage,
+} from "./lib/compose-language.js";
 export { generateLayoutClampCSS } from "./lib/email-layout-clamp.js";
 export {
 	classifyEmailRenderTreatment,

package/src/lib/adopted-html.test.ts

@@ -55,6 +55,15 @@ describe("sanitizeAdoptedHtml", () => {
 		assert.match(result, /<div>first<\/div><div>second<\/div>/);
 	});
 
+	it("keeps the language and direction a passage was written in", () => {
+		const result = sanitizeAdoptedHtml(
+			'<p>Hoi</p><p lang="fr">Bonjour</p><p dir="rtl" lang="ar">مرحبا</p>',
+		);
+		assert.match(result, /<p lang="fr">Bonjour<\/p>/);
+		assert.match(result, /lang="ar"/);
+		assert.match(result, /dir="rtl"/);
+	});
+
 	it("drops script, style and the presentation a receiving client rewrites", () => {
 		const result = sanitizeAdoptedHtml(
 			[

package/src/lib/adopted-html.ts

@@ -46,7 +46,19 @@ const ADOPTED_TAGS = [
 	"img",
 ];
 
-const ADOPTED_ATTR = ["href", "src", "alt", "colspan", "rowspan"];
+// `lang` and `dir` are structure, not presentation: they are what a recipient's
+// client and every screen reader read the language and the writing direction
+// off, and they are what keeps a quoted passage in another language marked as
+// one inside a message written in this one (#686).
+const ADOPTED_ATTR = [
+	"href",
+	"src",
+	"alt",
+	"colspan",
+	"rowspan",
+	"lang",
+	"dir",
+];
 
 const LINK_SCHEMES = /^(?:https?:|mailto:)/i;
 const IMAGE_SCHEMES = /^(?:https:|data:image\/)/i;

package/src/lib/compose-language.test.ts

@@ -0,0 +1,193 @@
+import assert from "node:assert/strict";
+import { before, describe, it } from "node:test";
+import { data } from "franc-min/data.js";
+import { JSDOM } from "jsdom";
+import {
+	browserSpellcheckHelp,
+	COMPOSE_LANGUAGE_OPTIONS,
+	defaultComposeLanguages,
+	detectionCodeFor,
+	languageChipLabel,
+	languageLabel,
+	unwrapLanguage,
+	wrapWithLanguage,
+} from "./compose-language.js";
+
+before(() => {
+	const dom = new JSDOM("");
+	globalThis.DOMParser = dom.window.DOMParser;
+});
+
+describe("detectionCodeFor", () => {
+	it("resolves a region through its language", () => {
+		assert.equal(detectionCodeFor("en-GB"), "eng");
+		assert.equal(detectionCodeFor("nl"), "nld");
+	});
+
+	it("declines a language nothing can detect", () => {
+		assert.equal(detectionCodeFor("ja"), null);
+	});
+});
+
+describe("languageChipLabel", () => {
+	it("drops the region", () => {
+		assert.equal(languageChipLabel("en-GB"), "EN");
+	});
+});
+
+describe("languageLabel", () => {
+	it("names a language in its own words", () => {
+		assert.equal(languageLabel("nl"), "Nederlands");
+		assert.equal(languageLabel("de"), "Deutsch");
+	});
+
+	it("falls back to the tag the platform cannot name", () => {
+		assert.equal(languageLabel("qq"), "qq");
+	});
+
+	it("does not throw on a tag a hand-edited setting could hold", () => {
+		assert.equal(languageLabel("not a tag"), "not a tag");
+		assert.equal(languageLabel(""), "");
+	});
+});
+
+describe("defaultComposeLanguages", () => {
+	it("follows the browser and always offers a second row", () => {
+		assert.deepEqual(defaultComposeLanguages(["nl-NL", "nl", "en-US"]), [
+			"nl",
+			"en",
+		]);
+	});
+
+	it("skips a language detection has no table for", () => {
+		assert.deepEqual(defaultComposeLanguages(["ja-JP", "de-DE"]), ["de", "en"]);
+	});
+
+	it("falls back to English when the browser offers nothing usable", () => {
+		assert.deepEqual(defaultComposeLanguages([]), ["en"]);
+	});
+});
+
+describe("browserSpellcheckHelp", () => {
+	it("names the setting Chrome keeps it under", () => {
+		const help = browserSpellcheckHelp(
+			"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36",
+		);
+		assert.match(help, /^Chrome checks every language/);
+	});
+
+	it("names macOS for Safari, not Chrome", () => {
+		const help = browserSpellcheckHelp(
+			"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15",
+		);
+		assert.match(help, /^macOS decides this/);
+	});
+
+	it("tells a Firefox user the setting is actually used", () => {
+		const help = browserSpellcheckHelp(
+			"Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0",
+		);
+		assert.match(help, /^Firefox uses this setting/);
+	});
+
+	it("names the keyboard on iOS, where every engine is WebKit", () => {
+		const help = browserSpellcheckHelp(
+			"Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/141.0.0.0 Mobile/15E148 Safari/604.1",
+		);
+		assert.match(help, /^On iPhone and iPad the keyboard/);
+	});
+
+	it("never claims the app changes the dictionary", () => {
+		for (const agent of ["Chrome/141", "Firefox/130", "Safari/605", "curl/8"]) {
+			assert.doesNotMatch(browserSpellcheckHelp(agent), /this app|we /i);
+		}
+	});
+});
+
+describe("wrapWithLanguage", () => {
+	it("puts the document under one tagged div", () => {
+		assert.equal(
+			wrapWithLanguage("<p>Hoi</p>", "nl"),
+			'<div lang="nl"><p>Hoi</p></div>',
+		);
+	});
+
+	it("leaves an empty document empty", () => {
+		assert.equal(wrapWithLanguage("", "nl"), "");
+	});
+
+	it("replaces the tag instead of nesting a second wrapper", () => {
+		const once = wrapWithLanguage("<p>Hoi</p>", "nl");
+		const twice = wrapWithLanguage(once, "de");
+		assert.equal(twice, '<div lang="de"><p>Hoi</p></div>');
+		assert.equal(wrapWithLanguage(twice, "de"), twice);
+	});
+
+	it("does not adopt a plain div the message happens to start with", () => {
+		const wrapped = wrapWithLanguage("<div>Hoi</div>", "nl");
+		assert.equal(wrapped, '<div lang="nl"><div>Hoi</div></div>');
+	});
+
+	it("cannot be talked out of the attribute by a hand-edited tag", () => {
+		const hostile = 'nl"><script>alert(1)</script><div lang="nl';
+		const parsed = new DOMParser().parseFromString(
+			wrapWithLanguage("<p>Hoi</p>", hostile),
+			"text/html",
+		);
+		assert.equal(parsed.querySelectorAll("script").length, 0);
+		assert.equal(parsed.body.children.length, 1);
+		assert.equal(parsed.body.children[0]?.getAttribute("lang"), hostile);
+	});
+});
+
+describe("unwrapLanguage", () => {
+	it("returns the document the editor should reopen on", () => {
+		assert.deepEqual(unwrapLanguage('<div lang="nl"><p>Hoi</p></div>'), {
+			html: "<p>Hoi</p>",
+			language: "nl",
+		});
+	});
+
+	it("leaves an untagged document alone", () => {
+		assert.deepEqual(unwrapLanguage("<p>Hoi</p>"), {
+			html: "<p>Hoi</p>",
+			language: null,
+		});
+	});
+
+	it("keeps a tagged passage that is not the whole message", () => {
+		const html = '<p>Hoi</p><p lang="fr">Bonjour</p>';
+		assert.deepEqual(unwrapLanguage(html), { html, language: null });
+	});
+
+	it("round-trips what the wrapper wrote", () => {
+		const html = '<p>Hoi</p><p lang="fr">Bonjour</p>';
+		assert.deepEqual(unwrapLanguage(wrapWithLanguage(html, "nl")), {
+			html,
+			language: "nl",
+		});
+	});
+});
+
+describe("COMPOSE_LANGUAGE_OPTIONS", () => {
+	it("offers no tag twice", () => {
+		const tags = COMPOSE_LANGUAGE_OPTIONS.map((option) => option.tag);
+		assert.equal(new Set(tags).size, tags.length);
+	});
+
+	/**
+	 * Read against `franc-min`'s own trigram tables rather than against the list
+	 * that produced them: a code the detector has never heard of is a menu row
+	 * that can be picked by hand and never detected, and a table built the same
+	 * way as the list would agree with it and prove nothing.
+	 */
+	it("offers only languages the detector has a table for", () => {
+		const known = new Set(
+			Object.values(data).flatMap((byLanguage) => Object.keys(byLanguage)),
+		);
+		const unknown = COMPOSE_LANGUAGE_OPTIONS.filter(
+			(option) => !known.has(option.detectionCode),
+		);
+		assert.deepEqual(unknown, []);
+	});
+});

package/src/lib/compose-language.ts

@@ -0,0 +1,206 @@
+/**
+ * The composer's language: which BCP 47 tag a message is being written in,
+ * what a browser will and will not do with it, and how it travels on the
+ * message.
+ *
+ * A page cannot choose the browser's spellcheck dictionary. Chrome and Safari
+ * ignore `lang` outright; Firefox reads it but only picks among dictionaries
+ * the user already installed. Nothing here claims otherwise — what the tag buys
+ * is a Firefox dictionary when one is present, a screen-reader voice, and a
+ * message the recipient's client can read the language off. See issue #686.
+ */
+
+/**
+ * A language the composer offers, and the ISO 639-3 code `franc-min` knows it
+ * by. The two are separate alphabets: the tag is what goes on the document and
+ * on the wire, the code is what the detector's trigram tables are keyed on.
+ *
+ * The list is bounded by what `franc-min` can detect — a language it has no
+ * table for could be picked by hand but never detected, which is a menu entry
+ * that behaves differently from its neighbours for no reason a user can see.
+ */
+export interface ComposeLanguageOption {
+	tag: string;
+	detectionCode: string;
+}
+
+export const COMPOSE_LANGUAGE_OPTIONS: readonly ComposeLanguageOption[] = [
+	{ tag: "ar", detectionCode: "arb" },
+	{ tag: "az", detectionCode: "azj" },
+	{ tag: "be", detectionCode: "bel" },
+	{ tag: "bg", detectionCode: "bul" },
+	{ tag: "bs", detectionCode: "bos" },
+	{ tag: "cs", detectionCode: "ces" },
+	{ tag: "de", detectionCode: "deu" },
+	{ tag: "en", detectionCode: "eng" },
+	{ tag: "es", detectionCode: "spa" },
+	{ tag: "fa", detectionCode: "pes" },
+	{ tag: "fr", detectionCode: "fra" },
+	{ tag: "ha", detectionCode: "hau" },
+	{ tag: "hi", detectionCode: "hin" },
+	{ tag: "hr", detectionCode: "hrv" },
+	{ tag: "hu", detectionCode: "hun" },
+	{ tag: "id", detectionCode: "ind" },
+	{ tag: "ig", detectionCode: "ibo" },
+	{ tag: "it", detectionCode: "ita" },
+	{ tag: "jv", detectionCode: "jav" },
+	{ tag: "kk", detectionCode: "kaz" },
+	{ tag: "mr", detectionCode: "mar" },
+	{ tag: "ms", detectionCode: "zlm" },
+	{ tag: "ne", detectionCode: "npi" },
+	{ tag: "nl", detectionCode: "nld" },
+	{ tag: "pl", detectionCode: "pol" },
+	{ tag: "ps", detectionCode: "pbu" },
+	{ tag: "pt", detectionCode: "por" },
+	{ tag: "ro", detectionCode: "ron" },
+	{ tag: "ru", detectionCode: "rus" },
+	{ tag: "so", detectionCode: "som" },
+	{ tag: "sr", detectionCode: "srp" },
+	{ tag: "su", detectionCode: "sun" },
+	{ tag: "sv", detectionCode: "swe" },
+	{ tag: "sw", detectionCode: "swh" },
+	{ tag: "tl", detectionCode: "tgl" },
+	{ tag: "tr", detectionCode: "tur" },
+	{ tag: "uk", detectionCode: "ukr" },
+	{ tag: "ur", detectionCode: "urd" },
+	{ tag: "vi", detectionCode: "vie" },
+	{ tag: "yo", detectionCode: "yor" },
+	{ tag: "zu", detectionCode: "zul" },
+];
+
+/** The language subtag of a BCP 47 tag: `en` out of `en-GB`, lower-cased. */
+export const primaryLanguageSubtag = (tag: string): string =>
+	(tag.split("-")[0] ?? "").toLowerCase();
+
+const byPrimarySubtag = new Map(
+	COMPOSE_LANGUAGE_OPTIONS.map((option) => [option.tag, option]),
+);
+
+/**
+ * The detector code for a tag, or null when nothing can detect it. A region
+ * resolves through its language — no trigram table separates `en-GB` from
+ * `en-US`, and pretending one does would put a tag on the message the text
+ * never supported.
+ */
+export const detectionCodeFor = (tag: string): string | null =>
+	byPrimarySubtag.get(primaryLanguageSubtag(tag))?.detectionCode ?? null;
+
+const WELL_FORMED_TAG = /^[a-z]{2,3}(-[a-z0-9]{2,8})*$/i;
+
+/** The tag as the chip shows it: two or three letters, upper case. */
+export const languageChipLabel = (tag: string): string =>
+	primaryLanguageSubtag(tag).toUpperCase();
+
+/**
+ * The language's own name for itself — `Nederlands`, not `Dutch`. A menu of
+ * languages is read by someone who reads that language, and an endonym is the
+ * entry they recognise without translating it first. Falls back to the tag when
+ * the platform has no name for it.
+ */
+export const languageLabel = (tag: string): string => {
+	// `Intl.DisplayNames` throws a RangeError on anything that is not a
+	// well-formed tag, and a stored setting is text a user can have edited.
+	if (!WELL_FORMED_TAG.test(tag)) return tag;
+	const names = new Intl.DisplayNames([tag], {
+		type: "language",
+		fallback: "none",
+	});
+	const named = names.of(tag);
+	if (!named) return tag;
+	return named.charAt(0).toLocaleUpperCase(tag) + named.slice(1);
+};
+
+/**
+ * The languages an account writes in when it has not said. The browser already
+ * holds an ordered answer; `en` follows it, so a browser set to one language
+ * nothing can detect still leaves the chip something to show.
+ */
+export const defaultComposeLanguages = (
+	locales: readonly string[],
+): string[] => {
+	const known = locales.filter((locale) => detectionCodeFor(locale) !== null);
+	const tags = known.map(primaryLanguageSubtag);
+	const unique = [...new Set(tags)];
+	if (!unique.includes("en")) unique.push("en");
+	return unique;
+};
+
+/**
+ * The one sentence at the foot of the language menu naming where the browser
+ * keeps the setting that does fix spelling. A page cannot link to
+ * `chrome://settings/languages`, so it is text; and reading the user agent to
+ * name where a setting lives is not feature detection, because there is nothing
+ * to detect.
+ */
+export const browserSpellcheckHelp = (userAgent: string): string => {
+	if (/iPhone|iPad|iPod/.test(userAgent)) {
+		return "On iPhone and iPad the keyboard decides this. Add the language under Settings, then General, then Keyboard.";
+	}
+	if (/Edg\//.test(userAgent)) {
+		return "Edge checks every language you add under Settings, then Languages. Adding one there checks it alongside the others.";
+	}
+	if (/Firefox\//.test(userAgent)) {
+		return "Firefox uses this setting. Right-click the message to add a dictionary for it.";
+	}
+	if (/Chrome\/|Chromium\//.test(userAgent)) {
+		return "Chrome checks every language you add under Settings, then Languages. Adding one there checks it alongside the others.";
+	}
+	if (/Safari\//.test(userAgent)) {
+		return "macOS decides this under Keyboard, then Text Input, then Spelling. Automatic by Language covers every language enabled there.";
+	}
+	return "Your browser decides which dictionaries it checks. Add this language in its own language settings to have it spellchecked.";
+};
+
+const parseHtml = (html: string): Document =>
+	new DOMParser().parseFromString(html, "text/html");
+
+const singleRootElement = (body: HTMLElement): Element | null => {
+	const elements = [...body.children];
+	if (elements.length !== 1) return null;
+	const only = elements[0];
+	if (!only) return null;
+	const hasStrayText = [...body.childNodes].some(
+		(node) => node !== only && (node.textContent ?? "").trim() !== "",
+	);
+	return hasStrayText ? null : only;
+};
+
+/**
+ * The outgoing HTML under one `<div lang>`, so the recipient's client reads the
+ * language off the message rather than guessing it.
+ *
+ * Re-wrapping is idempotent: a document that already sits under a language
+ * wrapper has that wrapper's tag replaced. Autosave runs this on every keystroke
+ * batch, and a draft that gained a `<div>` per save would arrive nested forty
+ * deep.
+ */
+export const wrapWithLanguage = (html: string, tag: string): string => {
+	if (html === "") return "";
+	const document = parseHtml(html);
+	const existing = singleRootElement(document.body);
+	if (existing?.tagName === "DIV" && existing.hasAttribute("lang")) {
+		existing.setAttribute("lang", tag);
+		return document.body.innerHTML;
+	}
+	// Built through the DOM rather than by string concatenation: a stored
+	// setting is text a user can have edited, and a tag carrying a quote would
+	// otherwise close the attribute and put markup into the message.
+	const wrapper = document.createElement("div");
+	wrapper.setAttribute("lang", tag);
+	while (document.body.firstChild) wrapper.append(document.body.firstChild);
+	document.body.append(wrapper);
+	return document.body.innerHTML;
+};
+
+/** What `wrapWithLanguage` wrote, taken back apart for the editor to reopen on. */
+export const unwrapLanguage = (
+	html: string,
+): { html: string; language: string | null } => {
+	if (html === "") return { html, language: null };
+	const document = parseHtml(html);
+	const root = singleRootElement(document.body);
+	if (root?.tagName !== "DIV" || !root.hasAttribute("lang")) {
+		return { html, language: null };
+	}
+	return { html: root.innerHTML, language: root.getAttribute("lang") };
+};

package/src/lib/detect-compose-language.test.ts

@@ -0,0 +1,51 @@
+/**
+ * Detection restricted to the account's own languages. The restriction is the
+ * whole reason a 53 kB trigram table is good enough: `franc` scores 87.1% on
+ * one sentence over all 414 languages and 97.3% over six.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { detectComposeLanguage } from "./detect-compose-language.js";
+
+const DUTCH =
+	"Beste Anna, de vergadering van donderdag gaat niet door. Ik stuur je morgen een nieuw voorstel.";
+const ENGLISH =
+	"Hi Anna, Thursday's meeting is off. I will send you a new proposal tomorrow.";
+const GERMAN =
+	"Hallo Anna, die Besprechung am Donnerstag fällt aus. Ich schicke dir morgen einen neuen Vorschlag.";
+const FRENCH =
+	"Bonjour Anna, la réunion de jeudi est annulée. Je vous enverrai une nouvelle proposition demain.";
+
+const CANDIDATES = ["nl", "en", "de"];
+
+describe("detectComposeLanguage", () => {
+	it("picks each candidate out of the others", () => {
+		assert.equal(detectComposeLanguage(DUTCH, CANDIDATES), "nl");
+		assert.equal(detectComposeLanguage(ENGLISH, CANDIDATES), "en");
+		assert.equal(detectComposeLanguage(GERMAN, CANDIDATES), "de");
+	});
+
+	it("stays inside the candidate set", () => {
+		const detected = detectComposeLanguage(FRENCH, CANDIDATES);
+		assert.ok(detected === null || CANDIDATES.includes(detected));
+	});
+
+	it("declines a greeting line", () => {
+		assert.equal(detectComposeLanguage("Hoi Anna,", CANDIDATES), null);
+		assert.equal(detectComposeLanguage("   ", CANDIDATES), null);
+	});
+
+	it("declines when there is nothing to choose between", () => {
+		assert.equal(detectComposeLanguage(DUTCH, ["nl"]), null);
+		assert.equal(detectComposeLanguage(DUTCH, []), null);
+	});
+
+	it("ignores a configured language nothing can detect", () => {
+		assert.equal(detectComposeLanguage(DUTCH, ["nl", "ja"]), null);
+		assert.equal(detectComposeLanguage(DUTCH, ["nl", "ja", "en"]), "nl");
+	});
+
+	it("resolves a regional tag through its language", () => {
+		assert.equal(detectComposeLanguage(ENGLISH, ["nl", "en-GB"]), "en-GB");
+	});
+});