@remit/ui 0.0.97 → 0.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.97",
+  "version": "0.0.98",
   "type": "module",
   "files": [
     "src"

package/src/components/compose-form-shell.tsx

@@ -27,6 +27,10 @@ export interface ComposeFormShellProps {
  * pinned action bar. Owns the column structure so the action bar always sits
  * at the bottom and never clips below the fold. The live form composes this
  * with its provider-driven slots; stories render it with static slots.
+ *
+ * The body region is a column so the editor can claim the space the quote and
+ * the action bar leave — a body slot shorter than the region would otherwise
+ * leave dead, unclickable canvas under it.
  */
 export function ComposeFormShell({
 	banner,
@@ -39,9 +43,12 @@ export function ComposeFormShell({
 		<div className="flex h-full min-h-0 flex-col">
 			{banner}
 			{header}
-			<div className="min-h-0 flex-1 overflow-auto">
+			<div
+				className="flex min-h-0 flex-1 flex-col overflow-auto"
+				data-testid="compose-body-area"
+			>
 				{children}
-				{quoted && <div className="px-3 pb-2">{quoted}</div>}
+				{quoted && <div className="shrink-0 px-3 pb-2">{quoted}</div>}
 			</div>
 			{actionBar}
 		</div>

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

@@ -1,14 +1,23 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "storybook/test";
 import { sanitizeAdoptedHtml } from "../lib/adopted-html.js";
 import { RichTextEditor } from "./rich-text-editor.js";
 
+/**
+ * The frame is the compose body region at its real geometry — a column with a
+ * height of its own — so the editor is shown claiming the space a composer
+ * gives it rather than only the space its own text needs.
+ */
 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">
+			<div
+				data-testid="body-area"
+				className="flex h-[420px] w-[640px] flex-col overflow-auto rounded-md border border-line bg-canvas"
+			>
 				<Story />
 			</div>
 		),
@@ -64,3 +73,32 @@ export const PasteResult: Story = {
 	name: "After pasting a web page",
 	args: { initialHtml: sanitizeAdoptedHtml(CLIPBOARD_HTML) },
 };
+
+/**
+ * A short message leaves most of the body region empty. That region belongs to
+ * the document: the point far below the last line is the editable, and a click
+ * there lands in it.
+ */
+export const ClickBelowTheText: Story = {
+	name: "Clicking below the last line",
+	args: { initialHtml: "<p>Sounds good. See you at 12:30.</p>" },
+	play: async ({ canvasElement }) => {
+		const area = canvasElement.querySelector<HTMLElement>(
+			"[data-testid=body-area]",
+		);
+		const editable = canvasElement.querySelector<HTMLElement>(
+			"[data-testid=compose-body]",
+		);
+		if (!area || !editable) throw new Error("the editor is not mounted");
+
+		const box = area.getBoundingClientRect();
+		const underTheText = document.elementFromPoint(
+			box.left + box.width / 2,
+			Math.min(box.bottom - 12, window.innerHeight - 2),
+		);
+		await expect(editable.contains(underTheText)).toBe(true);
+
+		await userEvent.click(editable);
+		await expect(editable).toHaveFocus();
+	},
+};

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

@@ -173,31 +173,36 @@ export const RichTextEditor = ({
 			},
 		}}
 	>
-		<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}
-			/>
+		{/* The editable claims the height its container offers rather than only the
+		    height of its own text. What is under the last line is the document, so
+		    a click there reaches it instead of an unfocusable parent. */}
+		<div className="flex shrink-0 grow flex-col">
+			<RichTextToolbar />
+			<div className="relative flex shrink-0 grow flex-col">
+				<RichTextPlugin
+					contentEditable={
+						<ContentEditable
+							aria-label={ariaLabel}
+							aria-placeholder={placeholder}
+							data-testid="compose-body"
+							className="min-h-[120px] w-full shrink-0 grow 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>
 		</div>
 		<HistoryPlugin />
 		<ListPlugin />