diff --git a/apps/web/src/app/(dashboard)/emails/email-details.tsx b/apps/web/src/app/(dashboard)/emails/email-details.tsx
index f5bbedbf..22118428 100644
--- a/apps/web/src/app/(dashboard)/emails/email-details.tsx
+++ b/apps/web/src/app/(dashboard)/emails/email-details.tsx
@@ -20,6 +20,7 @@ import {
COMPLAINT_ERROR_MESSAGES,
DELIVERY_DELAY_ERRORS,
} from "@usesend/lib/src/constants/ses-errors";
+import { getEmailPreviewSrcDoc } from "~/lib/email-preview";
import CancelEmail from "./cancel-email";
import { useEffect } from "react";
import { useState } from "react";
@@ -90,7 +91,10 @@ export default function EmailDetails({ emailId }: { emailId: string }) {
animate={{ opacity: 1 }}
transition={{ duration: 0.2, delay: 0.3 }}
>
-
+
{emailQuery.data?.latestStatus !== "SCHEDULED" ? (
@@ -134,7 +138,13 @@ export default function EmailDetails({ emailId }: { emailId: string }) {
);
}
-const EmailPreview = ({ html }: { html: string }) => {
+const EmailPreview = ({
+ html,
+ text,
+}: {
+ html: string | null | undefined;
+ text: string | null | undefined;
+}) => {
const [show, setShow] = useState(false);
useEffect(() => {
@@ -145,17 +155,29 @@ const EmailPreview = ({ html }: { html: string }) => {
return () => clearTimeout(timer);
}, []);
+ const srcDoc = getEmailPreviewSrcDoc(html, text);
+
if (!show) {
return (
);
}
+ if (!srcDoc) {
+ return (
+
+
+ No content to preview
+
+
+ );
+ }
+
return (
diff --git a/apps/web/src/lib/email-preview.ts b/apps/web/src/lib/email-preview.ts
new file mode 100644
index 00000000..197cae7c
--- /dev/null
+++ b/apps/web/src/lib/email-preview.ts
@@ -0,0 +1,27 @@
+const escapeHtml = (value: string) =>
+ value
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+
+/**
+ * Builds the srcDoc for the sandboxed email preview iframe. Emails sent with
+ * only a `text` body have no html, so the plain text is escaped and wrapped
+ * in a minimal document instead of rendering an empty preview.
+ */
+export function getEmailPreviewSrcDoc(
+ html: string | null | undefined,
+ text: string | null | undefined,
+): string | null {
+ if (html) {
+ return html;
+ }
+
+ if (text) {
+ return `${escapeHtml(text)}`;
+ }
+
+ return null;
+}
diff --git a/apps/web/src/lib/email-preview.unit.test.ts b/apps/web/src/lib/email-preview.unit.test.ts
new file mode 100644
index 00000000..ac1640f0
--- /dev/null
+++ b/apps/web/src/lib/email-preview.unit.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+
+import { getEmailPreviewSrcDoc } from "./email-preview";
+
+describe("getEmailPreviewSrcDoc", () => {
+ it("returns the html body unchanged when present", () => {
+ const html = "Hello
";
+ expect(getEmailPreviewSrcDoc(html, "ignored text")).toBe(html);
+ });
+
+ it("wraps a text-only body in a plain-text document", () => {
+ const srcDoc = getEmailPreviewSrcDoc(null, "Hello\n\nworld");
+ expect(srcDoc).toContain(" {
+ const srcDoc = getEmailPreviewSrcDoc(null, 'Use & "quotes" wisely');
+ expect(srcDoc).not.toContain("");
+ expect(srcDoc).toContain("<b> & "quotes" wisely");
+ });
+
+ it("treats an empty html string as absent and falls back to text", () => {
+ const srcDoc = getEmailPreviewSrcDoc("", "plain body");
+ expect(srcDoc).toContain("plain body");
+ expect(srcDoc).toContain(" {
+ expect(getEmailPreviewSrcDoc(null, null)).toBeNull();
+ expect(getEmailPreviewSrcDoc("", "")).toBeNull();
+ expect(getEmailPreviewSrcDoc(undefined, undefined)).toBeNull();
+ });
+});