@delmaredigital/payload-puck 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delmaredigital/payload-puck",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Puck visual page builder plugin for Payload CMS",
   "type": "module",
   "license": "MIT",
@@ -62,6 +62,10 @@
     "./editor": {
       "import": "./dist/editor/index.js",
       "types": "./dist/editor/index.d.ts"
+    },
+    "./ai": {
+      "import": "./dist/ai/index.js",
+      "types": "./dist/ai/index.d.ts"
     }
   },
   "files": [
@@ -72,19 +76,23 @@
     "generate-version": "node scripts/generate-version.js",
     "prebuild": "pnpm generate-version",
     "build": "tsc && pnpm copy:css",
-    "copy:css": "cp src/fields/*.css dist/fields/ 2>/dev/null || true",
+    "copy:css": "cp src/fields/*.css dist/fields/ 2>/dev/null || true && mkdir -p dist/fields/richtext && cp src/fields/richtext/*.css dist/fields/richtext/ 2>/dev/null || true && cp src/editor/*.css dist/editor/ 2>/dev/null || true",
     "dev": "pnpm generate-version && tsc --watch",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist",
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
-    "@measured/puck": ">=0.20.0",
-    "@payloadcms/next": ">=3.0.0",
-    "@payloadcms/ui": ">=3.0.0",
-    "next": ">=14.0.0 || >=15.0.0 || >=16.0.0",
-    "payload": ">=3.0.0",
-    "react": ">=18.0.0 || >=19.0.0"
+    "@payloadcms/next": ">=3.69.0",
+    "@payloadcms/ui": ">=3.69.0",
+    "@puckeditor/core": ">=0.21.0",
+    "@tailwindcss/postcss": ">=4.0.0",
+    "next": ">=15.4.8",
+    "payload": ">=3.69.0",
+    "postcss": ">=8.0.0",
+    "react": ">=19.2.1",
+    "tailwindcss": ">=3.0.0 || >=4.0.0",
+    "zod": ">=3.0.0"
   },
   "peerDependenciesMeta": {
     "@payloadcms/ui": {
@@ -92,10 +100,24 @@
     },
     "@payloadcms/next": {
       "optional": true
+    },
+    "postcss": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    },
+    "@tailwindcss/postcss": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@measured/puck-plugin-heading-analyzer": "^0.20.2",
+    "@puckeditor/cloud-client": "^0.5.0",
+    "@puckeditor/plugin-ai": "^0.5.0",
+    "@puckeditor/plugin-heading-analyzer": "^0.21.0",
     "@tiptap/core": "^3.14.0",
     "@tiptap/extension-color": "^3.14.0",
     "@tiptap/extension-highlight": "^3.14.0",
@@ -107,14 +129,16 @@
     "@tiptap/extension-underline": "^3.14.0",
     "@tiptap/react": "^3.14.0",
     "@tiptap/starter-kit": "^3.14.0",
