payload-plugin-newsletter 0.20.4 → 0.20.5

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [0.20.5] - 2025-08-01
+
+### Fixed
+- **Manual Preview Button** - Replaced automatic preview with manual "Generate Preview" button
+  - Fixed content access issue where preview couldn't find content due to field group separation
+  - Changed from `data.content` to `fields?.contentSection?.content` using `useFormFields` hook
+  - Removed automatic hot-reloading in favor of user-controlled preview generation
+  - Added "Hide Preview" and "Refresh Preview" buttons for better control
+  - Preview now correctly accesses content from nested field groups
+
+### Enhanced
+- **Better Error Handling** - Clear error messages when no content is available
+- **Improved UX** - Manual preview button prevents excessive API calls during content editing
+- **Proper Form Data Access** - Uses Payload's `useFormFields` hook to access all form fields across groups
+
+### Technical Changes
+- Component now implements `UIFieldClientComponent` interface from Payload
+- Removed automatic `useEffect` triggers and debouncing
+- Fixed field path from `data.content` to `fields?.contentSection?.content`
+- Maintains 600px iframe height for consistent preview display
+
 ## [0.20.4] - 2025-07-31
 
 ### Added

package/dist/admin.d.ts

@@ -0,0 +1,25 @@
+import { UIFieldClientComponent } from 'payload';
+import React from 'react';
+
+declare const BroadcastInlinePreview: UIFieldClientComponent;
+interface BroadcastInlinePreviewProps {
+    data?: any;
+    field?: any;
+    path?: string;
+    schemaPath?: string;
+}
+
+interface StatusBadgeProps {
+    cellData?: string;
+    rowData?: any;
+}
+declare const StatusBadge: React.FC<StatusBadgeProps>;
+
+interface EmailPreviewProps {
+    content?: any;
+    subject?: string;
+    preheader?: string;
+}
+declare const EmailPreview: React.FC<EmailPreviewProps>;
+
+export { BroadcastInlinePreview, type BroadcastInlinePreviewProps, EmailPreview, type EmailPreviewProps, StatusBadge, type StatusBadgeProps };

package/dist/admin.js

@@ -2,153 +2,97 @@
 "use client";
 
 // src/admin/components/BroadcastInlinePreview.tsx
