@delmaredigital/payload-puck 0.1.0

package/dist/admin/index.d.mts

@@ -0,0 +1,157 @@
+import { Config, Plugin, Data } from '@measured/puck';
+import { Field } from 'payload';
+
+/**
+ * Props for the PuckEditorView component
+ */
+interface PuckEditorViewProps {
+    /**
+     * Puck configuration with components and settings
+     */
+    config: Config;
+    /**
+     * Collection slug for API endpoints
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Base API path for Puck operations
+     * @default '/api/puck'
+     */
+    apiBasePath?: string;
+    /**
+     * URL to navigate to when back button is clicked
+     * Falls back to /admin/collections/{collectionSlug}
+     */
+    backUrl?: string;
+    /**
+     * Preview URL or function to generate preview URL from slug
+     */
+    previewUrl?: string | ((slug: string) => string);
+    /**
+     * Layout styles for theme-aware preview
+     */
+    layoutStyles?: Record<string, {
+        background: string;
+        isDark: boolean;
+    }>;
+    /**
+     * Key in root.props to read layout value from
+     * @default 'pageLayout'
+     */
+    layoutKey?: string;
+    /**
+     * Additional Puck plugins to use.
+     * The headingAnalyzer plugin is included by default.
+     * Set to `false` to disable all default plugins.
+     */
+    plugins?: Plugin[] | false;
+    /**
+     * Callback on successful save
+     */
+    onSaveSuccess?: (data: Data) => void;
+    /**
+     * Callback on save error
+     */
+    onSaveError?: (error: Error) => void;
+}
+
+/**
+ * Props for EditWithPuckButton when used standalone
+ */
+interface EditWithPuckButtonProps {
+    /**
+     * Document ID to edit
+     */
+    id?: string;
+    /**
+     * Collection slug
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Custom path pattern for the Puck editor
+     * Use {id} as placeholder for the document ID
+     * @default '/pages/{id}/edit'
+     */
+    editorPathPattern?: string;
+    /**
+     * Button label
+     * @default 'Edit with Puck'
+     */
+    label?: string;
+    /**
+     * Whether to show as icon only
+     * @default false
+     */
+    iconOnly?: boolean;
+}
+
+/**
+ * Props for configuring the EditWithPuckCell component
+ */
+interface EditWithPuckCellConfig {
+    /**
+     * Collection slug for building the editor URL
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Custom editor path pattern
+     * Use {id} as placeholder for the document ID
+     * @default '/admin/puck/{collectionSlug}/{id}/edit'
+     */
+    editorPathPattern?: string;
+}
+
+/**
+ * Configuration for generating the edit button field
+ */
+interface AdminComponentsConfig {
+    /**
+     * Collection slug for the pages collection
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * URL pattern for the Puck editor page
+     * Use {id} as placeholder for document ID
+     * @default '/pages/{id}/edit'
+     */
+    editorPathPattern?: string;
+    /**
+     * Button label text
+     * @default 'Edit with Puck'
+     */
+    buttonLabel?: string;
+    /**
+     * Position of the edit button in admin
+     * @default 'sidebar'
+     */
+    buttonPosition?: 'sidebar' | 'main';
+}
+/**
+ * Generates the UI field configuration for the Edit with Puck button
+ *
+ * Use this if you want to manually add the edit button field to your
+ * collection instead of using the plugin's auto-generation.
+ *
+ * @example
+ * ```ts
+ * import { generatePuckEditField } from '@delmaredigital/payload-puck/admin'
+ *
+ * const Pages: CollectionConfig = {
+ *   slug: 'pages',
+ *   fields: [
+ *     // ... other fields
+ *     generatePuckEditField({
+ *       editorPathPattern: '/pages/{id}/edit',
+ *       buttonLabel: 'Visual Editor',
+ *     }),
+ *   ],
+ * }
+ * ```
+ */
+declare function generatePuckEditField(config?: AdminComponentsConfig): Field;
+
+export { type AdminComponentsConfig, type EditWithPuckButtonProps, type EditWithPuckCellConfig, type PuckEditorViewProps, generatePuckEditField };