+    "html-react-parser": "^5.2.11",
     "lucide-react": "^0.469.0"
   },
   "devDependencies": {
-    "@measured/puck": "^0.20.2",
     "@payloadcms/next": "^3.69.0",
     "@payloadcms/ui": "^3.69.0",
+    "@puckeditor/core": "^0.21.0",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "next": "^16.1.1",
     "payload": "^3.69.0",
     "react": "^19.2.3",

package/dist/components/typography/RichText.d.ts

@@ -1,20 +0,0 @@
-/**
- * RichText Component - Puck Server Configuration
- *
- * Server-safe config for rendering. Uses a simple textarea for the field.
- * The editor config (RichText.editor.tsx) uses Tiptap for the visual editor.
- */
-import type { ComponentConfig } from '@measured/puck';
-import { type PaddingValue, type DimensionsValue, type ColorValue, type AnimationValue } from '../../fields/shared';
-import { type Alignment } from '../../fields/AlignmentField';
-export interface RichTextProps {
-    content: string;
-    alignment: Alignment | null;
-    textColor: ColorValue | null;
-    dimensions: DimensionsValue | null;
-    animation: AnimationValue | null;
-    margin: PaddingValue | null;
-    customPadding: PaddingValue | null;
-}
-export declare const RichTextConfig: ComponentConfig;
-//# sourceMappingURL=RichText.d.ts.map

package/dist/components/typography/RichText.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../../src/components/typography/RichText.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAOL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,cAAc,EACpB,MAAM,qBAAqB,CAAA;AAM5B,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAclF,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,SAAS,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,UAAU,GAAG,IAAI,CAAA;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;IAClC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,aAAa,EAAE,YAAY,GAAG,IAAI,CAAA;CACnC;AAYD,eAAO,MAAM,cAAc,EAAE,eAgE5B,CAAA"}

package/dist/components/typography/RichText.js

@@ -1,73 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn, marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, colorValueToCSS, alignmentMap, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { createMarginField } from '../../fields/MarginField';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createColorPickerField } from '../../fields/ColorPickerField';
-import { createAlignmentField } from '../../fields/AlignmentField';
-import { createAnimationField } from '../../fields/AnimationField';
-import { createResetField } from '../../fields/ResetField';
-// Default padding with standard horizontal spacing (replaces hardcoded px-4)
-const DEFAULT_PADDING = {
-    top: 0,
-    right: 16,
-    bottom: 0,
-    left: 16,
-    unit: 'px',
-    linked: false,
-};
-const defaultProps = {
-    content: '<p>Enter your content here...</p>',
-    alignment: null,
-    textColor: null,
-    dimensions: null,
-    animation: null,
-    margin: null,
-    customPadding: DEFAULT_PADDING, // Default 16px horizontal padding, visible in editor
-};
-export const RichTextConfig = {
-    label: 'Rich Text',
-    fields: {
-        _reset: createResetField({ defaultProps }),
-        content: {
-            type: 'textarea',
-            label: 'Content (HTML)',
-        },
-        textColor: createColorPickerField({ label: 'Text Color' }),
-        dimensions: createDimensionsField({ label: 'Dimensions' }),
-        alignment: createAlignmentField({ label: 'Alignment' }),
-        animation: createAnimationField({ label: 'Animation' }),
-        // Spacing (grouped at bottom)
-        margin: createMarginField({ label: 'Margin' }),
-        customPadding: createPaddingField({ label: 'Padding' }),
-    },
-    defaultProps,
-    render: ({ content, alignment, textColor, dimensions, animation, margin, customPadding }) => {
-        const dimensionsStyles = dimensions ? dimensionsValueToCSS(dimensions) : undefined;
-        const style = {
-            ...dimensionsStyles,
-        };
-        const marginCSS = marginValueToCSS(margin);
-        if (marginCSS) {
-            style.margin = marginCSS;
-        }
-        const customPaddingCSS = paddingValueToCSS(customPadding);
-        if (customPaddingCSS) {
-            style.padding = customPaddingCSS;
-        }
-        // Apply text color from ColorValue
-        const colorCSS = colorValueToCSS(textColor);
-        if (colorCSS) {
-            style.color = colorCSS;
-        }
-        const alignmentValue = alignment ?? 'left';
-        const alignmentClass = alignmentMap[alignmentValue] || alignmentMap.left;
-        // Handle empty content
-        if (!content || content === '<p></p>') {
-            return (_jsx(AnimatedWrapper, { animation: animation, children: _jsx("section", { className: cn('relative overflow-hidden', alignmentClass), style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: "prose dark:prose-invert max-w-none", children: _jsx("p", { children: _jsx("em", { children: "No content available" }) }) }) }) }));
-        }
-        return (_jsx(AnimatedWrapper, { animation: animation, children: _jsx("section", { className: cn('relative overflow-hidden', alignmentClass), style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: "prose dark:prose-invert max-w-none", dangerouslySetInnerHTML: { __html: content } }) }) }));
-    },
-};
-//# sourceMappingURL=RichText.js.map

package/dist/components/typography/RichText.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../../src/components/typography/RichText.tsx"],"names":[],"mappings":"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"}

package/dist/fields/TiptapField.d.ts

@@ -1,40 +0,0 @@
-/**
- * TiptapField - Rich Text Editor Field for Puck
- *
- * A custom Puck field that provides WYSIWYG rich text editing using Tiptap.
- * Outputs HTML content that can be rendered with dangerouslySetInnerHTML.
- *
- * Features:
- * - Theme-aware "inherit" color option for text that adapts to dark/light mode
- * - Expanded color palette organized by category
- * - Strikethrough and highlight text styling
- * - Font size options (small, normal, large, extra large)
- * - Full toolbar with all formatting options
- * - HTML source view/edit mode
- */
-import React from 'react';
-import type { CustomField } from '@measured/puck';
-import './tiptap-styles.css';
-import './richtext-output.css';
-interface TiptapFieldProps {
-    value: string;
-    onChange: (value: string) => void;
-    label?: string;
-    readOnly?: boolean;
-}
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        fontSize: {
-            setFontSize: (size: string) => ReturnType;
-            unsetFontSize: () => ReturnType;
-        };
-    }
-}
-declare function TiptapFieldInner({ value, onChange, label, readOnly }: TiptapFieldProps): import("react/jsx-runtime").JSX.Element;
-export declare const TiptapField: React.MemoExoticComponent<typeof TiptapFieldInner>;
-export declare function createTiptapField(config: {
-    label?: string;
-    placeholder?: string;
-}): CustomField<string>;
-export {};
-//# sourceMappingURL=TiptapField.d.ts.map

package/dist/fields/TiptapField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TiptapField.d.ts","sourceRoot":"","sources":["../../src/fields/TiptapField.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA6E,MAAM,OAAO,CAAA;AACjG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AA2CjD,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAsZ9B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAMD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,QAAQ,EAAE;YACR,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,UAAU,CAAA;YACzC,aAAa,EAAE,MAAM,UAAU,CAAA;SAChC,CAAA;KACF;CACF;AA8hBD,iBAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CA6X/E;AAED,eAAO,MAAM,WAAW,oDAAyB,CAAA;AAMjD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,GAAG,WAAW,CAAC,MAAM,CAAC,CActB"}