-import { useState, useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var BroadcastInlinePreview = ({
-  data,
-  field: _field,
-  path: _path,
-  schemaPath: _schemaPath,
-  ..._props
-}) => {
-  const [previewHtml, setPreviewHtml] = useState("");
+import { useState, useCallback } from "react";
+import { useFormFields } from "@payloadcms/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BroadcastInlinePreview = () => {
+  const [preview, setPreview] = useState("");
   const [loading, setLoading] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
   const [error, setError] = useState(null);
-  const iframeRef = useRef(null);
-  useEffect(() => {
-    const fetchPreview = async () => {
-      if (!data?.content || !data.content.root?.children?.length) {
-        setPreviewHtml("");
-        return;
-      }
+  const fields = useFormFields(([fields2]) => fields2);
+  const generatePreview = useCallback(async () => {
+    try {
       setLoading(true);
       setError(null);
-      try {
-        const response = await fetch("/api/broadcasts/preview", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json"
-          },
-          credentials: "same-origin",
-          // Include cookies for auth
-          body: JSON.stringify({
-            content: data.content,
-            subject: data.subject || "",
-            preheader: data.preheader || ""
-          })
-        });
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({}));
-          throw new Error(errorData.error || `Failed to fetch preview: ${response.status}`);
-        }
-        const result = await response.json();
-        if (result.success && result.html) {
-          setPreviewHtml(result.html);
-        } else {
-          throw new Error(result.error || "No preview HTML returned");
-        }
-      } catch (err) {
-        console.error("Preview fetch error:", err);
-        setError(err instanceof Error ? err.message : "Failed to load preview");
-      } finally {
+      const contentSection = fields?.contentSection;
+      const contentValue = contentSection?.content?.value;
+      if (!contentValue) {
+        setError("No content available to preview");
         setLoading(false);
+        return;
       }
-    };
-    const timeoutId = setTimeout(fetchPreview, 500);
-    return () => clearTimeout(timeoutId);
-  }, [data?.content, data?.subject, data?.preheader]);
-  useEffect(() => {
-    if (iframeRef.current && previewHtml) {
-      const iframe = iframeRef.current;
-      const resizeIframe = () => {
-        try {
-          const body = iframe.contentDocument?.body;
-          if (body) {
-            iframe.style.height = `${body.scrollHeight + 40}px`;
-          }
-        } catch {
-          iframe.style.height = "600px";
-        }
-      };
-      iframe.onload = resizeIframe;
-      const contentWindow = iframe.contentWindow;
-      if (contentWindow) {
-        contentWindow.addEventListener("resize", resizeIframe);
-        return () => contentWindow.removeEventListener("resize", resizeIframe);
+      const response = await fetch("/api/broadcasts/preview", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: contentValue })
+      });
+      if (!response.ok) {
+        throw new Error(`Preview failed: ${response.statusText}`);
       }
+      const data = await response.json();
+      setPreview(data.html || "");
+      setShowPreview(true);
+    } catch (err) {
+      console.error("Preview generation error:", err);
+      setError(err instanceof Error ? err.message : "Failed to generate preview");
+    } finally {
+      setLoading(false);
     }
-  }, [previewHtml]);
-  if (!data?.content) {
-    return /* @__PURE__ */ jsx("div", { style: {
-      padding: "2rem",
-      textAlign: "center",
-      color: "#666",
-      border: "1px dashed #ddd",
-      borderRadius: "4px",
-      backgroundColor: "#f9f9f9"
-    }, children: /* @__PURE__ */ jsx("p", { children: "Start adding content to see the email preview" }) });
-  }
-  if (loading) {
-    return /* @__PURE__ */ jsx("div", { style: {
-      padding: "2rem",
-      textAlign: "center",
-      border: "1px solid #e0e0e0",
-      borderRadius: "4px",
-      backgroundColor: "#f9f9f9"
-    }, children: /* @__PURE__ */ jsx("div", { style: { display: "inline-block" }, children: "Loading preview..." }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs("div", { style: {
-      padding: "1rem",
-      border: "1px solid #fee",
-      borderRadius: "4px",
-      backgroundColor: "#fef2f2",
-      color: "#dc2626"
-    }, children: [
-      /* @__PURE__ */ jsx("strong", { children: "Preview Error:" }),
-      " ",
-      error
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "broadcast-preview", style: { marginTop: "1rem" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: {
-      marginBottom: "0.5rem",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center"
-    }, children: [
-      /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1rem", fontWeight: "600" }, children: "Email Preview" }),
-      /* @__PURE__ */ jsx("div", { style: { fontSize: "0.875rem", color: "#666" }, children: data.subject && /* @__PURE__ */ jsxs("span", { children: [
-        "Subject: ",
-        data.subject
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: {
-      border: "1px solid #e0e0e0",
-      borderRadius: "4px",
-      overflow: "hidden",
-      backgroundColor: "#fff"
-    }, children: /* @__PURE__ */ jsx(
-      "iframe",
-      {
-        ref: iframeRef,
-        srcDoc: previewHtml,
-        style: {
-          width: "100%",
-          minHeight: "400px",
-          border: "none",
-          display: "block"
-        },
-        title: "Email Preview",
-        sandbox: "allow-same-origin"
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { style: {
-      marginTop: "0.5rem",
-      fontSize: "0.75rem",
-      color: "#666",
-      textAlign: "center"
-    }, children: "This preview shows how your email will appear when sent" })
+  }, [fields]);
+  return /* @__PURE__ */ jsxs("div", { className: "field-type", children: [
+    /* @__PURE__ */ jsx("div", { className: "field-label", children: "Email Preview" }),
+    !showPreview ? /* @__PURE__ */ jsxs("div", { className: "preview-controls", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: generatePreview,
+          disabled: loading,
+          className: "btn btn--style-primary btn--icon-style-without-border btn--size-small",
+          style: { marginBottom: "1rem" },
+          children: loading ? "Generating Preview..." : "Generate Preview"
+        }
+      ),
+      error && /* @__PURE__ */ jsx("div", { className: "error-message", style: { color: "#dc2626", marginTop: "0.5rem" }, children: error })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "preview-controls", style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowPreview(false),
+            className: "btn btn--style-secondary btn--icon-style-without-border btn--size-small",
+            style: { marginRight: "0.5rem" },
+            children: "Hide Preview"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: generatePreview,
+            disabled: loading,
+            className: "btn btn--style-primary btn--icon-style-without-border btn--size-small",
+            children: loading ? "Regenerating..." : "Refresh Preview"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "email-preview-container", children: /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          srcDoc: preview,
+          style: {
+            width: "100%",
+            height: "600px",
+            border: "1px solid #e5e7eb",
+            borderRadius: "0.375rem",
+            backgroundColor: "white"
+          },
+          title: "Email Preview"
+        }
+      ) })
+    ] })
   ] });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-plugin-newsletter",
-  "version": "0.20.4",
+  "version": "0.20.5",
   "description": "Complete newsletter management plugin for Payload CMS with subscriber management, magic link authentication, and email service integration",
   "type": "module",
   "main": "./dist/index.js",