package/dist/admin/index.d.ts

@@ -0,0 +1,157 @@
+import { Config, Plugin, Data } from '@measured/puck';
+import { Field } from 'payload';
+
+/**
+ * Props for the PuckEditorView component
+ */
+interface PuckEditorViewProps {
+    /**
+     * Puck configuration with components and settings
+     */
+    config: Config;
+    /**
+     * Collection slug for API endpoints
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Base API path for Puck operations
+     * @default '/api/puck'
+     */
+    apiBasePath?: string;
+    /**
+     * URL to navigate to when back button is clicked
+     * Falls back to /admin/collections/{collectionSlug}
+     */
+    backUrl?: string;
+    /**
+     * Preview URL or function to generate preview URL from slug
+     */
+    previewUrl?: string | ((slug: string) => string);
+    /**
+     * Layout styles for theme-aware preview
+     */
+    layoutStyles?: Record<string, {
+        background: string;
+        isDark: boolean;
+    }>;
+    /**
+     * Key in root.props to read layout value from
+     * @default 'pageLayout'
+     */
+    layoutKey?: string;
+    /**
+     * Additional Puck plugins to use.
+     * The headingAnalyzer plugin is included by default.
+     * Set to `false` to disable all default plugins.
+     */
+    plugins?: Plugin[] | false;
+    /**
+     * Callback on successful save
+     */
+    onSaveSuccess?: (data: Data) => void;
+    /**
+     * Callback on save error
+     */
+    onSaveError?: (error: Error) => void;
+}
+
+/**
+ * Props for EditWithPuckButton when used standalone
+ */
+interface EditWithPuckButtonProps {
+    /**
+     * Document ID to edit
+     */
+    id?: string;
+    /**
+     * Collection slug
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Custom path pattern for the Puck editor
+     * Use {id} as placeholder for the document ID
+     * @default '/pages/{id}/edit'
+     */
+    editorPathPattern?: string;
+    /**
+     * Button label
+     * @default 'Edit with Puck'
+     */
+    label?: string;
+    /**
+     * Whether to show as icon only
+     * @default false
+     */
+    iconOnly?: boolean;
+}
+
+/**
+ * Props for configuring the EditWithPuckCell component
+ */
+interface EditWithPuckCellConfig {
+    /**
+     * Collection slug for building the editor URL
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * Custom editor path pattern
+     * Use {id} as placeholder for the document ID
+     * @default '/admin/puck/{collectionSlug}/{id}/edit'
+     */
+    editorPathPattern?: string;
+}
+
+/**
+ * Configuration for generating the edit button field
+ */
+interface AdminComponentsConfig {
+    /**
+     * Collection slug for the pages collection
+     * @default 'pages'
+     */
+    collectionSlug?: string;
+    /**
+     * URL pattern for the Puck editor page
+     * Use {id} as placeholder for document ID
+     * @default '/pages/{id}/edit'
+     */
+    editorPathPattern?: string;
+    /**
+     * Button label text
+     * @default 'Edit with Puck'
+     */
+    buttonLabel?: string;
+    /**
+     * Position of the edit button in admin
+     * @default 'sidebar'
+     */
+    buttonPosition?: 'sidebar' | 'main';
+}
+/**
+ * Generates the UI field configuration for the Edit with Puck button
+ *
+ * Use this if you want to manually add the edit button field to your
+ * collection instead of using the plugin's auto-generation.
+ *
+ * @example
+ * ```ts
+ * import { generatePuckEditField } from '@delmaredigital/payload-puck/admin'
+ *
+ * const Pages: CollectionConfig = {
+ *   slug: 'pages',
+ *   fields: [
+ *     // ... other fields
+ *     generatePuckEditField({
+ *       editorPathPattern: '/pages/{id}/edit',
+ *       buttonLabel: 'Visual Editor',
+ *     }),
+ *   ],
+ * }
+ * ```
+ */
+declare function generatePuckEditField(config?: AdminComponentsConfig): Field;
+
+export { type AdminComponentsConfig, type EditWithPuckButtonProps, type EditWithPuckCellConfig, type PuckEditorViewProps, generatePuckEditField };

