payload-plugin-newsletter 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [0.12.0] - 2025-07-20
+
+### Added
+- Email preview feature for broadcasts with inline preview component
+- React Email integration for reliable email template rendering
+- Custom email template support
+- Desktop and mobile preview modes
+
+### Changed
+- Broadcast collection now includes inline email preview below content editor
+
 ## [0.11.0] - 2025-07-20
 
 ### Added
@@ -7,12 +18,25 @@
   - Image upload support with Media collection integration
   - Custom email blocks (Button and Divider)
   - Enhanced link feature with "open in new tab" option
+- Email preview feature for broadcasts:
+  - Live preview with manual update button
+  - Desktop and mobile responsive views
+  - React Email template rendering
+  - Custom template support via `email-templates/broadcast-template.tsx`
+  - Inline preview below content editor
 - Comprehensive image handling in email HTML conversion:
   - Responsive images with proper email-safe HTML
   - Support for captions and alt text
   - Automatic media URL handling for different storage backends
-- Media collection setup documentation (`docs/guides/media-collection-setup.md`)
-- Prerequisites section in README mentioning Media collection requirement
+- New utilities and components:
+  - `contentTransformer` for preview content processing
+  - `templateLoader` for custom template discovery
+  - `DefaultBroadcastTemplate` bundled email template
+  - `BroadcastInlinePreview` component
+- Documentation:
+  - Media collection setup guide (`docs/guides/media-collection-setup.md`)
+  - Email preview feature guide (`docs/features/email-preview.md`)
+  - Prerequisites section in README mentioning Media collection requirement
 
 ### Changed
 - Removed 'name' field from Broadcasts collection (now uses 'subject' as title)

package/dist/components.cjs

@@ -32,11 +32,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var components_exports = {};
 __export(components_exports, {
   BroadcastEditor: () => BroadcastEditor,
+  BroadcastInlinePreview: () => BroadcastInlinePreview,
+  BroadcastPreviewField: () => BroadcastPreviewField,
+  DefaultBroadcastTemplate: () => DefaultBroadcastTemplate,
   EmailPreview: () => EmailPreview,
   EmailPreviewField: () => EmailPreviewField,
+  EmailRenderer: () => EmailRenderer,
   MagicLinkVerify: () => MagicLinkVerify,
   NewsletterForm: () => NewsletterForm,
   PreferencesForm: () => PreferencesForm,
+  PreviewControls: () => PreviewControls,
   createMagicLinkVerify: () => createMagicLinkVerify,
   createNewsletterForm: () => createNewsletterForm,
   createPreferencesForm: () => createPreferencesForm,
@@ -1726,14 +1731,453 @@ 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;
+        console.info("Loaded custom broadcast template");
+      }
+    } catch (error) {
+      console.info("Using default broadcast template");
+    }
+  }
+  // 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: "center",
+    justifyContent: "center"
+  };
+  const iframeStyle = {
+    width: device === "mobile" ? "375px" : "600px",
+    maxWidth: "100%",
+    height: "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: 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"
+    }
+  ) });
+};
+
+// src/components/Broadcasts/PreviewControls.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var PreviewControls = ({
+  onUpdate,
+  device,
+  onDeviceChange,
+  isLoading = false
+}) => {
+  const controlsStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem",
+    background: "white",
+    borderBottom: "1px solid #e5e7eb"
+  };
+  const updateButtonStyle = {
+    padding: "0.5rem 1rem",
+    background: "#10b981",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    cursor: isLoading ? "not-allowed" : "pointer",
+    fontSize: "14px",
+    fontWeight: 500,
+    opacity: isLoading ? 0.6 : 1
+  };
+  const deviceSelectorStyle = {
+    display: "flex",
+    gap: "0.5rem"
+  };
+  const deviceButtonStyle = (isActive) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    padding: "0.5rem 0.75rem",
+    background: isActive ? "#1f2937" : "white",
+    color: isActive ? "white" : "#374151",
+    border: `1px solid ${isActive ? "#1f2937" : "#e5e7eb"}`,
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "14px"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: controlsStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        style: updateButtonStyle,
+        onClick: onUpdate,
+        disabled: isLoading,
+        children: isLoading ? "Updating..." : "Update Preview"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: deviceSelectorStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.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" })
+            ] }),
+            "Desktop"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.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" })
+            ] }),
+            "Mobile"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/Broadcasts/BroadcastInlinePreview.tsx
+var import_jsx_runtime10 = 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 fields = (0, import_ui3.useFormFields)(([fields2]) => ({
+    subject: fields2.subject?.value,
+    preheader: fields2.preheader?.value,
+    content: fields2.content?.value
+  }));
+  const updatePreview = (0, import_react9.useCallback)(async () => {
+    if (!fields.content) {
+      setError(new Error("Please add some content before previewing"));
+      return;
+    }
+    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
+        }
+      });
+      setShowPreview(true);
+    } catch (err) {
+      setError(err);
+      console.error("Failed to update preview:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fields]);
+  const containerStyle = {
+    marginTop: "2rem",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    overflow: "hidden"
+  };
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem",
+    background: "#f9fafb",
+    borderBottom: "1px solid #e5e7eb"
+  };
+  const titleStyle = {
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#1f2937",
+    margin: 0
+  };
+  const previewContainerStyle = {
+    height: "600px",
+    display: "flex",
+    flexDirection: "column",
+    background: "#f3f4f6"
+  };
+  const errorStyle = {
+    padding: "2rem",
+    textAlign: "center"
+  };
+  const toggleButtonStyle = {
+    padding: "0.5rem 1rem",
+    background: showPreview ? "#ef4444" : "#3b82f6",
+    color: "white",
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    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)(
+        "button",
+        {
+          onClick: () => showPreview ? setShowPreview(false) : updatePreview(),
+          style: toggleButtonStyle,
+          disabled: isLoading,
+          children: isLoading ? "Loading..." : showPreview ? "Hide Preview" : "Show Preview"
+        }
+      )
+    ] }),
+    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)(
+        "button",
+        {
+          onClick: updatePreview,
+          style: {
+            padding: "0.5rem 1rem",
+            background: "#3b82f6",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer"
+          },
+          children: "Retry"
+        }
+      )
+    ] }) : previewData ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        PreviewControls,
+        {
+          onUpdate: updatePreview,
+          device,
+          onDeviceChange: setDevice,
+          isLoading
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "2rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        EmailRenderer,
+        {
+          template: previewData.template,
+          data: previewData.data,
+          device
+        }
+      ) })
+    ] }) : null })
+  ] });
+};
+
+// src/components/Broadcasts/BroadcastPreviewField.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var BroadcastPreviewField = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: {
+    padding: "1rem",
+    background: "#f9fafb",
+    borderRadius: "4px",
+    fontSize: "14px",
+    color: "#6b7280"
+  }, children: "Email preview is available inline below the content editor." });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BroadcastEditor,
+  BroadcastInlinePreview,
+  BroadcastPreviewField,
+  DefaultBroadcastTemplate,
   EmailPreview,
   EmailPreviewField,
+  EmailRenderer,
   MagicLinkVerify,
   NewsletterForm,
   PreferencesForm,
+  PreviewControls,
   createMagicLinkVerify,
   createNewsletterForm,
   createPreferencesForm,