@nitrogenbuilder/connector-payload 0.1.2 → 0.1.3

package/dist/components/LockedJsonField.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export declare const LockedJsonField: React.FC<{
+    path: string;
+    field: {
+        name: string;
+        admin?: {
+            description?: string;
+        };
+    };
+}>;

package/dist/components/LockedJsonField.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useField } from "@payloadcms/ui";
+export const LockedJsonField = ({ path, field }) => {
+    const [unlocked, setUnlocked] = useState(false);
+    const { value, setValue } = useField({ path });
+    const displayValue = value ? JSON.stringify(value, null, 2) : "";
+    return (_jsxs("div", { style: { marginBottom: "1.5rem" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.5rem" }, children: [_jsx("label", { style: { fontWeight: 500 }, children: field.name }), _jsx("button", { type: "button", onClick: () => setUnlocked(!unlocked), style: {
+                            padding: "4px 12px",
+                            fontSize: "12px",
+                            background: unlocked ? "#ef4444" : "#6b7280",
+                            color: "#fff",
+                            border: "none",
+                            borderRadius: "4px",
+                            cursor: "pointer",
+                        }, children: unlocked ? "Lock" : "Unlock Edit" })] }), _jsx("textarea", { value: displayValue, readOnly: !unlocked, onChange: (e) => {
+                    if (!unlocked)
+                        return;
+                    try {
+                        setValue(JSON.parse(e.target.value));
+                    }
+                    catch {
+                        // Allow typing invalid JSON while editing
+                    }
+                }, style: {
+                    width: "100%",
+                    minHeight: "120px",
+                    fontFamily: "monospace",
+                    fontSize: "12px",
+                    padding: "8px",
+                    background: unlocked ? "#1a1a2e" : "#111",
+                    color: unlocked ? "#e2e8f0" : "#888",
+                    border: `1px solid ${unlocked ? "#ef4444" : "#333"}`,
+                    borderRadius: "4px",
+                    resize: "vertical",
+                } }), field.admin?.description && (_jsx("p", { style: { fontSize: "12px", color: "#888", marginTop: "4px" }, children: field.admin.description }))] }));
+};

package/dist/components/NitrogenEditButton.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 export const NitrogenEditButton = ({ collection }) => {
     const [id, setId] = useState(undefined);
     const [token, setToken] = useState(undefined);
+    const [hasDevelopmentUrl, setHasDevelopmentUrl] = useState(false);
     useEffect(() => {
         const segments = window.location.pathname.split("/").filter(Boolean);
         // segments: ["admin", "collections", "{collection-slug}", "{id}"]
@@ -17,6 +18,9 @@ export const NitrogenEditButton = ({ collection }) => {
             if (data.connectorToken) {
                 setToken(data.connectorToken);
             }
+            if (data.developmentUrl) {
+                setHasDevelopmentUrl(true);
+            }
         })
             .catch((err) => {
             console.error("Failed to fetch nitrogen settings:", err);
@@ -26,18 +30,24 @@ export const NitrogenEditButton = ({ collection }) => {
         return null;
     // Determine which query param to use based on collection type
     const param = collection === "nitrogen-templates" ? "templateId" : "pageId";
-    // Always pass the collection slug so the editor knows exactly which collection to query.
-    const href = `/nitrogen-editor?token=${encodeURIComponent(token)}&collection=${encodeURIComponent(collection)}&${param}=${id}`;
-    return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: {
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "8px",
-            padding: "8px 16px",
-            background: "#6366f1",
-            color: "#fff",
-            borderRadius: "4px",
-            textDecoration: "none",
-            fontSize: "14px",
-            fontWeight: 500,
-        }, children: "Edit with Nitrogen" }));
+    const baseHref = `/nitrogen-editor?token=${encodeURIComponent(token)}&collection=${encodeURIComponent(collection)}&${param}=${id}`;
+    const buttonStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "8px 16px",
+        background: "#6366f1",
+        color: "#fff",
+        borderRadius: "4px",
+        textDecoration: "none",
+        fontSize: "14px",
+        fontWeight: 500,
+    };
+    if (!hasDevelopmentUrl) {
+        return (_jsx("a", { href: baseHref, target: "_blank", rel: "noopener noreferrer", style: buttonStyle, children: "Edit with Nitrogen" }));
+    }
+    return (_jsxs("div", { style: { display: "flex", gap: "8px" }, children: [_jsx("a", { href: baseHref, target: "_blank", rel: "noopener noreferrer", style: buttonStyle, children: "Edit (Live)" }), _jsx("a", { href: `${baseHref}&development=true`, target: "_blank", rel: "noopener noreferrer", style: {
+                    ...buttonStyle,
+                    background: "#374151",
+                }, children: "Edit (Dev)" })] }));
 };

package/dist/components/NitrogenViewButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const NitrogenViewButton: React.FC<{
+    collection: string;
+}>;