package/dist/admin/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+// src/admin/generateAdminComponents.ts
+function generatePuckEditField(config = {}) {
+  const {
+    collectionSlug = "pages",
+    editorPathPattern = "/pages/{id}/edit",
+    buttonLabel = "Edit with Puck",
+    buttonPosition = "sidebar"
+  } = config;
+  return {
+    name: "puckEdit",
+    type: "ui",
+    admin: {
+      position: buttonPosition,
+      components: {
+        Field: "@delmaredigital/payload-puck/admin/client#EditWithPuckButton",
+        Cell: "@delmaredigital/payload-puck/admin/client#EditWithPuckCell"
+      },
+      custom: {
+        collectionSlug,
+        editorPathPattern,
+        label: buttonLabel
+      }
+    }
+  };
+}
+
+exports.generatePuckEditField = generatePuckEditField;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/admin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/generateAdminComponents.ts"],"names":[],"mappings":";;;AAmDO,SAAS,qBAAA,CAAsB,MAAA,GAAgC,EAAC,EAAU;AAC/E,EAAA,MAAM;AAAA,IACJ,cAAA,GAAiB,OAAA;AAAA,IACjB,iBAAA,GAAoB,kBAAA;AAAA,IACpB,WAAA,GAAc,gBAAA;AAAA,IACd,cAAA,GAAiB;AAAA,GACnB,GAAI,MAAA;AAEJ,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,UAAA;AAAA,IACN,IAAA,EAAM,IAAA;AAAA,IACN,KAAA,EAAO;AAAA,MACL,QAAA,EAAU,cAAA;AAAA,MACV,UAAA,EAAY;AAAA,QACV,KAAA,EAAO,8DAAA;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,cAAA;AAAA,QACA,iBAAA;AAAA,QACA,KAAA,EAAO;AAAA;AACT;AACF,GACF;AACF","file":"index.js","sourcesContent":["import type { Field } from 'payload'\n\n/**\n * Configuration for generating the edit button field\n */\nexport interface AdminComponentsConfig {\n  /**\n   * Collection slug for the pages collection\n   * @default 'pages'\n   */\n  collectionSlug?: string\n  /**\n   * URL pattern for the Puck editor page\n   * Use {id} as placeholder for document ID\n   * @default '/pages/{id}/edit'\n   */\n  editorPathPattern?: string\n  /**\n   * Button label text\n   * @default 'Edit with Puck'\n   */\n  buttonLabel?: string\n  /**\n   * Position of the edit button in admin\n   * @default 'sidebar'\n   */\n  buttonPosition?: 'sidebar' | 'main'\n}\n\n/**\n * Generates the UI field configuration for the Edit with Puck button\n *\n * Use this if you want to manually add the edit button field to your\n * collection instead of using the plugin's auto-generation.\n *\n * @example\n * ```ts\n * import { generatePuckEditField } from '@delmaredigital/payload-puck/admin'\n *\n * const Pages: CollectionConfig = {\n *   slug: 'pages',\n *   fields: [\n *     // ... other fields\n *     generatePuckEditField({\n *       editorPathPattern: '/pages/{id}/edit',\n *       buttonLabel: 'Visual Editor',\n *     }),\n *   ],\n * }\n * ```\n */\nexport function generatePuckEditField(config: AdminComponentsConfig = {}): Field {\n  const {\n    collectionSlug = 'pages',\n    editorPathPattern = '/pages/{id}/edit',\n    buttonLabel = 'Edit with Puck',\n    buttonPosition = 'sidebar',\n  } = config\n\n  return {\n    name: 'puckEdit',\n    type: 'ui',\n    admin: {\n      position: buttonPosition,\n      components: {\n        Field: '@delmaredigital/payload-puck/admin/client#EditWithPuckButton',\n        Cell: '@delmaredigital/payload-puck/admin/client#EditWithPuckCell',\n      },\n      custom: {\n        collectionSlug,\n        editorPathPattern,\n        label: buttonLabel,\n      },\n    },\n  }\n}\n"]}

