@remit/ui 0.0.100 → 0.0.102

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

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

@@ -0,0 +1,42 @@
+import { franc } from "franc-min";
+import { detectionCodeFor } from "./compose-language.js";
+
+/**
+ * Below this, detection is a coin toss — `franc-min` scores 90.7% at 20 to 45
+ * characters and drops off a cliff under that. A greeting line holds the
+ * account default instead.
+ */
+export const DETECTION_MIN_LENGTH = 20;
+
+/**
+ * The language of a body, chosen inside the account's own candidate set.
+ *
+ * The restriction is what makes a 53 kB trigram table good enough: `franc`
+ * scores 87.1% on one sentence over all 414 languages and 97.3% over six.
+ * Returns null when the text is too short, when there is nothing to choose
+ * between, or when the detector declines to answer.
+ *
+ * Kept apart from the hook that calls it so `franc-min` stays out of every
+ * chunk that only wants a language tag, and so this is testable as the pure
+ * function it is.
+ */
+export const detectComposeLanguage = (
+	text: string,
+	candidates: readonly string[],
+): string | null => {
+	const trimmed = text.trim();
+	if (trimmed.length < DETECTION_MIN_LENGTH) return null;
+
+	const tagByCode = new Map<string, string>();
+	for (const tag of candidates) {
+		const code = detectionCodeFor(tag);
+		if (code && !tagByCode.has(code)) tagByCode.set(code, tag);
+	}
+	if (tagByCode.size < 2) return null;
+
+	const detected = franc(trimmed, {
+		only: [...tagByCode.keys()],
+		minLength: DETECTION_MIN_LENGTH,
+	});
+	return tagByCode.get(detected) ?? null;
+};

package/src/rich-text.ts

@@ -1,13 +1,42 @@
 /**
- * The rich-text editor and nothing else. Its own entry point so an app can load
- * it on demand: reached through the package barrel it would land in whichever
- * chunk already imports `@remit/ui`, which is every screen.
+ * The compose writing surfaces and nothing else. Their own entry point so an
+ * app can load them on demand: reached through the package barrel they would
+ * land in whichever chunk already imports `@remit/ui`, which is every screen.
  */
+
+export {
+	ComposeLanguageChip,
+	type ComposeLanguageChipProps,
+} from "./components/compose-language-chip.js";
+export {
+	type ComposeBodyMode,
+	ComposeModeToggle,
+	type ComposeModeToggleProps,
+} from "./components/compose-mode-toggle.js";
+export {
+	PlainTextEditor,
+	type PlainTextEditorProps,
+} from "./components/plain-text-editor.js";
+export {
+	htmlToMarkdown,
+	markdownToHtml,
+} from "./components/rich-text-document.js";
 export {
 	RichTextEditor,
 	type RichTextEditorProps,
 } from "./components/rich-text-editor.js";
+export { COMPOSE_TRANSFORMERS } from "./components/rich-text-markdown.js";
 export {
 	EMPTY_RICH_TEXT,
 	type RichTextValue,
 } from "./components/rich-text-value.js";
+export {
+	type ComposeLanguageControl,
+	type ComposeLanguageSource,
+	type ComposeLanguageState,
+	useComposeLanguage,
+} from "./components/use-compose-language.js";
+export {
+	DETECTION_MIN_LENGTH,
+	detectComposeLanguage,
+} from "./lib/detect-compose-language.js";

package/src/tokens.css

@@ -38,6 +38,10 @@
 	--font-ui: var(--font-geist);
 	--font-sans: var(--font-ui);
 
+	/* The plain compose surface promises the characters that will be sent, and a
+	   pipe table in a proportional face is unaligned bars. Nothing downloaded. */
+	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+
 	/* surfaces & text */
 	--color-canvas: var(--canvas);
 	--color-surface: var(--surface);