@remit/ui 0.0.113 → 0.0.115

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { expect, userEvent, waitFor } from "storybook/test";
 import { sanitizeAdoptedHtml } from "../lib/adopted-html.js";
 import { ComposeLanguageChip } from "./compose-language-chip.js";
@@ -295,6 +295,12 @@ const staleSpellcheck: SpellcheckOptions = {
 				),
 			});
 		},
+		suggest: (request) =>
+			Promise.resolve({
+				requestId: request.requestId,
+				word: request.word,
+				suggestions: [],
+			}),
 		close: () => {},
 	}),
 };
@@ -357,10 +363,8 @@ export const SpellcheckMarks: Story = {
 		);
 
 		// The word the caret sits in is left alone until the writer moves on.
-		await userEvent.click(editable);
-		const line = editable.querySelector<HTMLElement>("[data-lexical-text]");
-		const characters = line?.firstChild ?? null;
-		canvasElement.ownerDocument.getSelection()?.setPosition(characters, 17);
+		editable.focus();
+		caretTo(editable, 17);
 
 		await waitFor(
 			() =>
@@ -406,6 +410,504 @@ export const SpellcheckStaleAnswer: Story = {
 	},
 };
 
+const MISSPELT_MESSAGE = [
+	"Ths is the agenda for tomorow.",
+	"I attachd the budgt figures and the meetign notes,",
+	"and will confrm the schedual seperately.",
+].join(" ");
+
+/**
+ * The worker again, with the suggestions held back long enough to see the menu
+ * open without them. A slow engine is the normal case, not the exception: the
+ * menu is up on the click and the rows arrive after it.
+ */
+const slowSuggestions = (
+	delayMs: number,
+	onAddWord?: (word: string) => void,
+): SpellcheckOptions => ({
+	onAddWord,
+	provider: async (language) => {
+		const provider = await openSpellcheckWorker(language);
+		if (!provider) return null;
+		return {
+			...provider,
+			suggest: (request) =>
+				new Promise((resolve) => {
+					setTimeout(() => resolve(provider.suggest(request)), delayMs);
+				}),
+		};
+	},
+});
+
+const markRect = (editable: HTMLElement, word: string): DOMRect => {
+	for (const range of spellMarks(editable)) {
+		const text = range.startContainer.textContent ?? "";
+		if (text.slice(range.startOffset, range.endOffset) !== word) continue;
+		return (range as Range).getBoundingClientRect();
+	}
+	throw new Error(`"${word}" carries no mark`);
+};
+
+const centreOf = (box: DOMRect) => ({
+	clientX: box.left + box.width / 2,
+	clientY: box.top + box.height / 2,
+});
+
+interface Press {
+	readonly pointerType?: string;
+	readonly travel?: number;
+	readonly button?: number;
+}
+
+const pressDownOn = (
+	editable: HTMLElement,
+	word: string,
+	{ pointerType = "mouse", button = 0 }: Press = {},
+): void => {
+	editable.dispatchEvent(
+		new PointerEvent("pointerdown", {
+			bubbles: true,
+			pointerType,
+			button,
+			...centreOf(markRect(editable, word)),
+		}),
+	);
+};
+
+const pressUpOn = (
+	editable: HTMLElement,
+	word: string,
+	{ pointerType = "mouse", travel = 0, button = 0 }: Press = {},
+): void => {
+	const at = centreOf(markRect(editable, word));
+	editable.dispatchEvent(
+		new PointerEvent("pointerup", {
+			bubbles: true,
+			pointerType,
+			button,
+			...at,
+			clientX: at.clientX + travel,
+		}),
+	);
+};
+
+const pressOn = (editable: HTMLElement, word: string, press: Press = {}) => {
+	pressDownOn(editable, word, press);
+	pressUpOn(editable, word, press);
+};
+
+const tapOn = (editable: HTMLElement, word: string): void =>
+	pressOn(editable, word, { pointerType: "touch" });
+
+const clickOn = (editable: HTMLElement, word: string): void =>
+	pressOn(editable, word);
+
+const caretTo = (editable: HTMLElement, offset: number): void => {
+	const line = editable.querySelector<HTMLElement>("[data-lexical-text]");
+	editable.ownerDocument
+		.getSelection()
+		?.setPosition(line?.firstChild ?? null, offset);
+};
+
+const textOf = (editable: HTMLElement): string =>
+	editable.querySelector<HTMLElement>("[data-lexical-text]")?.textContent ?? "";
+
+/**
+ * The caret the browser would have put down under the press. Storybook's events
+ * are dispatched rather than trusted, so none of them move the caret on their
+ * own.
+ */
+const caretInto = (editable: HTMLElement, word: string): void =>
+	caretTo(editable, textOf(editable).indexOf(word) + 1);
+
+const caretToEnd = (editable: HTMLElement): void =>
+	caretTo(editable, textOf(editable).length);
+
+/**
+ * The desktop popover portals to the document body, clear of whatever
+ * ancestor would otherwise clip it, so the menu and its rows are found
+ * against the iframe document rather than `canvasElement` — the sheet below
+ * the desktop gate stays inside `canvasElement`, and this still reaches it
+ * there too.
+ */
+const menuRows = (
+	canvasElement: HTMLElement,
+	testId: string,
+): HTMLElement[] => [
+	...canvasElement.ownerDocument.body.querySelectorAll<HTMLElement>(
+		`[data-testid=${testId}]`,
+	),
+];
+
+const spellNode = (
+	canvasElement: HTMLElement,
+	selector: string,
+): Element | null => canvasElement.ownerDocument.body.querySelector(selector);
+
+/**
+ * The correction menu over a marked word: up on the click with rows standing in
+ * for suggestions that have not arrived, filled when they do, and one undo away
+ * from the word that was there before.
+ */
+export const SpellcheckSuggestions: Story = {
+	name: "Spellcheck suggestions",
+	args: {
+		initialHtml: `<p>${MISSPELT}</p>`,
+		lang: "en",
+		spellcheck: slowSuggestions(600),
+	},
+	play: async ({ canvasElement }) => {
+		const editable = writingSurface(canvasElement);
+		await waitFor(() => expect(spellMarks(editable).length).toBe(3), {
+			timeout: 5000,
+		});
+
+		clickOn(editable, "Ths");
+		await waitFor(() =>
+			expect(spellNode(canvasElement, "[data-testid=spell-menu]")).toBeTruthy(),
+		);
+		await expect(
+			menuRows(canvasElement, "spell-suggestion-skeleton"),
+		).toHaveLength(3);
+
+		await waitFor(
+			() =>
+				expect(
+					menuRows(canvasElement, "spell-suggestion").map(
+						(row) => row.textContent,
+					),
+				).toEqual(["The", "This", "Than", "That", "Them"]),
+			{ timeout: 5000 },
+		);
+
+		const [first] = menuRows(canvasElement, "spell-suggestion");
+		if (!first) throw new Error("no suggestion to pick");
+		await userEvent.click(first);
+
+		await expect(editable.textContent).toBe(
+			MISSPELT.replace("Ths report", "The report"),
+		);
+		await waitFor(() => expect(spellMarks(editable).length).toBe(2), {
+			timeout: 5000,
+		});
+
+		editable.focus();
+		await userEvent.keyboard("{Control>}z{/Control}");
+		await waitFor(() => expect(editable.textContent).toBe(MISSPELT), {
+			timeout: 5000,
+		});
+	},
+};
+
+/**
+ * A misspelt word at the right edge of a narrow, `overflow-hidden` editor —
+ * the compose body's own shape (#731). The menu portals clear of that
+ * ancestor rather than being clipped by it, and it stays inside the viewport
+ * rather than running past the container's right edge and taking the page's
+ * own scrollbar with it.
+ */
+export const SpellcheckNearRightEdge: Story = {
+	name: "Spellcheck menu at the right edge of a narrow editor",
+	args: {
+		initialHtml: `<p>${MISSPELT_MESSAGE}</p>`,
+		lang: "en",
+		spellcheck: workerSpellcheck,
+	},
+	decorators: [
+		(Story) => (
+			<div
+				data-testid="body-area"
+				className="flex h-[260px] w-[320px] flex-col overflow-hidden rounded-md border border-line bg-canvas"
+			>
+				<Story />
+			</div>
+		),
+	],
+	play: async ({ canvasElement }) => {
+		const editable = writingSurface(canvasElement);
+		const frame = canvasElement.querySelector<HTMLElement>(
+			"[data-testid=body-area]",
+		);
+		if (!frame) throw new Error("the narrow frame is not mounted");
+
+		await waitFor(
+			() => expect(spellMarks(editable).length).toBeGreaterThan(0),
+			{
+				timeout: 5000,
+			},
+		);
+
+		clickOn(editable, "confrm");
+		const menu = await waitFor(() => {
+			const found = spellNode(canvasElement, "[data-testid=spell-menu]");
+			if (!found) throw new Error("the menu has not opened yet");
+			return found;
+		});
+
+		// Portalled clear of the clipping ancestor rather than cut by it.
+		await expect(frame.contains(menu)).toBe(false);
+
+		const box = menu.getBoundingClientRect();
+		await expect(box.left).toBeGreaterThanOrEqual(0);
+		await expect(box.right).toBeLessThanOrEqual(window.innerWidth);
+
+		await expect(
+			spellNode(canvasElement, "[data-testid=spell-ignore]")?.textContent,
+		).toBe("Ignore for now");
+	},
+};
+
+/**
+ * Ignoring a word takes its marks off for as long as the composer is open, and
+ * later passes over the same text leave it alone. Nothing is written down: the
+ * next composer marks it again.
+ */
+export const SpellcheckSessionIgnore: Story = {
+	name: "Spellcheck ignores a word for the session",
+	args: {
+		initialHtml: `<p>${MISSPELT}</p>`,
+		lang: "en",
+		spellcheck: workerSpellcheck,
+	},
+	play: async ({ canvasElement }) => {
+		const editable = writingSurface(canvasElement);
+		await waitFor(() => expect(spellMarks(editable).length).toBe(3), {
+			timeout: 5000,
+		});
+
+		clickOn(editable, "attachd");
+		const [ignore] = await waitFor(() => {
+			const rows = menuRows(canvasElement, "spell-ignore");
+			expect(rows).toHaveLength(1);
+			return rows;
+		});
+		if (!ignore) throw new Error("the menu offers no way to ignore");
+		await userEvent.click(ignore);
+
+		await waitFor(() => expect(spellMarks(editable).length).toBe(2));
+
+		// Typed onto the end rather than clicked into: a click on this surface is
+		// now how the corrections open, and it would take the keyboard with it.
+		editable.focus();
+		caretToEnd(editable);
+		await userEvent.keyboard(" Attachd again.");
+		await waitFor(
+			() =>
+				expect(
+					spellMarks(editable).filter((range) => {
+						const text = range.startContainer.textContent ?? "";
+						return (
+							text.slice(range.startOffset, range.endOffset).toLowerCase() ===
+							"attachd"
+						);
+					}),
+				).toHaveLength(0),
+			{ timeout: 5000 },
+		);
+	},
+};
+
+/**
+ * A plain left click is what opens the corrections: a tablet has no right button
+ * and nothing should be hidden behind one. The caret the click puts down is
+ * reading rather than writing, so the squiggle it landed on stays where it is —
+ * clicking a marked word must not be what unmarks it. The next key is the writer
+ * back at the text, and the word under the caret goes quiet again.
+ */
+export const SpellcheckClickOpensCorrections: Story = {
+	name: "Spellcheck opens on a click",
+	args: {
+		initialHtml: `<p>${MISSPELT}</p>`,
+		lang: "en",
+		spellcheck: workerSpellcheck,
+	},
+	play: async ({ canvasElement }) => {
+		const editable = writingSurface(canvasElement);
+		const marked: [number, number][] = [
+			[0, 3],
+			[14, 18],
+			[44, 51],
+		];
+		await waitFor(() => expect(spellMarkOffsets(editable)).toEqual(marked), {
+			timeout: 5000,
+		});
+
+		editable.focus();
+		pressDownOn(editable, "redy");
+		caretInto(editable, "redy");
+		pressUpOn(editable, "redy");
+
+		await waitFor(() =>
+			expect(
+				spellNode(canvasElement, "[data-testid=spell-word]")?.textContent,
+			).toBe("redy"),
+		);
+		// Long enough for the caret the click put down to have been read and
+		// another checking pass to have gone by. It is still not what unmarks the
+		// word: this is the writer looking at the corrections for it.
+		await new Promise((rested) => setTimeout(rested, 600));
+		await expect(spellMarkOffsets(editable)).toEqual(marked);
+
+		await userEvent.keyboard("{Escape}");
+		await waitFor(() =>
+			expect(spellNode(canvasElement, "[data-testid=spell-menu]")).toBeNull(),
+		);
+
+		caretInto(editable, "redy");
+		editable.dispatchEvent(
+			new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }),
+		);
+		await waitFor(
+			() =>
+				expect(spellMarkOffsets(editable)).toEqual([
+					[0, 3],
+					[44, 51],
+				]),
+			{ timeout: 5000 },
+		);
+	},
+};
+
+/**
+ * The same rows below the desktop gate: a tap in a marked word raises the sheet
+ * rather than a popover under the thumb that opened it.
+ */
+export const SpellcheckOnTouch: Story = {
+	name: "Spellcheck corrections on a phone",
+	globals: { viewport: { value: "mobile" } },
+	args: {
+		initialHtml: `<p>${MISSPELT}</p>`,
+		lang: "en",
+		spellcheck: workerSpellcheck,
+	},
+	decorators: [
+		(Story) => (
+			<div
+				data-testid="body-area"
+				className="relative flex h-[560px] w-[360px] flex-col overflow-hidden rounded-md border border-line bg-canvas"
+			>
+				<Story />
+			</div>
+		),
+	],
+	play: async ({ canvasElement }) => {
+		const editable = writingSurface(canvasElement);
+		await waitFor(() => expect(spellMarks(editable).length).toBe(3), {
+			timeout: 5000,
+		});
+
+		tapOn(editable, "redy");
+		await waitFor(() =>
+			expect(spellNode(canvasElement, "[data-testid=spell-menu]")).toBeTruthy(),
+		);
+		await expect(
+			spellNode(canvasElement, "[aria-label='Close corrections']"),
+		).toBeTruthy();
+	},
+};
+
+/**
+ * The other things a pointer does over a marked word: dragging out a selection
+ * with either a finger or a mouse, and the right button, which belongs to the
+ * browser's own menu. A sheet over the top of any of them is the one thing they
+ * must not get. Closing the sheet hands the caret back.
+ */
+export const SpellcheckLeavesAPointerAlone: Story = {
+	...SpellcheckOnTouch,
+	name: "Spellcheck leaves a drag and the right button alone",
+	play: async ({ canvasElement }) => {
+		const editable = writingSurface(canvasElement);
+		await waitFor(() => expect(spellMarks(editable).length).toBe(3), {
+			timeout: 5000,
+		});
+		const menu = () => spellNode(canvasElement, "[data-testid=spell-menu]");
+
+		pressOn(editable, "redy", { pointerType: "touch", travel: 40 });
+		await expect(menu()).toBeNull();
+
+		pressOn(editable, "redy", { travel: 40 });
+		await expect(menu()).toBeNull();
+
+		pressOn(editable, "redy", { button: 2 });
+		await expect(menu()).toBeNull();
+
+		const contextMenu = new MouseEvent("contextmenu", {
+			bubbles: true,
+			cancelable: true,
+			...centreOf(markRect(editable, "redy")),
+		});
+		editable.dispatchEvent(contextMenu);
+		await expect(contextMenu.defaultPrevented).toBe(false);
+		await expect(menu()).toBeNull();
+
+		tapOn(editable, "redy");
+		await waitFor(() => expect(menu()).toBeTruthy());
+
+		await userEvent.click(
+			spellNode(
+				canvasElement,
+				"[aria-label='Close corrections']",
+			) as HTMLElement,
+		);
+		await waitFor(() => expect(menu()).toBeNull());
+		await waitFor(() => expect(document.activeElement).toBe(editable));
+	},
+};
+
+/**
+ * The whole experience, hands on: type into a message full of misspellings,
+ * click a squiggle (or put the caret in one and press Ctrl+.), pick a
+ * correction, ignore a word, or add it to the list this mount keeps. The
+ * theme toolbar switches both surfaces.
+ */
+const SpellcheckWorkbench = () => {
+	const [added, setAdded] = useState<string[]>([]);
+	const spellcheck = useMemo(
+		() => slowSuggestions(450, (word) => setAdded((words) => [...words, word])),
+		[],
+	);
+
+	return (
+		<>
+			<RichTextEditor
+				initialHtml={`<p>${MISSPELT_MESSAGE}</p><p>Anything you type here is checked the same way.</p>`}
+				lang="en"
+				spellcheck={spellcheck}
+				trailing={pinnedControls}
+			/>
+			<p
+				data-testid="spell-added-words"
+				className="shrink-0 border-t border-line px-3 py-2 text-xs text-fg-subtle"
+			>
+				{added.length === 0
+					? "Added to the dictionary: nothing yet."
+					: `Added to the dictionary: ${added.join(", ")}.`}
+			</p>
+		</>
+	);
+};
+
+export const SpellcheckPlayground: Story = {
+	name: "Spellcheck playground",
+	render: () => <SpellcheckWorkbench />,
+};
+
+export const SpellcheckPlaygroundOnTouch: Story = {
+	name: "Spellcheck playground on a phone",
+	globals: { viewport: { value: "mobile" } },
+	render: () => <SpellcheckWorkbench />,
+	decorators: [
+		(Story) => (
+			<div
+				data-testid="body-area"
+				className="relative flex h-[640px] w-[360px] flex-col overflow-hidden rounded-md border border-line bg-canvas"
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+
 /**
  * The toolbar and the body share one scroller, so twenty lines of typing would
  * carry the toolbar off the top with them. It stays at the top of the body