package/dist/components/NitrogenViewButton.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+export const NitrogenViewButton = ({ collection }) => {
+    const [slug, setSlug] = useState(undefined);
+    const [frontendUrl, setFrontendUrl] = useState(undefined);
+    useEffect(() => {
+        // Get the document ID from the URL
+        const segments = window.location.pathname.split("/").filter(Boolean);
+        const docId = segments.length >= 4 ? segments[3] : undefined;
+        if (!docId)
+            return;
+        // Fetch the document to get its slug
+        fetch(`/api/${collection}/${docId}`)
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.slug) {
+                setSlug(data.slug);
+            }
+        })
+            .catch((err) => {
+            console.error("Failed to fetch document:", err);
+        });
+        // Fetch nitrogen settings to get the frontend URL
+        fetch("/api/globals/nitrogen-settings")
+            .then((res) => res.json())
+            .then((data) => {
+            const url = data.developmentUrl || data.frontendUrl;
+            if (url) {
+                setFrontendUrl(url.replace(/\/$/, ""));
+            }
+        })
+            .catch((err) => {
+            console.error("Failed to fetch nitrogen settings:", err);
+        });
+    }, [collection]);
+    if (!slug || !frontendUrl)
+        return null;
+    const href = `${frontendUrl}/${slug}`;
+    return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "8px 16px",
+            background: "#10b981",
+            color: "#fff",
+            borderRadius: "4px",
+            textDecoration: "none",
+            fontSize: "14px",
+            fontWeight: 500,
+        }, children: "View Page" }));
+};

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export declare const nitrogenConnectorPlugin: (options?: NitrogenConnectorPlugin
 export { NitrogenTemplates } from "./collections/NitrogenTemplates";
 export { NitrogenSettings } from "./globals/NitrogenSettings";
 export { NitrogenEditButton } from "./components/NitrogenEditButton";
+export { NitrogenViewButton } from "./components/NitrogenViewButton";
 export { buildDynamicData, getNitrogenSettings } from "./endpoints/helpers";
 export { createCollectionEndpoints } from "./endpoints/collection-endpoints";
 export { nitrogen } from "@nitrogenbuilder/client-core";

package/dist/index.js

@@ -12,25 +12,23 @@ const nitrogenRequiredFields = [
     {
         name: "nitrogenData",
         type: "json",
-        admin: { description: "Nitrogen page builder JSON module tree" },
+        admin: {
+            description: "Nitrogen page builder JSON module tree",
+            components: {
+                Field: "nitrogen-connector-payload/components/LockedJsonField#LockedJsonField",
+            },
+        },
     },
     {
         name: "pageSettings",
         type: "json",
-        admin: { description: "Page-level Nitrogen settings" },
-    },
-    { name: "title", type: "text", required: true },
-    { name: "slug", type: "text", required: true, unique: true, index: true },
-    {
-        name: "status",
-        type: "select",
-        options: [
-            { label: "Draft", value: "draft" },
-            { label: "Published", value: "published" },
-        ],
-        defaultValue: "draft",
+        admin: {
+            description: "Page-level Nitrogen settings",
+            components: {
+                Field: "nitrogen-connector-payload/components/LockedJsonField#LockedJsonField",
+            },
+        },
     },
-    { name: "author", type: "relationship", relationTo: "users" },
 ];
 export const nitrogenConnectorPlugin = (options = {}) => (incomingConfig) => {
     if (options.disabled) {
@@ -111,7 +109,11 @@ export const nitrogenConnectorPlugin = (options = {}) => (incomingConfig) => {
                         beforeDocumentControls: [
                             ...beforeControls,
                             {
-                                path: "@nitrogenbuilder/connector-payload/components/NitrogenEditButton#NitrogenEditButton",
+                                path: "nitrogen-connector-payload/components/NitrogenViewButton#NitrogenViewButton",
+                                clientProps: { collection: slug },
+                            },
+                            {
+                                path: "nitrogen-connector-payload/components/NitrogenEditButton#NitrogenEditButton",
                                 clientProps: { collection: slug },
                             },
                         ],
@@ -132,6 +134,7 @@ export { NitrogenTemplates } from "./collections/NitrogenTemplates";
 export { NitrogenSettings } from "./globals/NitrogenSettings";
 // Editor exports
 export { NitrogenEditButton } from "./components/NitrogenEditButton";
+export { NitrogenViewButton } from "./components/NitrogenViewButton";
 // Helper exports for consumers building custom frontend routes
 export { buildDynamicData, getNitrogenSettings } from "./endpoints/helpers";
 // Collection endpoint factory for consumers who need custom endpoint generation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitrogenbuilder/connector-payload",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Nitrogen page builder connector plugin for Payload CMS 3.x",
   "author": "Leonardo Dentzien <leo@torchmedia.ca>",
   "type": "module",