payload-plugin-newsletter 0.16.9 → 0.17.0

package/dist/components.cjs

@@ -968,62 +968,73 @@ async function convertToEmailSafeHtml(editorState, options) {
   if (!editorState) {
     return "";
   }
-  const rawHtml = await lexicalToEmailHtml(editorState, options?.mediaUrl);
+  const rawHtml = await lexicalToEmailHtml(editorState, options?.mediaUrl, options?.customBlockConverter);
   const sanitizedHtml = import_isomorphic_dompurify.default.sanitize(rawHtml, EMAIL_SAFE_CONFIG);
   if (options?.wrapInTemplate) {
     return wrapInEmailTemplate(sanitizedHtml, options.preheader);
   }
   return sanitizedHtml;
 }
-async function lexicalToEmailHtml(editorState, mediaUrl) {
+async function lexicalToEmailHtml(editorState, mediaUrl, customBlockConverter) {
   const { root } = editorState;
   if (!root || !root.children) {
     return "";
   }
-  const html = root.children.map((node) => convertNode(node, mediaUrl)).join("");
-  return html;
+  const htmlParts = await Promise.all(
+    root.children.map((node) => convertNode(node, mediaUrl, customBlockConverter))
+  );
+  return htmlParts.join("");
 }
-function convertNode(node, mediaUrl) {
+async function convertNode(node, mediaUrl, customBlockConverter) {
   switch (node.type) {
     case "paragraph":
-      return convertParagraph(node, mediaUrl);
+      return convertParagraph(node, mediaUrl, customBlockConverter);
     case "heading":
-      return convertHeading(node, mediaUrl);
+      return convertHeading(node, mediaUrl, customBlockConverter);
     case "list":
-      return convertList(node, mediaUrl);
+      return convertList(node, mediaUrl, customBlockConverter);
     case "listitem":
-      return convertListItem(node, mediaUrl);
+      return convertListItem(node, mediaUrl, customBlockConverter);
     case "blockquote":
-      return convertBlockquote(node, mediaUrl);
+      return convertBlockquote(node, mediaUrl, customBlockConverter);
     case "text":
       return convertText(node);
     case "link":
-      return convertLink(node, mediaUrl);
+      return convertLink(node, mediaUrl, customBlockConverter);
     case "linebreak":
       return "<br>";
     case "upload":
       return convertUpload(node, mediaUrl);
     case "block":
-      return convertBlock(node, mediaUrl);
+      return await convertBlock(node, mediaUrl, customBlockConverter);
     default:
       if (node.children) {
-        return node.children.map((child) => convertNode(child, mediaUrl)).join("");
+        const childParts = await Promise.all(
+          node.children.map((child) => convertNode(child, mediaUrl, customBlockConverter))
+        );
+        return childParts.join("");
       }
       return "";
   }
 }
-function convertParagraph(node, mediaUrl) {
+async function convertParagraph(node, mediaUrl, customBlockConverter) {
   const align = getAlignment(node.format);
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   if (!children.trim()) {
     return '<p style="margin: 0 0 16px 0; min-height: 1em;">&nbsp;</p>';
   }
   return `<p style="margin: 0 0 16px 0; text-align: ${align};">${children}</p>`;
 }
-function convertHeading(node, mediaUrl) {
+async function convertHeading(node, mediaUrl, customBlockConverter) {
   const tag = node.tag || "h1";
   const align = getAlignment(node.format);
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   const styles = {
     h1: "font-size: 32px; font-weight: 700; margin: 0 0 24px 0; line-height: 1.2;",
     h2: "font-size: 24px; font-weight: 600; margin: 0 0 16px 0; line-height: 1.3;",
@@ -1032,18 +1043,27 @@ function convertHeading(node, mediaUrl) {
   const style = `${styles[tag] || styles.h3} text-align: ${align};`;
   return `<${tag} style="${style}">${children}</${tag}>`;
 }
-function convertList(node, mediaUrl) {
+async function convertList(node, mediaUrl, customBlockConverter) {
   const tag = node.listType === "number" ? "ol" : "ul";
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   const style = tag === "ul" ? "margin: 0 0 16px 0; padding-left: 24px; list-style-type: disc;" : "margin: 0 0 16px 0; padding-left: 24px; list-style-type: decimal;";
   return `<${tag} style="${style}">${children}</${tag}>`;
 }
-function convertListItem(node, mediaUrl) {
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+async function convertListItem(node, mediaUrl, customBlockConverter) {
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   return `<li style="margin: 0 0 8px 0;">${children}</li>`;
 }
-function convertBlockquote(node, mediaUrl) {
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+async function convertBlockquote(node, mediaUrl, customBlockConverter) {
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   const style = "margin: 0 0 16px 0; padding-left: 16px; border-left: 4px solid #e5e7eb; color: #6b7280;";
   return `<blockquote style="${style}">${children}</blockquote>`;
 }
@@ -1063,8 +1083,11 @@ function convertText(node) {
   }
   return text;
 }
-function convertLink(node, mediaUrl) {
-  const children = node.children?.map((child) => convertNode(child, mediaUrl)).join("") || "";
+async function convertLink(node, mediaUrl, customBlockConverter) {
+  const childParts = await Promise.all(
+    (node.children || []).map((child) => convertNode(child, mediaUrl, customBlockConverter))
+  );
+  const children = childParts.join("");
   const url = node.fields?.url || "#";
   const newTab = node.fields?.newTab ?? false;
   const targetAttr = newTab ? ' target="_blank"' : "";
@@ -1095,8 +1118,18 @@ function convertUpload(node, mediaUrl) {
   }
   return `<div style="margin: 0 0 16px 0; text-align: center;">${imgHtml}</div>`;
 }
-function convertBlock(node, mediaUrl) {
-  const blockType = node.fields?.blockName;
+async function convertBlock(node, mediaUrl, customBlockConverter) {
+  const blockType = node.fields?.blockName || node.blockName;
+  if (customBlockConverter) {
+    try {
+      const customHtml = await customBlockConverter(node, mediaUrl);
+      if (customHtml) {
+        return customHtml;
+      }
+    } catch (error) {
+      console.error(`Custom block converter error for ${blockType}:`, error);
+    }
+  }
   switch (blockType) {
     case "button":
       return convertButtonBlock(node.fields);
@@ -1104,7 +1137,10 @@ function convertBlock(node, mediaUrl) {
       return convertDividerBlock(node.fields);
     default:
       if (node.children) {
-        return node.children.map((child) => convertNode(child, mediaUrl)).join("");
+        const childParts = await Promise.all(
+          node.children.map((child) => convertNode(child, mediaUrl, customBlockConverter))
+        );
+        return childParts.join("");
       }
       return "";
   }
@@ -1738,208 +1774,11 @@ var BroadcastEditor = (props) => {
 };
 
 // src/components/Broadcasts/BroadcastInlinePreview.tsx
-var import_react9 = require("react");
-var import_ui3 = require("@payloadcms/ui");
-
-// src/utils/contentTransformer.ts
-async function transformContentForPreview(lexicalState, options = {}) {
-  const html = await convertToEmailSafeHtml(lexicalState, {
-    mediaUrl: options.mediaUrl
-  });
-  const processedHtml = processCustomBlocks(html);
-  return processedHtml;
-}
-function processCustomBlocks(html) {
-  return html;
-}
-
-// src/email-templates/DefaultBroadcastTemplate.tsx
-var import_components2 = require("@react-email/components");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var DefaultBroadcastTemplate = ({
-  subject,
-  preheader,
-  content
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_components2.Html, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components2.Head, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components2.Preview, { children: preheader || subject }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components2.Body, { style: main, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_components2.Container, { style: container, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components2.Section, { style: contentSection, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { dangerouslySetInnerHTML: { __html: content } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components2.Hr, { style: divider }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_components2.Section, { style: footer, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components2.Text, { style: footerText, children: "You're receiving this email because you subscribed to our newsletter." }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components2.Text, { style: footerText, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components2.Link, { href: "{{unsubscribe_url}}", style: footerLink, children: "Unsubscribe" }) })
-      ] })
-    ] }) })
-  ] });
-};
-var main = {
-  backgroundColor: "#ffffff",
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
-};
-var container = {
-  margin: "0 auto",
-  padding: "40px 20px",
-  maxWidth: "600px"
-};
-var contentSection = {
-  fontSize: "16px",
-  lineHeight: "1.6",
-  color: "#374151"
-};
-var divider = {
-  borderColor: "#e5e7eb",
-  margin: "40px 0 20px"
-};
-var footer = {
-  textAlign: "center"
-};
-var footerText = {
-  fontSize: "14px",
-  lineHeight: "1.5",
-  color: "#6b7280",
-  margin: "0 0 10px"
-};
-var footerLink = {
-  color: "#6b7280",
-  textDecoration: "underline"
-};
-
-// src/utils/templateLoader.ts
-var TemplateLoader = class {
-  constructor() {
-    this.loadAttempted = false;
-    this.defaultTemplate = DefaultBroadcastTemplate;
-  }
-  async loadTemplate() {
-    if (!this.loadAttempted) {
-      this.loadAttempted = true;
-      await this.attemptCustomTemplateLoad();
-    }
-    return this.customTemplate || this.defaultTemplate;
-  }
-  async attemptCustomTemplateLoad() {
-    try {
-      const customTemplatePath = `${process.cwd()}/email-templates/broadcast-template`;
-      const module2 = await import(
-        /* @vite-ignore */
-        /* webpackIgnore: true */
-        customTemplatePath
-      ).catch(() => null);
-      if (module2) {
-        this.customTemplate = module2.default || module2.BroadcastTemplate;
-      }
-    } catch {
-    }
-  }
-  // Reset for testing
-  reset() {
-    this.customTemplate = void 0;
-    this.loadAttempted = false;
-  }
-};
-var templateLoader = new TemplateLoader();
-async function loadTemplate() {
-  return templateLoader.loadTemplate();
-}
-
-// src/components/Broadcasts/EmailRenderer.tsx
 var import_react8 = require("react");
-var import_render = require("@react-email/render");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var EmailRenderer = ({
-  template,
-  data,
-  device = "desktop",
-  onRender
-}) => {
-  const [renderedHtml, setRenderedHtml] = (0, import_react8.useState)("");
-  const [error, setError] = (0, import_react8.useState)(null);
-  const iframeRef = (0, import_react8.useRef)(null);
-  const renderEmail = (0, import_react8.useCallback)(async () => {
-    try {
-      const TemplateComponent = template;
-      const element = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TemplateComponent, { ...data });
-      const html = await (0, import_render.render)(element, {
-        pretty: true
-      });
-      setRenderedHtml(html);
-      onRender?.(html);
-      setError(null);
-    } catch (err) {
-      setError(err);
-      console.error("Failed to render email template:", err);
-    }
-  }, [template, data, onRender]);
-  (0, import_react8.useEffect)(() => {
-    renderEmail();
-  }, [renderEmail]);
-  (0, import_react8.useEffect)(() => {
-    if (iframeRef.current && renderedHtml) {
-      const iframe = iframeRef.current;
-      const doc = iframe.contentDocument || iframe.contentWindow?.document;
-      if (doc) {
-        doc.open();
-        doc.write(renderedHtml);
-        doc.close();
-      }
-    }
-  }, [renderedHtml]);
-  const containerStyle = {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    overflow: "auto",
-    padding: "2rem",
-    boxSizing: "border-box"
-  };
-  const iframeStyle = {
-    width: device === "mobile" ? "375px" : "600px",
-    height: "100%",
-    minHeight: "600px",
-    background: "white",
-    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-    borderRadius: device === "mobile" ? "20px" : "8px",
-    border: "none",
-    display: "block"
-  };
-  const errorStyle = {
-    background: "white",
-    border: "1px solid #ef4444",
-    borderRadius: "4px",
-    padding: "2rem",
-    maxWidth: "500px"
-  };
-  if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: errorStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: "Template Render Error" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { style: {
-        background: "#f9fafb",
-        padding: "1rem",
-        borderRadius: "4px",
-        overflowX: "auto",
-        fontSize: "12px",
-        color: "#374151",
-        margin: 0
-      }, children: error.message })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "iframe",
-    {
-      ref: iframeRef,
-      style: iframeStyle,
-      sandbox: "allow-same-origin",
-      title: "Email Preview"
-    }
-  ) });
-};
+var import_ui3 = require("@payloadcms/ui");
 
 // src/components/Broadcasts/PreviewControls.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var PreviewControls = ({
   onUpdate,
   device,
