@remit/ui 0.0.109 → 0.0.111

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

@@ -10,6 +10,15 @@ import { before, describe, it } from "node:test";
 import type { JSDOM } from "jsdom";
 import type { LexicalEditor } from "lexical";
 
+const PASTED_IMAGE = [
+	"<p>before</p>",
+	'<p><img src="https://example.com/logo.png" alt="The logo"></p>',
+	"<p>after</p>",
+].join("");
+
+const PIXEL =
+	"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
 const PASTED = [
 	'<meta charset="utf-8">',
 	'<h2 style="color:#111">Quarterly numbers</h2>',
@@ -106,3 +115,42 @@ describe("adopting pasted HTML", () => {
 		assert.match(text, /\*\*this quarter\*\*/);
 	});
 });
+
+/**
+ * #684: the sanitizer admitted the element and the editor had nowhere to put
+ * it, so the picture was gone by the time the paste landed — between two
+ * paragraphs that both survived.
+ */
+describe("adopting a pasted image", () => {
+	it("keeps the image between the text around it", () => {
+		const { html } = adoptAndSerialize(PASTED_IMAGE);
+
+		assert.match(html, /<img[^>]+src="https:\/\/example\.com\/logo\.png"/);
+		assert.match(html, /<img[^>]+alt="The logo"/);
+		assert.match(html, /before/);
+		assert.match(html, /after/);
+	});
+
+	it("keeps an image the clipboard carried as its own data", () => {
+		const { html } = adoptAndSerialize(
+			`<p><img src="${PIXEL}" alt="A pixel"></p>`,
+		);
+
+		assert.ok(html.includes(`src="${PIXEL}"`));
+		assert.match(html, /alt="A pixel"/);
+	});
+
+	it("sends the image with a width the recipient's layout survives", () => {
+		const { html } = adoptAndSerialize(PASTED_IMAGE);
+
+		assert.match(html, /<img[^>]+style="max-width:100%;height:auto"/);
+	});
+
+	it("drops an image this app would not send", () => {
+		const { html } = adoptAndSerialize(
+			'<p><img src="http://tracker.example/px.gif"></p>',
+		);
+
+		assert.equal(html.includes("<img"), false);
+	});
+});

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

@@ -17,6 +17,12 @@ export interface RichTextValue {
 	formatting: readonly string[];
 }
 
+/**
+ * Where a writing surface puts the caret when it takes focus on mount. Both
+ * surfaces read it, so it lives with the value rather than with either one.
+ */
+export type ComposeCaret = "start" | "end";
+
 export const EMPTY_RICH_TEXT: RichTextValue = {
 	html: "",
 	text: "",

package/src/index.ts

@@ -129,12 +129,14 @@ export {
 	ComposeActionBar,
 	type ComposeActionBarProps,
 	type ComposeSaveStatus,
+	type ComposeSendState,
 } from "./components/compose-action-bar.js";
 export {
 	type AddressEntry,
 	ComposeAddressField,
 	type ComposeAddressFieldProps,
 } from "./components/compose-address-field.js";
+export { ComposeBodySkeleton } from "./components/compose-body-skeleton.js";
 export {
 	ComposeFormShell,
 	type ComposeFormShellProps,
@@ -153,6 +155,7 @@ export {
 export {
 	ComposeSmtpMissingBanner,
 	type ComposeSmtpMissingBannerProps,
+	SMTP_MISSING_MESSAGE,
 } from "./components/compose-smtp-missing-banner.js";
 export {
 	ComposeSubjectField,

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

@@ -124,6 +124,29 @@ describe("sanitizeAdoptedHtml", () => {
 		assert.equal(result.includes("tracker.gif"), false);
 		assert.equal(result.includes("cid:part1"), false);
 	});
+
+	it("caps an image at the width the recipient has for it", () => {
+		const result = sanitizeAdoptedHtml(
+			'<img src="https://example.com/screenshot.png" width="1600">',
+		);
+
+		assert.match(result, /style="max-width:100%;height:auto"/);
+		assert.equal(result.includes("1600"), false);
+	});
+
+	it("writes that cap itself rather than trusting the source", () => {
+		const result = sanitizeAdoptedHtml(
+			[
+				'<img src="https://example.com/a.png" style="width:1600px;border:8px solid red">',
+				'<p style="color:red">Text</p>',
+			].join(""),
+		);
+
+		assert.equal(result.includes("1600px"), false);
+		assert.equal(result.includes("border"), false);
+		assert.equal(result.includes("color:red"), false);
+		assert.match(result, /<img src="https:\/\/example.com\/a.png"/);
+	});
 });
 
 describe("sanitizeQuotedHtml", () => {

package/src/lib/adopted-html.ts

@@ -63,6 +63,17 @@ const ADOPTED_ATTR = [
 const LINK_SCHEMES = /^(?:https?:|mailto:)/i;
 const IMAGE_SCHEMES = /^(?:https:|data:image\/)/i;
 
+/**
+ * A pasted screenshot is as wide as the screen it came off, and the class the
+ * editor draws it with is this app's own presentation — it does not leave with
+ * the message. So the one constraint that has to survive is written here, on
+ * the way out, rather than admitted from whoever wrote the source: `style`
+ * stays out of ADOPTED_ATTR, and an image carries this declaration and no
+ * other. Whether a `data:` image reaches a given client at all is a separate
+ * question (#679).
+ */
+const IMAGE_SIZE = "max-width:100%;height:auto";
+
 /**
  * `"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
@@ -96,7 +107,11 @@ const createPurifier = (profile: Profile): ReturnType<typeof DOMPurify> => {
 			node.remove();
 			return;
 		}
-		if (!IMAGE_SCHEMES.test(node.getAttribute("src") ?? "")) node.remove();
+		if (!IMAGE_SCHEMES.test(node.getAttribute("src") ?? "")) {
+			node.remove();
+			return;
+		}
+		node.setAttribute("style", IMAGE_SIZE);
 	});
 	return instance;
 };

package/src/rich-text.ts

@@ -48,6 +48,7 @@ export {
 	type SpellWorkerPort,
 } from "./components/rich-text-spellcheck-provider.js";
 export {
+	type ComposeCaret,
 	EMPTY_RICH_TEXT,
 	type RichTextValue,
 } from "./components/rich-text-value.js";