@remit/ui 0.0.100 → 0.0.102

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

@@ -0,0 +1,155 @@
+import {
+	$convertFromMarkdownString,
+	$convertToMarkdownString,
+	type ElementTransformer,
+	isTableRowDivider,
+	TRANSFORMERS,
+	type Transformer,
+} from "@lexical/markdown";
+import {
+	$createTableCellNode,
+	$createTableNode,
+	$createTableRowNode,
+	$isTableCellNode,
+	$isTableNode,
+	$isTableRowNode,
+	TableCellHeaderStates,
+	TableCellNode,
+	TableNode,
+	TableRowNode,
+} from "@lexical/table";
+import { $isTextNode, type ElementNode, type LexicalNode } from "lexical";
+
+const TABLE_ROW = /^\|(.+)\|\s*$/;
+
+/**
+ * A cell is a document of its own, so its content goes through the same
+ * transformers. A newline or a bare pipe inside one would end the row early,
+ * which is the difference between a table and a wall of broken syntax.
+ */
+const exportCell = (cell: TableCellNode): string =>
+	$convertToMarkdownString(COMPOSE_TRANSFORMERS, cell)
+		.replace(/\n+/g, " ")
+		.replace(/\|/g, "\\|")
+		.trim();
+
+const splitRow = (line: string): string[] => {
+	const inner = line.trim().replace(/^\|/, "").replace(/\|$/, "");
+	const cells: string[] = [];
+	let current = "";
+	for (let index = 0; index < inner.length; index++) {
+		const character = inner[index];
+		if (character === "\\" && inner[index + 1] === "|") {
+			current += "|";
+			index++;
+			continue;
+		}
+		if (character === "|") {
+			cells.push(current);
+			current = "";
+			continue;
+		}
+		current += character;
+	}
+	cells.push(current);
+	return cells;
+};
+
+const $createCell = (text: string): TableCellNode => {
+	const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+	$convertFromMarkdownString(text.trim(), COMPOSE_TRANSFORMERS, cell);
+	return cell;
+};
+
+const $createRow = (texts: string[], columns: number): TableRowNode => {
+	const row = $createTableRowNode();
+	for (let index = 0; index < columns; index++) {
+		row.append($createCell(texts[index] ?? ""));
+	}
+	return row;
+};
+
+const columnsOf = (table: TableNode): number => {
+	const first = table.getFirstChild();
+	return $isTableRowNode(first) ? first.getChildrenSize() : 0;
+};
+
+const $markFirstRowAsHeader = (table: TableNode): void => {
+	const first = table.getFirstChild();
+	if (!$isTableRowNode(first)) return;
+	for (const cell of first.getChildren()) {
+		if (!$isTableCellNode(cell)) continue;
+		cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+	}
+};
+
+/**
+ * `@lexical/markdown` 0.49 exports `isTableRowDivider` but no table
+ * transformer, so the composer supplies one over `@lexical/table` nodes. One
+ * list drives Markdown export, Markdown import and the cell round trip, which
+ * is what keeps a table that left as pipes coming back as a table.
+ *
+ * Import runs a line at a time, each line arriving as a paragraph. A row
+ * appended to the table its predecessor left behind is how the rows join up.
+ * A divider carries no content of its own: it says the row above is a header.
+ */
+export const TABLE: ElementTransformer = {
+	dependencies: [TableNode, TableRowNode, TableCellNode],
+	export: (node: LexicalNode): string | null => {
+		if (!$isTableNode(node)) return null;
+		const lines: string[] = [];
+		for (const row of node.getChildren()) {
+			if (!$isTableRowNode(row)) continue;
+			const cells = row.getChildren().filter($isTableCellNode);
+			if (cells.length === 0) continue;
+			lines.push(`| ${cells.map(exportCell).join(" | ")} |`);
+			// GFM only reads a block of pipe rows as a table when a divider follows
+			// the first one, so it is written whether or not that row was a header.
+			// Without it a recipient sees the pipes and no table.
+			if (lines.length === 1) {
+				lines.push(`| ${cells.map(() => "---").join(" | ")} |`);
+			}
+		}
+		return lines.length === 0 ? null : lines.join("\n");
+	},
+	regExp: TABLE_ROW,
+	replace: (parentNode: ElementNode, children, match): void => {
+		const line = match[0].trimEnd();
+		const previous = parentNode.getPreviousSibling();
+
+		if (isTableRowDivider(line)) {
+			if ($isTableNode(previous)) {
+				$markFirstRowAsHeader(previous);
+				parentNode.remove();
+				return;
+			}
+			// A divider with no rows above it is not a table. The import emptied
+			// this line's text node before calling here, so declining the match
+			// would drop the characters rather than leave them alone.
+			const first = children[0];
+			if ($isTextNode(first)) first.setTextContent(line);
+			return;
+		}
+
+		const texts = splitRow(line);
+		if ($isTableNode(previous)) {
+			previous.append($createRow(texts, columnsOf(previous)));
+			parentNode.remove();
+			return;
+		}
+
+		const table = $createTableNode();
+		table.append($createRow(texts, texts.length));
+		parentNode.replace(table);
+	},
+	type: "element",
+};
+
+/**
+ * The composer's own transformer set. Everything that reads or writes Markdown
+ * in compose uses this one list — the plain alternative on a rich send, the
+ * body of a plain send, the down-conversion of a paste, and both directions of
+ * the mode switch — so the conversions are inverses rather than four
+ * independent best efforts.
+ */
+export const COMPOSE_TRANSFORMERS: Transformer[] = [TABLE, ...TRANSFORMERS];

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

