@remit/ui 0.0.102 → 0.0.103

package/src/lib/compose-mode.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Which surface a draft reopens in, and when a mode switch is refused.
+ *
+ * The mode is derived from `htmlBody`, with no field of its own. It has to be
+ * "a non-empty string" and not "truthy": the rich editor serializes an empty
+ * document to `<p><br></p>` and a plain draft clears the column to `""`, so a
+ * falsy check opens a plain draft correctly by accident and an absent column
+ * — an old draft, a partial write — the wrong way round.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	conversionOutcome,
+	modeOfDraft,
+	switchNeedsWarning,
+} from "./compose-mode.js";
+
+describe("the mode a draft reopens in", () => {
+	it("opens a draft with HTML as rich", () => {
+		assert.equal(modeOfDraft("<p>Hello</p>"), "rich");
+	});
+
+	it("opens an empty rich document as rich", () => {
+		assert.equal(modeOfDraft("<p><br></p>"), "rich");
+	});
+
+	it("opens a draft whose HTML was cleared as plain", () => {
+		assert.equal(modeOfDraft(""), "plain");
+	});
+
+	it("opens a draft that never had HTML as plain", () => {
+		assert.equal(modeOfDraft(undefined), "plain");
+	});
+});
+
+describe("whether the switch warns first", () => {
+	it("warns when the document holds formatting", () => {
+		assert.equal(switchNeedsWarning("plain", ["table"]), true);
+	});
+
+	it("says nothing over plain paragraphs", () => {
+		assert.equal(switchNeedsWarning("plain", []), false);
+	});
+
+	it("never warns on the way back to rich", () => {
+		assert.equal(switchNeedsWarning("rich", ["table", "bold"]), false);
+	});
+});
+
+describe("a conversion that would empty a written message", () => {
+	it("goes ahead when the conversion carried the message across", () => {
+		assert.deepEqual(conversionOutcome("plain", "Due Friday.", "Due Friday."), {
+			outcome: "switch",
+		});
+	});
+
+	it("goes ahead when there was nothing to carry", () => {
+		assert.deepEqual(conversionOutcome("plain", "", ""), { outcome: "switch" });
+	});
+
+	it("refuses, naming the direction, when plain text came back empty", () => {
+		assert.deepEqual(conversionOutcome("plain", "Due Friday.", "   "), {
+			outcome: "blocked",
+			title: "Couldn't switch to plain text",
+			detail: "The conversion came back empty, so your message is unchanged.",
+		});
+	});
+
+	it("refuses, naming the direction, when rich text came back empty", () => {
+		assert.deepEqual(conversionOutcome("rich", "Due Friday.", ""), {
+			outcome: "blocked",
+			title: "Couldn't switch to rich text",
+			detail: "The conversion came back empty, so your message is unchanged.",
+		});
+	});
+});

package/src/lib/compose-mode.ts

@@ -0,0 +1,50 @@
+import type { ComposeBodyMode } from "../components/compose-mode-toggle.js";
+
+/**
+ * Which surface a draft reopens in, with no field of its own. `htmlBody` a
+ * non-empty string is a rich draft; anything else is plain.
+ *
+ * Not "falsy": the rich editor serializes an empty document to `<p><br></p>`,
+ * so a rich draft's `htmlBody` is never absent, and a plain draft clears the
+ * column to the empty string rather than omitting it — absent means "leave
+ * alone" at every layer below this one.
+ */
+export const modeOfDraft = (htmlBody: string | undefined): ComposeBodyMode =>
+	typeof htmlBody === "string" && htmlBody.length > 0 ? "rich" : "plain";
+
+/**
+ * Whether switching to plain text destroys something. True for any node type or
+ * text format the document holds that plain text cannot carry.
+ */
+export const switchNeedsWarning = (
+	target: ComposeBodyMode,
+	formatting: readonly string[],
+): boolean => target === "plain" && formatting.length > 0;
+
+export type ConversionOutcome =
+	| { outcome: "switch" }
+	| { outcome: "blocked"; title: string; detail: string };
+
+const BLOCKED_TITLES: Record<ComposeBodyMode, string> = {
+	plain: "Couldn't switch to plain text",
+	rich: "Couldn't switch to rich text",
+};
+
+/**
+ * A conversion that empties a written message does not happen. Autosave would
+ * persist the blank body a moment later, so the draft would be gone with
+ * nothing said. An empty body converting to an empty body is not this case.
+ */
+export const conversionOutcome = (
+	target: ComposeBodyMode,
+	source: string,
+	converted: string,
+): ConversionOutcome => {
+	if (source.trim() === "" || converted.trim() !== "")
+		return { outcome: "switch" };
+	return {
+		outcome: "blocked",
+		title: BLOCKED_TITLES[target],
+		detail: "The conversion came back empty, so your message is unchanged.",
+	};
+};

