@remit/ui 0.0.109 → 0.0.110

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";