@@ -1981,8 +1820,8 @@ var PreviewControls = ({
     cursor: "pointer",
     fontSize: "14px"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: controlsStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: controlsStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         style: updateButtonStyle,
@@ -1991,33 +1830,33 @@ var PreviewControls = ({
         children: isLoading ? "Updating..." : "Update Preview"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: deviceSelectorStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: deviceSelectorStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "button",
         {
           style: deviceButtonStyle(device === "desktop"),
           onClick: () => onDeviceChange("desktop"),
           "aria-label": "Desktop view",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
             ] }),
             "Desktop"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "button",
         {
           style: deviceButtonStyle(device === "mobile"),
           onClick: () => onDeviceChange("mobile"),
           "aria-label": "Mobile view",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "18", x2: "12", y2: "18" })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "12", y1: "18", x2: "12", y2: "18" })
             ] }),
             "Mobile"
           ]
@@ -2028,19 +1867,19 @@ var PreviewControls = ({
 };
 
 // src/components/Broadcasts/BroadcastInlinePreview.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var BroadcastInlinePreview = () => {
-  const [device, setDevice] = (0, import_react9.useState)("desktop");
-  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
-  const [showPreview, setShowPreview] = (0, import_react9.useState)(false);
-  const [previewData, setPreviewData] = (0, import_react9.useState)(null);
-  const [error, setError] = (0, import_react9.useState)(null);
+  const [device, setDevice] = (0, import_react8.useState)("desktop");
+  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
+  const [showPreview, setShowPreview] = (0, import_react8.useState)(false);
+  const [previewHtml, setPreviewHtml] = (0, import_react8.useState)(null);
+  const [error, setError] = (0, import_react8.useState)(null);
   const fields = (0, import_ui3.useFormFields)(([fields2]) => ({
     subject: fields2["subject"]?.value,
     preheader: fields2["contentSection.preheader"]?.value,
     content: fields2["contentSection.content"]?.value
   }));
-  const updatePreview = (0, import_react9.useCallback)(async () => {
+  const updatePreview = (0, import_react8.useCallback)(async () => {
     if (!fields.content) {
       setError(new Error("Please add some content before previewing"));
       return;
@@ -2048,18 +1887,22 @@ var BroadcastInlinePreview = () => {
     setIsLoading(true);
     setError(null);
     try {
-      const htmlContent = await transformContentForPreview(fields.content, {
-        mediaUrl: "/api/media"
-      });
-      const template = await loadTemplate();
-      setPreviewData({
-        template,
-        data: {
-          subject: fields.subject || "",
-          preheader: fields.preheader || "",
-          content: htmlContent
-        }
+      const response = await fetch("/api/broadcasts/preview", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          content: fields.content,
+          preheader: fields.preheader,
+          subject: fields.subject
+        })
       });
+      const data = await response.json();
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || "Failed to generate preview");
+      }
+      setPreviewHtml(data.preview.html);
       setShowPreview(true);
     } catch (err) {
       setError(err);
@@ -2111,10 +1954,10 @@ var BroadcastInlinePreview = () => {
     fontSize: "14px",
     fontWeight: 500
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: containerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: headerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { style: titleStyle, children: "Email Preview" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: containerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: headerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: titleStyle, children: "Email Preview" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {
           onClick: () => showPreview ? setShowPreview(false) : updatePreview(),
@@ -2124,9 +1967,9 @@ var BroadcastInlinePreview = () => {
         }
       )
     ] }),
-    showPreview && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: previewContainerStyle, children: error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: errorStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: error.message }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    showPreview && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: previewContainerStyle, children: error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: errorStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: error.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {
           onClick: updatePreview,
@@ -2141,8 +1984,8 @@ var BroadcastInlinePreview = () => {
           children: "Retry"
         }
       )
-    ] }) : previewData ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ] }) : previewHtml ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         PreviewControls,
         {
           onUpdate: updatePreview,
@@ -2151,12 +1994,42 @@ var BroadcastInlinePreview = () => {
           isLoading
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        EmailRenderer,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
         {
-          template: previewData.template,
-          data: previewData.data,
-          device
+          style: {
+            flex: 1,
+            padding: device === "mobile" ? "1rem" : "2rem",
+            display: "flex",
+            justifyContent: "center",
+            overflow: "auto"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              style: {
+                width: device === "mobile" ? "375px" : "600px",
+                maxWidth: "100%",
+                background: "white",
+                boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+                borderRadius: "8px",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "iframe",
+                {
+                  srcDoc: previewHtml,
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    minHeight: "600px",
+                    border: "none"
+                  },
+                  title: "Email Preview"
+                }
+              )
+            }
+          )
         }
       )
     ] }) : null })