package/src/rich-text.ts

@@ -4,6 +4,13 @@
  * land in whichever chunk already imports `@remit/ui`, which is every screen.
  */
 
+export {
+	ComposeBody,
+	type ComposeBodyProps,
+	type ComposeConversions,
+	type ConversionFailure,
+	DEFAULT_COMPOSE_CONVERSIONS,
+} from "./components/compose-body.js";
 export {
 	ComposeLanguageChip,
 	type ComposeLanguageChipProps,

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

@@ -1,96 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ComposeActionBar } from "./compose-action-bar.js";
-import { ComposeFormShell, composeModeLabels } from "./compose-form-shell.js";
-
-const meta: Meta<typeof ComposeFormShell> = {
-	title: "Mail/ComposeForm",
-	component: ComposeFormShell,
-	parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj<typeof ComposeFormShell>;
-
-const Header = ({ title }: { title: string }) => (
-	<div className="space-y-1 border-b border-line px-3 py-2">
-		<div className="text-xs font-semibold text-fg-muted">{title}</div>
-		<div className="flex items-center gap-2 text-sm">
-			<span className="w-12 text-fg-muted">To</span>
-			<span>alex@example.com</span>
-		</div>
-		<div className="flex items-center gap-2 text-sm">
-			<span className="w-12 text-fg-muted">Subject</span>
-			<span>Q3 planning notes</span>
-		</div>
-	</div>
-);
-
-const Body = () => (
-	<div className="min-h-[120px] px-3 py-2 text-sm">
-		Hi Alex, here are the notes from today…
-	</div>
-);
-
-const bar = (
-	<ComposeActionBar
-		onSend={() => undefined}
-		onDiscard={() => undefined}
-		sending={false}
-		canSend={true}
-		saveStatus="saved"
-	/>
-);
-
-export const DesktopFull: Story = {
-	name: "Desktop — full compose",
-	render: () => (
-		<div className="h-[560px] w-[560px] border border-line bg-canvas">
-			<ComposeFormShell
-				header={<Header title={composeModeLabels.new} />}
-				actionBar={bar}
-			>
-				<Body />
-			</ComposeFormShell>
-		</div>
-	),
-};
-
-export const InlineReply: Story = {
-	name: "Inline reply",
-	render: () => (
-		<div className="flex h-[400px] w-[640px] max-h-[400px] flex-col border-t border-line bg-canvas">
-			<ComposeFormShell
-				header={<Header title={composeModeLabels.reply} />}
-				quoted={
-					<div className="border-l-2 border-line pl-3 text-xs text-fg-muted">
-						On Tuesday, Alex wrote: …
-					</div>
-				}
-				actionBar={bar}
-			>
-				<Body />
-			</ComposeFormShell>
-		</div>
-	),
-};
-
-export const MobileSheet: Story = {
-	name: "Mobile sheet — Send within viewport",
-	globals: { viewport: { value: "mobile" } },
-	render: () => (
-		<div className="flex h-[95dvh] w-[390px] flex-col rounded-t-lg border border-line bg-canvas">
-			<div className="mx-auto mt-2 mb-1 h-1.5 w-12 rounded-full bg-fg-muted/30" />
-			<div className="border-b border-line px-4 py-2 text-base font-semibold">
-				{composeModeLabels.new}
-			</div>
-			<div className="min-h-0 flex-1">
-				<ComposeFormShell
-					header={<Header title={composeModeLabels.new} />}
-					actionBar={bar}
-				>
-					<Body />
-				</ComposeFormShell>
-			</div>
-		</div>
-	),
-};