package/dist/admin/index.mjs

@@ -0,0 +1,29 @@
+// src/admin/generateAdminComponents.ts
+function generatePuckEditField(config = {}) {
+  const {
+    collectionSlug = "pages",
+    editorPathPattern = "/pages/{id}/edit",
+    buttonLabel = "Edit with Puck",
+    buttonPosition = "sidebar"
+  } = config;
+  return {
+    name: "puckEdit",
+    type: "ui",
+    admin: {
+      position: buttonPosition,
+      components: {
+        Field: "@delmaredigital/payload-puck/admin/client#EditWithPuckButton",
+        Cell: "@delmaredigital/payload-puck/admin/client#EditWithPuckCell"
+      },
+      custom: {
+        collectionSlug,
+        editorPathPattern,
+        label: buttonLabel
+      }
+    }
+  };
+}
+
+export { generatePuckEditField };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/admin/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/generateAdminComponents.ts"],"names":[],"mappings":";AAmDO,SAAS,qBAAA,CAAsB,MAAA,GAAgC,EAAC,EAAU;AAC/E,EAAA,MAAM;AAAA,IACJ,cAAA,GAAiB,OAAA;AAAA,IACjB,iBAAA,GAAoB,kBAAA;AAAA,IACpB,WAAA,GAAc,gBAAA;AAAA,IACd,cAAA,GAAiB;AAAA,GACnB,GAAI,MAAA;AAEJ,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,UAAA;AAAA,IACN,IAAA,EAAM,IAAA;AAAA,IACN,KAAA,EAAO;AAAA,MACL,QAAA,EAAU,cAAA;AAAA,MACV,UAAA,EAAY;AAAA,QACV,KAAA,EAAO,8DAAA;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,cAAA;AAAA,QACA,iBAAA;AAAA,QACA,KAAA,EAAO;AAAA;AACT;AACF,GACF;AACF","file":"index.mjs","sourcesContent":["import type { Field } from 'payload'\n\n/**\n * Configuration for generating the edit button field\n */\nexport interface AdminComponentsConfig {\n  /**\n   * Collection slug for the pages collection\n   * @default 'pages'\n   */\n  collectionSlug?: string\n  /**\n   * URL pattern for the Puck editor page\n   * Use {id} as placeholder for document ID\n   * @default '/pages/{id}/edit'\n   */\n  editorPathPattern?: string\n  /**\n   * Button label text\n   * @default 'Edit with Puck'\n   */\n  buttonLabel?: string\n  /**\n   * Position of the edit button in admin\n   * @default 'sidebar'\n   */\n  buttonPosition?: 'sidebar' | 'main'\n}\n\n/**\n * Generates the UI field configuration for the Edit with Puck button\n *\n * Use this if you want to manually add the edit button field to your\n * collection instead of using the plugin's auto-generation.\n *\n * @example\n * ```ts\n * import { generatePuckEditField } from '@delmaredigital/payload-puck/admin'\n *\n * const Pages: CollectionConfig = {\n *   slug: 'pages',\n *   fields: [\n *     // ... other fields\n *     generatePuckEditField({\n *       editorPathPattern: '/pages/{id}/edit',\n *       buttonLabel: 'Visual Editor',\n *     }),\n *   ],\n * }\n * ```\n */\nexport function generatePuckEditField(config: AdminComponentsConfig = {}): Field {\n  const {\n    collectionSlug = 'pages',\n    editorPathPattern = '/pages/{id}/edit',\n    buttonLabel = 'Edit with Puck',\n    buttonPosition = 'sidebar',\n  } = config\n\n  return {\n    name: 'puckEdit',\n    type: 'ui',\n    admin: {\n      position: buttonPosition,\n      components: {\n        Field: '@delmaredigital/payload-puck/admin/client#EditWithPuckButton',\n        Cell: '@delmaredigital/payload-puck/admin/client#EditWithPuckCell',\n      },\n      custom: {\n        collectionSlug,\n        editorPathPattern,\n        label: buttonLabel,\n      },\n    },\n  }\n}\n"]}