@@ -2164,9 +2037,9 @@ var BroadcastInlinePreview = () => {
 };
 
 // src/components/Broadcasts/BroadcastPreviewField.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var BroadcastPreviewField = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: {
     padding: "1rem",
     background: "#f9fafb",
     borderRadius: "4px",
@@ -2175,8 +2048,102 @@ var BroadcastPreviewField = () => {
   }, children: "Email preview is available inline below the content editor." });
 };
 
+// src/components/Broadcasts/EmailRenderer.tsx
+var import_react9 = require("react");
+var import_render = require("@react-email/render");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var EmailRenderer = ({
+  template,
+  data,
+  device = "desktop",
+  onRender
+}) => {
+  const [renderedHtml, setRenderedHtml] = (0, import_react9.useState)("");
+  const [error, setError] = (0, import_react9.useState)(null);
+  const iframeRef = (0, import_react9.useRef)(null);
+  const renderEmail = (0, import_react9.useCallback)(async () => {
+    try {
+      const TemplateComponent = template;
+      const element = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TemplateComponent, { ...data });
+      const html = await (0, import_render.render)(element, {
+        pretty: true
+      });
+      setRenderedHtml(html);
+      onRender?.(html);
+      setError(null);
+    } catch (err) {
+      setError(err);
+      console.error("Failed to render email template:", err);
+    }
+  }, [template, data, onRender]);
+  (0, import_react9.useEffect)(() => {
+    renderEmail();
+  }, [renderEmail]);
+  (0, import_react9.useEffect)(() => {
+    if (iframeRef.current && renderedHtml) {
+      const iframe = iframeRef.current;
+      const doc = iframe.contentDocument || iframe.contentWindow?.document;
+      if (doc) {
+        doc.open();
+        doc.write(renderedHtml);
+        doc.close();
+      }
+    }
+  }, [renderedHtml]);
+  const containerStyle = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    overflow: "auto",
+    padding: "2rem",
+    boxSizing: "border-box"
+  };
+  const iframeStyle = {
+    width: device === "mobile" ? "375px" : "600px",
+    height: "100%",
+    minHeight: "600px",
+    background: "white",
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    borderRadius: device === "mobile" ? "20px" : "8px",
+    border: "none",
+    display: "block"
+  };
+  const errorStyle = {
+    background: "white",
+    border: "1px solid #ef4444",
+    borderRadius: "4px",
+    padding: "2rem",
+    maxWidth: "500px"
+  };
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: errorStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { style: { color: "#ef4444", margin: "0 0 1rem" }, children: "Template Render Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { style: {
+        background: "#f9fafb",
+        padding: "1rem",
+        borderRadius: "4px",
+        overflowX: "auto",
+        fontSize: "12px",
+        color: "#374151",
+        margin: 0
+      }, children: error.message })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "iframe",
+    {
+      ref: iframeRef,
+      style: iframeStyle,
+      sandbox: "allow-same-origin",
+      title: "Email Preview"
+    }
+  ) });
+};
+
 // src/components/Broadcasts/StatusBadge.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var statusConfig = {
   ["draft" /* DRAFT */]: {
     label: "Draft",
@@ -2224,7 +2191,7 @@ var statusConfig = {
 var StatusBadge = ({ cellData }) => {
   const status = cellData;
   const config = statusConfig[status] || statusConfig["draft" /* DRAFT */];
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "span",
     {
       style: {
@@ -2246,6 +2213,59 @@ var StatusBadge = ({ cellData }) => {
 var EmptyField = () => {
   return null;
 };
+
+// src/email-templates/DefaultBroadcastTemplate.tsx
+var import_components2 = require("@react-email/components");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DefaultBroadcastTemplate = ({
+  subject,
+  preheader,
+  content
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_components2.Html, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Head, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Preview, { children: preheader || subject }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Body, { style: main, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_components2.Container, { style: container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Section, { style: contentSection, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { dangerouslySetInnerHTML: { __html: content } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Hr, { style: divider }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_components2.Section, { style: footer, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Text, { style: footerText, children: "You're receiving this email because you subscribed to our newsletter." }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Text, { style: footerText, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components2.Link, { href: "{{unsubscribe_url}}", style: footerLink, children: "Unsubscribe" }) })
+      ] })
+    ] }) })
+  ] });
+};
+var main = {
+  backgroundColor: "#ffffff",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+};
+var container = {
+  margin: "0 auto",
+  padding: "40px 20px",
+  maxWidth: "600px"
+};
+var contentSection = {
+  fontSize: "16px",
+  lineHeight: "1.6",
+  color: "#374151"
+};
+var divider = {
+  borderColor: "#e5e7eb",
+  margin: "40px 0 20px"
+};
+var footer = {
+  textAlign: "center"
+};
+var footerText = {
+  fontSize: "14px",
+  lineHeight: "1.5",
+  color: "#6b7280",
+  margin: "0 0 10px"
+};
+var footerLink = {
+  color: "#6b7280",
+  textDecoration: "underline"
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BroadcastEditor,