@@ -38,7 +38,7 @@ const ToolbarButton = ({
 		title={title}
 		aria-label={title}
 		aria-pressed={isActive}
-		className={`p-1.5 rounded transition-colors ${
+		className={`inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded transition-colors ${
 			isActive
 				? "text-fg bg-accent-2-soft"
 				: "text-fg-muted hover:text-fg hover:bg-surface-raised"
@@ -66,7 +66,16 @@ const INITIAL_STATE: ToolbarState = {
 	canRedo: false,
 };
 
-export const RichTextToolbar = () => {
+export interface RichTextToolbarProps {
+	/**
+	 * 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;
+}
+
+export const RichTextToolbar = ({ trailing }: RichTextToolbarProps) => {
 	const [editor] = useLexicalComposerContext();
 	const [state, setState] = useState<ToolbarState>(INITIAL_STATE);
 	const [linkDraft, setLinkDraft] = useState<string | null>(null);
@@ -146,51 +155,68 @@ export const RichTextToolbar = () => {
 	};
 
 	return (
-		<div className="border-b border-line">
-			<div className="flex items-center gap-0.5 px-3 py-1">
-				<ToolbarButton
-					isActive={state.bold}
-					onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")}
-					title="Bold (Ctrl+B)"
-				>
-					<Bold className="size-4" />
-				</ToolbarButton>
-				<ToolbarButton
-					isActive={state.italic}
-					onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")}
-					title="Italic (Ctrl+I)"
-				>
-					<Italic className="size-4" />
-				</ToolbarButton>
-				<ToolbarButton
-					isActive={state.link !== null}
-					onClick={() => setLinkDraft(state.link ?? "https://")}
-					title="Link (Ctrl+K)"
-				>
-					<Link className="size-4" />
-				</ToolbarButton>
-				<ToolbarButton
-					isActive={state.quote}
-					onClick={toggleQuote}
-					title="Blockquote"
-				>
-					<Quote className="size-4" />
-				</ToolbarButton>
-				<div className="mx-1.5 h-4 w-px bg-line" />
-				<ToolbarButton
-					isActive={false}
-					onClick={() => editor.dispatchCommand(UNDO_COMMAND, undefined)}
-					title="Undo (Ctrl+Z)"
-				>
-					<Undo2 className={`size-4 ${state.canUndo ? "" : "opacity-40"}`} />
-				</ToolbarButton>
-				<ToolbarButton
-					isActive={false}
-					onClick={() => editor.dispatchCommand(REDO_COMMAND, undefined)}
-					title="Redo (Ctrl+Y)"
+		// The toolbar and the body share one scroller, so twenty lines of typing
+		// would carry the toolbar off the top of the compose window with them.
+		<div className="sticky top-0 z-10 border-b border-line bg-canvas">
+			<div className="flex items-center gap-2 px-3 py-1">
+				{/* `min-w-0`, without which a flex child refuses to shrink below its
+				    content and pushes the trailing control off the edge instead of
+				    scrolling. */}
+				<div
+					data-testid="compose-format-cluster"
+					className="flex min-w-0 items-center gap-0.5 overflow-x-auto"
 				>
-					<Redo2 className={`size-4 ${state.canRedo ? "" : "opacity-40"}`} />
-				</ToolbarButton>
+					<ToolbarButton
+						isActive={state.bold}
+						onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")}
+						title="Bold (Ctrl+B)"
+					>
+						<Bold className="size-4" />
+					</ToolbarButton>
+					<ToolbarButton
+						isActive={state.italic}
+						onClick={() =>
+							editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
+						}
+						title="Italic (Ctrl+I)"
+					>
+						<Italic className="size-4" />
+					</ToolbarButton>
+					<ToolbarButton
+						isActive={state.link !== null}
+						onClick={() => setLinkDraft(state.link ?? "https://")}
+						title="Link (Ctrl+K)"
+					>
+						<Link className="size-4" />
+					</ToolbarButton>
+					<ToolbarButton
+						isActive={state.quote}
+						onClick={toggleQuote}
+						title="Blockquote"
+					>
+						<Quote className="size-4" />
+					</ToolbarButton>
+					<div className="mx-1.5 h-4 w-px shrink-0 bg-line" />
+					<ToolbarButton
+						isActive={false}
+						onClick={() => editor.dispatchCommand(UNDO_COMMAND, undefined)}
+						title="Undo (Ctrl+Z)"
+					>
+						<Undo2 className={`size-4 ${state.canUndo ? "" : "opacity-40"}`} />
+					</ToolbarButton>
+					<ToolbarButton
+						isActive={false}
+						onClick={() => editor.dispatchCommand(REDO_COMMAND, undefined)}
+						title="Redo (Ctrl+Y)"
+					>
+						<Redo2 className={`size-4 ${state.canRedo ? "" : "opacity-40"}`} />
+					</ToolbarButton>
+				</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/rich-text-value.ts

@@ -3,12 +3,22 @@
  * not the editor's own JSON, which changes shape between Lexical versions.
  * `text` is the plain alternative, as Markdown over the same document.
  *
+ * `formatting` is the inventory of node types and text formats in the document
+ * that plain text cannot carry, sorted, empty for a document of ordinary
+ * paragraphs. It is reported rather than reduced to a flag so the caller can
+ * both decide and say what is at stake.
+ *
  * Kept apart from the editor so a caller can name the shape without pulling
  * the editor, and its dependencies, out of their own chunk.
  */
 export interface RichTextValue {
 	html: string;
 	text: string;
+	formatting: readonly string[];
 }
 
-export const EMPTY_RICH_TEXT: RichTextValue = { html: "", text: "" };
+export const EMPTY_RICH_TEXT: RichTextValue = {
+	html: "",
+	text: "",
+	formatting: [],
+};

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, []);
+	});
+});