@delmaredigital/payload-puck 0.4.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +429 -17
- package/dist/admin/PuckEditorView.d.ts +1 -1
- package/dist/admin/PuckEditorView.d.ts.map +1 -1
- package/dist/ai/collections/AiContext.d.ts +16 -0
- package/dist/ai/collections/AiContext.d.ts.map +1 -0
- package/dist/ai/collections/AiContext.js +87 -0
- package/dist/ai/collections/AiContext.js.map +1 -0
- package/dist/ai/collections/AiPrompts.d.ts +10 -0
- package/dist/ai/collections/AiPrompts.d.ts.map +1 -0
- package/dist/ai/collections/AiPrompts.js +63 -0
- package/dist/ai/collections/AiPrompts.js.map +1 -0
- package/dist/ai/createAiApiRoutes.d.ts +40 -0
- package/dist/ai/createAiApiRoutes.d.ts.map +1 -0
- package/dist/ai/createAiApiRoutes.js +106 -0
- package/dist/ai/createAiApiRoutes.js.map +1 -0
- package/dist/ai/createAiGenerate.d.ts +65 -0
- package/dist/ai/createAiGenerate.d.ts.map +1 -0
- package/dist/ai/createAiGenerate.js +106 -0
- package/dist/ai/createAiGenerate.js.map +1 -0
- package/dist/ai/createAiPlugin.d.ts +39 -0
- package/dist/ai/createAiPlugin.d.ts.map +1 -0
- package/dist/ai/createAiPlugin.js +61 -0
- package/dist/ai/createAiPlugin.js.map +1 -0
- package/dist/ai/hooks/useAiContext.d.ts +63 -0
- package/dist/ai/hooks/useAiContext.d.ts.map +1 -0
- package/dist/ai/hooks/useAiContext.js +146 -0
- package/dist/ai/hooks/useAiContext.js.map +1 -0
- package/dist/ai/hooks/useAiPrompts.d.ts +25 -0
- package/dist/ai/hooks/useAiPrompts.d.ts.map +1 -0
- package/dist/ai/hooks/useAiPrompts.js +74 -0
- package/dist/ai/hooks/useAiPrompts.js.map +1 -0
- package/dist/ai/index.d.ts +51 -0
- package/dist/ai/index.d.ts.map +1 -0
- package/dist/ai/index.js +69 -0
- package/dist/ai/index.js.map +1 -0
- package/dist/ai/plugins/ContextEditorPanel.d.ts +9 -0
- package/dist/ai/plugins/ContextEditorPanel.d.ts.map +1 -0
- package/dist/ai/plugins/ContextEditorPanel.js +399 -0
- package/dist/ai/plugins/ContextEditorPanel.js.map +1 -0
- package/dist/ai/plugins/PromptEditorPanel.d.ts +9 -0
- package/dist/ai/plugins/PromptEditorPanel.d.ts.map +1 -0
- package/dist/ai/plugins/PromptEditorPanel.js +270 -0
- package/dist/ai/plugins/PromptEditorPanel.js.map +1 -0
- package/dist/ai/plugins/contextEditorPlugin.d.ts +30 -0
- package/dist/ai/plugins/contextEditorPlugin.d.ts.map +1 -0
- package/dist/ai/plugins/contextEditorPlugin.js +40 -0
- package/dist/ai/plugins/contextEditorPlugin.js.map +1 -0
- package/dist/ai/plugins/promptApiRoutes.d.ts +68 -0
- package/dist/ai/plugins/promptApiRoutes.d.ts.map +1 -0
- package/dist/ai/plugins/promptApiRoutes.js +181 -0
- package/dist/ai/plugins/promptApiRoutes.js.map +1 -0
- package/dist/ai/plugins/promptEditorPlugin.d.ts +29 -0
- package/dist/ai/plugins/promptEditorPlugin.d.ts.map +1 -0
- package/dist/ai/plugins/promptEditorPlugin.js +39 -0
- package/dist/ai/plugins/promptEditorPlugin.js.map +1 -0
- package/dist/ai/presets/componentAiDefaults.d.ts +40 -0
- package/dist/ai/presets/componentAiDefaults.d.ts.map +1 -0
- package/dist/ai/presets/componentAiDefaults.js +239 -0
- package/dist/ai/presets/componentAiDefaults.js.map +1 -0
- package/dist/ai/presets/index.d.ts +94 -0
- package/dist/ai/presets/index.d.ts.map +1 -0
- package/dist/ai/presets/index.js +110 -0
- package/dist/ai/presets/index.js.map +1 -0
- package/dist/ai/presets/instructions/interactive.d.ts +15 -0
- package/dist/ai/presets/instructions/interactive.d.ts.map +1 -0
- package/dist/ai/presets/instructions/interactive.js +334 -0
- package/dist/ai/presets/instructions/interactive.js.map +1 -0
- package/dist/ai/presets/instructions/layout.d.ts +16 -0
- package/dist/ai/presets/instructions/layout.d.ts.map +1 -0
- package/dist/ai/presets/instructions/layout.js +486 -0
- package/dist/ai/presets/instructions/layout.js.map +1 -0
- package/dist/ai/presets/instructions/media.d.ts +15 -0
- package/dist/ai/presets/instructions/media.d.ts.map +1 -0
- package/dist/ai/presets/instructions/media.js +136 -0
- package/dist/ai/presets/instructions/media.js.map +1 -0
- package/dist/ai/presets/instructions/pagePatterns.d.ts +20 -0
- package/dist/ai/presets/instructions/pagePatterns.d.ts.map +1 -0
- package/dist/ai/presets/instructions/pagePatterns.js +290 -0
- package/dist/ai/presets/instructions/pagePatterns.js.map +1 -0
- package/dist/ai/presets/instructions/schemas.d.ts +1247 -0
- package/dist/ai/presets/instructions/schemas.d.ts.map +1 -0
- package/dist/ai/presets/instructions/schemas.js +240 -0
- package/dist/ai/presets/instructions/schemas.js.map +1 -0
- package/dist/ai/presets/instructions/typography.d.ts +16 -0
- package/dist/ai/presets/instructions/typography.d.ts.map +1 -0
- package/dist/ai/presets/instructions/typography.js +192 -0
- package/dist/ai/presets/instructions/typography.js.map +1 -0
- package/dist/ai/tools/index.d.ts +116 -0
- package/dist/ai/tools/index.d.ts.map +1 -0
- package/dist/ai/tools/index.js +214 -0
- package/dist/ai/tools/index.js.map +1 -0
- package/dist/ai/types.d.ts +507 -0
- package/dist/ai/types.d.ts.map +1 -0
- package/dist/ai/types.js +2 -0
- package/dist/ai/types.js.map +1 -0
- package/dist/ai/utils/injectAiConfig.d.ts +67 -0
- package/dist/ai/utils/injectAiConfig.d.ts.map +1 -0
- package/dist/ai/utils/injectAiConfig.js +216 -0
- package/dist/ai/utils/injectAiConfig.js.map +1 -0
- package/dist/api/createPuckApiRoutesWithId.d.ts.map +1 -1
- package/dist/api/createPuckApiRoutesWithId.js +12 -5
- package/dist/api/createPuckApiRoutesWithId.js.map +1 -1
- package/dist/api/index.d.ts +1 -1
- package/dist/api/index.d.ts.map +1 -1
- package/dist/api/index.js +1 -1
- package/dist/api/index.js.map +1 -1
- package/dist/api/types.d.ts +1 -1
- package/dist/api/types.d.ts.map +1 -1
- package/dist/api/utils/mapRootProps.d.ts +19 -0
- package/dist/api/utils/mapRootProps.d.ts.map +1 -1
- package/dist/api/utils/mapRootProps.js +33 -0
- package/dist/api/utils/mapRootProps.js.map +1 -1
- package/dist/components/exports.d.ts +2 -1
- package/dist/components/exports.d.ts.map +1 -1
- package/dist/components/exports.js +5 -1
- package/dist/components/exports.js.map +1 -1
- package/dist/components/interactive/Accordion.d.ts +1 -1
- package/dist/components/interactive/Accordion.d.ts.map +1 -1
- package/dist/components/interactive/Accordion.js +4 -4
- package/dist/components/interactive/Accordion.js.map +1 -1
- package/dist/components/interactive/Accordion.server.d.ts +1 -1
- package/dist/components/interactive/Accordion.server.d.ts.map +1 -1
- package/dist/components/interactive/Button.d.ts +1 -1
- package/dist/components/interactive/Button.d.ts.map +1 -1
- package/dist/components/interactive/Button.server.d.ts +2 -3
- package/dist/components/interactive/Button.server.d.ts.map +1 -1
- package/dist/components/interactive/Button.server.js +1 -2
- package/dist/components/interactive/Button.server.js.map +1 -1
- package/dist/components/interactive/Card.d.ts +1 -1
- package/dist/components/interactive/Card.d.ts.map +1 -1
- package/dist/components/interactive/Card.server.d.ts +1 -1
- package/dist/components/interactive/Card.server.d.ts.map +1 -1
- package/dist/components/interactive/Divider.d.ts +1 -1
- package/dist/components/interactive/Divider.d.ts.map +1 -1
- package/dist/components/interactive/Divider.server.d.ts +1 -1
- package/dist/components/interactive/Divider.server.d.ts.map +1 -1
- package/dist/components/layout/Container.d.ts +3 -1
- package/dist/components/layout/Container.d.ts.map +1 -1
- package/dist/components/layout/Container.js +16 -2
- package/dist/components/layout/Container.js.map +1 -1
- package/dist/components/layout/Container.server.d.ts +3 -1
- package/dist/components/layout/Container.server.d.ts.map +1 -1
- package/dist/components/layout/Container.server.js +5 -2
- package/dist/components/layout/Container.server.js.map +1 -1
- package/dist/components/layout/Flex.d.ts +3 -1
- package/dist/components/layout/Flex.d.ts.map +1 -1
- package/dist/components/layout/Flex.js +18 -2
- package/dist/components/layout/Flex.js.map +1 -1
- package/dist/components/layout/Flex.server.d.ts +3 -1
- package/dist/components/layout/Flex.server.d.ts.map +1 -1
- package/dist/components/layout/Flex.server.js +5 -2
- package/dist/components/layout/Flex.server.js.map +1 -1
- package/dist/components/layout/Grid.d.ts +3 -1
- package/dist/components/layout/Grid.d.ts.map +1 -1
- package/dist/components/layout/Grid.js +15 -2
- package/dist/components/layout/Grid.js.map +1 -1
- package/dist/components/layout/Grid.server.d.ts +3 -1
- package/dist/components/layout/Grid.server.d.ts.map +1 -1
- package/dist/components/layout/Grid.server.js +5 -2
- package/dist/components/layout/Grid.server.js.map +1 -1
- package/dist/components/layout/Section.d.ts +3 -1
- package/dist/components/layout/Section.d.ts.map +1 -1
- package/dist/components/layout/Section.js +32 -5
- package/dist/components/layout/Section.js.map +1 -1
- package/dist/components/layout/Section.server.d.ts +3 -1
- package/dist/components/layout/Section.server.d.ts.map +1 -1
- package/dist/components/layout/Section.server.js +16 -4
- package/dist/components/layout/Section.server.js.map +1 -1
- package/dist/components/layout/Spacer.d.ts +1 -1
- package/dist/components/layout/Spacer.d.ts.map +1 -1
- package/dist/components/layout/Spacer.server.d.ts +1 -1
- package/dist/components/layout/Spacer.server.d.ts.map +1 -1
- package/dist/components/layout/Template.d.ts +1 -1
- package/dist/components/layout/Template.d.ts.map +1 -1
- package/dist/components/layout/Template.server.d.ts +1 -1
- package/dist/components/layout/Template.server.d.ts.map +1 -1
- package/dist/components/media/Image.d.ts +1 -1
- package/dist/components/media/Image.d.ts.map +1 -1
- package/dist/components/media/Image.server.d.ts +1 -1
- package/dist/components/media/Image.server.d.ts.map +1 -1
- package/dist/components/typography/Heading.d.ts +1 -1
- package/dist/components/typography/Heading.d.ts.map +1 -1
- package/dist/components/typography/Heading.server.d.ts +1 -1
- package/dist/components/typography/Heading.server.d.ts.map +1 -1
- package/dist/components/typography/RichText.editor.d.ts +15 -2
- package/dist/components/typography/RichText.editor.d.ts.map +1 -1
- package/dist/components/typography/RichText.editor.js +18 -11
- package/dist/components/typography/RichText.editor.js.map +1 -1
- package/dist/components/typography/RichText.server.d.ts +3 -2
- package/dist/components/typography/RichText.server.d.ts.map +1 -1
- package/dist/components/typography/RichText.server.js +10 -5
- package/dist/components/typography/RichText.server.js.map +1 -1
- package/dist/components/typography/Text.d.ts +1 -1
- package/dist/components/typography/Text.d.ts.map +1 -1
- package/dist/components/typography/Text.server.d.ts +1 -1
- package/dist/components/typography/Text.server.d.ts.map +1 -1
- package/dist/components/typography/index.d.ts +1 -1
- package/dist/components/typography/index.d.ts.map +1 -1
- package/dist/components/typography/index.js +1 -1
- package/dist/components/typography/index.js.map +1 -1
- package/dist/config/config.editor.d.ts +4 -4
- package/dist/config/config.editor.d.ts.map +1 -1
- package/dist/config/index.d.ts +2 -1
- package/dist/config/index.d.ts.map +1 -1
- package/dist/config/merge.d.ts +1 -1
- package/dist/config/merge.d.ts.map +1 -1
- package/dist/config/presets.d.ts +15 -15
- package/dist/config/presets.d.ts.map +1 -1
- package/dist/config/presets.js +2 -2
- package/dist/config/presets.js.map +1 -1
- package/dist/config/types.d.ts +111 -0
- package/dist/config/types.d.ts.map +1 -0
- package/dist/config/types.js +8 -0
- package/dist/config/types.js.map +1 -0
- package/dist/editor/PuckEditor.d.ts +88 -2
- package/dist/editor/PuckEditor.d.ts.map +1 -1
- package/dist/editor/PuckEditor.js +41 -13
- package/dist/editor/PuckEditor.js.map +1 -1
- package/dist/editor/PuckEditorImpl.client.d.ts +49 -4
- package/dist/editor/PuckEditorImpl.client.d.ts.map +1 -1
- package/dist/editor/PuckEditorImpl.client.js +191 -14
- package/dist/editor/PuckEditorImpl.client.js.map +1 -1
- package/dist/editor/ai-plugin-overrides.css +20 -0
- package/dist/editor/components/HeaderActions.d.ts +7 -2
- package/dist/editor/components/HeaderActions.d.ts.map +1 -1
- package/dist/editor/components/HeaderActions.js +16 -3
- package/dist/editor/components/HeaderActions.js.map +1 -1
- package/dist/editor/components/IframeWrapper.d.ts +13 -0
- package/dist/editor/components/IframeWrapper.d.ts.map +1 -1
- package/dist/editor/components/IframeWrapper.js +60 -4
- package/dist/editor/components/IframeWrapper.js.map +1 -1
- package/dist/editor/components/PreviewModal.d.ts +9 -1
- package/dist/editor/components/PreviewModal.d.ts.map +1 -1
- package/dist/editor/components/PreviewModal.js +36 -1
- package/dist/editor/components/PreviewModal.js.map +1 -1
- package/dist/editor/index.d.ts +4 -0
- package/dist/editor/index.d.ts.map +1 -1
- package/dist/editor/index.js +4 -0
- package/dist/editor/index.js.map +1 -1
- package/dist/editor/plugins/VersionHistoryPanel.d.ts +43 -0
- package/dist/editor/plugins/VersionHistoryPanel.d.ts.map +1 -0
- package/dist/editor/plugins/VersionHistoryPanel.js +303 -0
- package/dist/editor/plugins/VersionHistoryPanel.js.map +1 -0
- package/dist/editor/plugins/index.d.ts +6 -3
- package/dist/editor/plugins/index.d.ts.map +1 -1
- package/dist/editor/plugins/index.js +7 -3
- package/dist/editor/plugins/index.js.map +1 -1
- package/dist/editor/plugins/versionHistoryPlugin.d.ts +37 -0
- package/dist/editor/plugins/versionHistoryPlugin.d.ts.map +1 -0
- package/dist/editor/plugins/versionHistoryPlugin.js +36 -0
- package/dist/editor/plugins/versionHistoryPlugin.js.map +1 -0
- package/dist/editor/utils/detectPageTree.d.ts +1 -1
- package/dist/editor/utils/detectPageTree.d.ts.map +1 -1
- package/dist/editor/utils/injectPageTreeFields.d.ts +1 -1
- package/dist/editor/utils/injectPageTreeFields.d.ts.map +1 -1
- package/dist/editor/utils/injectPageTreeFields.js +2 -2
- package/dist/editor/utils/injectPageTreeFields.js.map +1 -1
- package/dist/endpoints/ai.d.ts +36 -0
- package/dist/endpoints/ai.d.ts.map +1 -0
- package/dist/endpoints/ai.js +315 -0
- package/dist/endpoints/ai.js.map +1 -0
- package/dist/endpoints/context.d.ts +30 -0
- package/dist/endpoints/context.d.ts.map +1 -0
- package/dist/endpoints/context.js +123 -0
- package/dist/endpoints/context.js.map +1 -0
- package/dist/endpoints/prompts.d.ts +28 -0
- package/dist/endpoints/prompts.d.ts.map +1 -0
- package/dist/endpoints/prompts.js +118 -0
- package/dist/endpoints/prompts.js.map +1 -0
- package/dist/endpoints/styles.d.ts +19 -0
- package/dist/endpoints/styles.d.ts.map +1 -0
- package/dist/endpoints/styles.js +116 -0
- package/dist/endpoints/styles.js.map +1 -0
- package/dist/fields/AlignmentField.d.ts +1 -1
- package/dist/fields/AlignmentField.d.ts.map +1 -1
- package/dist/fields/AlignmentField.js +1 -0
- package/dist/fields/AlignmentField.js.map +1 -1
- package/dist/fields/AnimationField.d.ts +1 -1
- package/dist/fields/AnimationField.d.ts.map +1 -1
- package/dist/fields/BackgroundField.d.ts +1 -1
- package/dist/fields/BackgroundField.d.ts.map +1 -1
- package/dist/fields/BackgroundField.js +9 -4
- package/dist/fields/BackgroundField.js.map +1 -1
- package/dist/fields/BorderField.d.ts +1 -1
- package/dist/fields/BorderField.d.ts.map +1 -1
- package/dist/fields/BorderField.js +1 -0
- package/dist/fields/BorderField.js.map +1 -1
- package/dist/fields/ColorPickerField.d.ts +1 -1
- package/dist/fields/ColorPickerField.d.ts.map +1 -1
- package/dist/fields/ColorPickerField.js +4 -2
- package/dist/fields/ColorPickerField.js.map +1 -1
- package/dist/fields/ContentAlignmentField.d.ts +66 -0
- package/dist/fields/ContentAlignmentField.d.ts.map +1 -0
- package/dist/fields/ContentAlignmentField.js +255 -0
- package/dist/fields/ContentAlignmentField.js.map +1 -0
- package/dist/fields/DimensionsField.d.ts +1 -1
- package/dist/fields/DimensionsField.d.ts.map +1 -1
- package/dist/fields/DimensionsField.js +8 -2
- package/dist/fields/DimensionsField.js.map +1 -1
- package/dist/fields/FlexAlignmentField.d.ts +1 -1
- package/dist/fields/FlexAlignmentField.d.ts.map +1 -1
- package/dist/fields/FolderPickerField.d.ts +1 -1
- package/dist/fields/FolderPickerField.d.ts.map +1 -1
- package/dist/fields/GradientEditor.d.ts.map +1 -1
- package/dist/fields/GradientEditor.js +3 -0
- package/dist/fields/GradientEditor.js.map +1 -1
- package/dist/fields/LockedField.d.ts +1 -1
- package/dist/fields/LockedField.d.ts.map +1 -1
- package/dist/fields/MarginField.d.ts +1 -1
- package/dist/fields/MarginField.d.ts.map +1 -1
- package/dist/fields/MediaField.d.ts +1 -1
- package/dist/fields/MediaField.d.ts.map +1 -1
- package/dist/fields/MediaField.js +3 -2
- package/dist/fields/MediaField.js.map +1 -1
- package/dist/fields/PaddingField.d.ts +1 -1
- package/dist/fields/PaddingField.d.ts.map +1 -1
- package/dist/fields/PageSegmentField.d.ts +18 -1
- package/dist/fields/PageSegmentField.d.ts.map +1 -1
- package/dist/fields/PageSegmentField.js +106 -1
- package/dist/fields/PageSegmentField.js.map +1 -1
- package/dist/fields/ResetField.d.ts +1 -1
- package/dist/fields/ResetField.d.ts.map +1 -1
- package/dist/fields/ResetField.js +1 -1
- package/dist/fields/ResetField.js.map +1 -1
- package/dist/fields/ResponsiveField.d.ts +1 -1
- package/dist/fields/ResponsiveField.d.ts.map +1 -1
- package/dist/fields/ResponsiveField.js +5 -2
- package/dist/fields/ResponsiveField.js.map +1 -1
- package/dist/fields/ResponsiveVisibilityField.d.ts +1 -1
- package/dist/fields/ResponsiveVisibilityField.d.ts.map +1 -1
- package/dist/fields/ResponsiveVisibilityField.js +4 -3
- package/dist/fields/ResponsiveVisibilityField.js.map +1 -1
- package/dist/fields/SizeField.d.ts +3 -25
- package/dist/fields/SizeField.d.ts.map +1 -1
- package/dist/fields/SizeField.js +8 -34
- package/dist/fields/SizeField.js.map +1 -1
- package/dist/fields/SlugPreviewField.d.ts +1 -1
- package/dist/fields/SlugPreviewField.d.ts.map +1 -1
- package/dist/fields/TemplateField.d.ts +1 -1
- package/dist/fields/TemplateField.d.ts.map +1 -1
- package/dist/fields/TemplateField.js +1 -1
- package/dist/fields/TemplateField.js.map +1 -1
- package/dist/fields/TransformField.d.ts +1 -1
- package/dist/fields/TransformField.d.ts.map +1 -1
- package/dist/fields/TransformField.js +2 -0
- package/dist/fields/TransformField.js.map +1 -1
- package/dist/fields/VerticalAlignmentField.d.ts +1 -1
- package/dist/fields/VerticalAlignmentField.d.ts.map +1 -1
- package/dist/fields/WidthField.d.ts +1 -1
- package/dist/fields/WidthField.d.ts.map +1 -1
- package/dist/fields/index.d.ts +9 -37
- package/dist/fields/index.d.ts.map +1 -1
- package/dist/fields/index.js +21 -79
- package/dist/fields/index.js.map +1 -1
- package/dist/fields/richtext/controls/ColorPickerControl.d.ts +16 -0
- package/dist/fields/richtext/controls/ColorPickerControl.d.ts.map +1 -0
- package/dist/fields/richtext/controls/ColorPickerControl.js +116 -0
- package/dist/fields/richtext/controls/ColorPickerControl.js.map +1 -0
- package/dist/fields/richtext/controls/DropdownPortal.d.ts +17 -0
- package/dist/fields/richtext/controls/DropdownPortal.d.ts.map +1 -0
- package/dist/fields/richtext/controls/DropdownPortal.js +90 -0
- package/dist/fields/richtext/controls/DropdownPortal.js.map +1 -0
- package/dist/fields/richtext/controls/FontSizeControl.d.ts +8 -0
- package/dist/fields/richtext/controls/FontSizeControl.d.ts.map +1 -0
- package/dist/fields/richtext/controls/FontSizeControl.js +62 -0
- package/dist/fields/richtext/controls/FontSizeControl.js.map +1 -0
- package/dist/fields/richtext/controls/HighlightControl.d.ts +9 -0
- package/dist/fields/richtext/controls/HighlightControl.d.ts.map +1 -0
- package/dist/fields/richtext/controls/HighlightControl.js +44 -0
- package/dist/fields/richtext/controls/HighlightControl.js.map +1 -0
- package/dist/fields/richtext/controls/index.d.ts +11 -0
- package/dist/fields/richtext/controls/index.d.ts.map +1 -0
- package/dist/fields/richtext/controls/index.js +16 -0
- package/dist/fields/richtext/controls/index.js.map +1 -0
- package/dist/fields/richtext/controls/shared.d.ts +97 -0
- package/dist/fields/richtext/controls/shared.d.ts.map +1 -0
- package/dist/fields/richtext/controls/shared.js +344 -0
- package/dist/fields/richtext/controls/shared.js.map +1 -0
- package/dist/fields/richtext/createRichTextField.d.ts +165 -0
- package/dist/fields/richtext/createRichTextField.d.ts.map +1 -0
- package/dist/fields/richtext/createRichTextField.js +139 -0
- package/dist/fields/richtext/createRichTextField.js.map +1 -0
- package/dist/fields/richtext/extensions/FontSize.d.ts +23 -0
- package/dist/fields/richtext/extensions/FontSize.d.ts.map +1 -0
- package/dist/fields/richtext/extensions/FontSize.js +47 -0
- package/dist/fields/richtext/extensions/FontSize.js.map +1 -0
- package/dist/fields/richtext/extensions/index.d.ts +5 -0
- package/dist/fields/richtext/extensions/index.d.ts.map +1 -0
- package/dist/fields/richtext/extensions/index.js +5 -0
- package/dist/fields/richtext/extensions/index.js.map +1 -0
- package/dist/fields/richtext/index.d.ts +14 -0
- package/dist/fields/richtext/index.d.ts.map +1 -0
- package/dist/fields/richtext/index.js +19 -0
- package/dist/fields/richtext/index.js.map +1 -0
- package/dist/fields/richtext/richtext-menu.css +50 -0
- package/dist/fields/shared.d.ts +27 -1
- package/dist/fields/shared.d.ts.map +1 -1
- package/dist/fields/shared.js +34 -0
- package/dist/fields/shared.js.map +1 -1
- package/dist/layouts/types.d.ts +30 -0
- package/dist/layouts/types.d.ts.map +1 -1
- package/dist/plugin/index.d.ts +1 -0
- package/dist/plugin/index.d.ts.map +1 -1
- package/dist/plugin/index.js +111 -1
- package/dist/plugin/index.js.map +1 -1
- package/dist/render/HybridPageRenderer.d.ts +47 -4
- package/dist/render/HybridPageRenderer.d.ts.map +1 -1
- package/dist/render/HybridPageRenderer.js +45 -0
- package/dist/render/HybridPageRenderer.js.map +1 -1
- package/dist/render/PageRenderer.d.ts +1 -1
- package/dist/render/PageRenderer.d.ts.map +1 -1
- package/dist/render/PageRenderer.js +1 -1
- package/dist/render/PageRenderer.js.map +1 -1
- package/dist/render/PuckEditor.client.d.ts +2 -2
- package/dist/render/PuckEditor.client.d.ts.map +1 -1
- package/dist/render/PuckEditor.client.js +2 -2
- package/dist/render/PuckEditor.client.js.map +1 -1
- package/dist/render/index.d.ts +2 -2
- package/dist/render/index.d.ts.map +1 -1
- package/dist/render/index.js +1 -1
- package/dist/render/index.js.map +1 -1
- package/dist/types/index.d.ts +36 -11
- package/dist/types/index.d.ts.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/views/PuckConfigContext.d.ts +56 -2
- package/dist/views/PuckConfigContext.d.ts.map +1 -1
- package/dist/views/PuckConfigContext.js +6 -3
- package/dist/views/PuckConfigContext.js.map +1 -1
- package/dist/views/PuckEditorView.d.ts.map +1 -1
- package/dist/views/PuckEditorView.js +36 -8
- package/dist/views/PuckEditorView.js.map +1 -1
- package/package.json +34 -10
- package/dist/components/typography/RichText.d.ts +0 -20
- package/dist/components/typography/RichText.d.ts.map +0 -1
- package/dist/components/typography/RichText.js +0 -73
- package/dist/components/typography/RichText.js.map +0 -1
- package/dist/fields/TiptapField.d.ts +0 -40
- package/dist/fields/TiptapField.d.ts.map +0 -1
- package/dist/fields/TiptapField.js +0 -857
- package/dist/fields/TiptapField.js.map +0 -1
- package/dist/fields/TiptapModal.d.ts +0 -10
- package/dist/fields/TiptapModal.d.ts.map +0 -1
- package/dist/fields/TiptapModal.js +0 -114
- package/dist/fields/TiptapModal.js.map +0 -1
- package/dist/fields/TiptapModalField.d.ts +0 -23
- package/dist/fields/TiptapModalField.d.ts.map +0 -1
- package/dist/fields/TiptapModalField.js +0 -55
- package/dist/fields/TiptapModalField.js.map +0 -1
- package/dist/fields/richtext-output.css +0 -219
- package/dist/fields/tiptap-styles.css +0 -248
package/README.md
CHANGED
|
@@ -8,6 +8,7 @@ A PayloadCMS plugin for integrating [Puck](https://puckeditor.com) visual page b
|
|
|
8
8
|
|
|
9
9
|
- [Installation](#installation)
|
|
10
10
|
- [Quick Start](#quick-start)
|
|
11
|
+
- [Adding to Existing Projects](#adding-to-existing-projects)
|
|
11
12
|
- [Styling Setup](#styling-setup)
|
|
12
13
|
- [Core Concepts](#core-concepts)
|
|
13
14
|
- [Components](#components)
|
|
@@ -17,6 +18,7 @@ A PayloadCMS plugin for integrating [Puck](https://puckeditor.com) visual page b
|
|
|
17
18
|
- [Layouts](#layouts)
|
|
18
19
|
- [Page-Tree Integration](#page-tree-integration)
|
|
19
20
|
- [Hybrid Integration](#hybrid-integration)
|
|
21
|
+
- [AI Integration](#ai-integration)
|
|
20
22
|
- [Advanced Configuration](#advanced-configuration)
|
|
21
23
|
- [License](#license)
|
|
22
24
|
|
|
@@ -28,17 +30,19 @@ A PayloadCMS plugin for integrating [Puck](https://puckeditor.com) visual page b
|
|
|
28
30
|
|
|
29
31
|
| Dependency | Version | Purpose |
|
|
30
32
|
|------------|---------|---------|
|
|
31
|
-
| `@
|
|
32
|
-
| `payload` | >= 3.
|
|
33
|
-
| `@payloadcms/next` | >= 3.
|
|
34
|
-
| `next` | >=
|
|
35
|
-
| `react` | >=
|
|
33
|
+
| `@puckeditor/core` | >= 0.21.0 | Visual editor core |
|
|
34
|
+
| `payload` | >= 3.69.0 | CMS backend |
|
|
35
|
+
| `@payloadcms/next` | >= 3.69.0 | Payload Next.js integration |
|
|
36
|
+
| `next` | >= 15.4.8 | React framework |
|
|
37
|
+
| `react` | >= 19.2.1 | UI library |
|
|
36
38
|
| `@tailwindcss/typography` | >= 0.5.0 | RichText component styling |
|
|
37
39
|
|
|
40
|
+
> **Note:** Puck 0.21+ moved from `@measured/puck` to `@puckeditor/core`. This plugin requires the new package scope.
|
|
41
|
+
|
|
38
42
|
### Install
|
|
39
43
|
|
|
40
44
|
```bash
|
|
41
|
-
pnpm add @delmaredigital/payload-puck @
|
|
45
|
+
pnpm add @delmaredigital/payload-puck @puckeditor/core
|
|
42
46
|
```
|
|
43
47
|
|
|
44
48
|
---
|
|
@@ -50,7 +54,7 @@ The plugin integrates directly into Payload's admin UI with minimal configuratio
|
|
|
50
54
|
### Step 1: Add the Plugin
|
|
51
55
|
|
|
52
56
|
```typescript
|
|
53
|
-
// payload.config.ts
|
|
57
|
+
// src/payload.config.ts
|
|
54
58
|
import { buildConfig } from 'payload'
|
|
55
59
|
import { createPuckPlugin } from '@delmaredigital/payload-puck/plugin'
|
|
56
60
|
|
|
@@ -96,6 +100,34 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|
|
96
100
|
|
|
97
101
|
> **Note:** For custom editor UIs (outside Payload admin), you can also pass the config directly to `PuckEditor` instead of using the context provider.
|
|
98
102
|
|
|
103
|
+
**Alternative: Payload Admin Provider (vanilla starter pattern)**
|
|
104
|
+
|
|
105
|
+
If you're using the vanilla Payload starter structure, you can register the provider via the admin config instead:
|
|
106
|
+
|
|
107
|
+
```typescript
|
|
108
|
+
// src/payload.config.ts
|
|
109
|
+
export default buildConfig({
|
|
110
|
+
admin: {
|
|
111
|
+
components: {
|
|
112
|
+
providers: ['@/components/admin/PuckProvider'],
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
// ...
|
|
116
|
+
})
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
```typescript
|
|
120
|
+
// src/components/admin/PuckProvider.tsx
|
|
121
|
+
'use client'
|
|
122
|
+
|
|
123
|
+
import { PuckConfigProvider } from '@delmaredigital/payload-puck/client'
|
|
124
|
+
import { editorConfig } from '@delmaredigital/payload-puck/config/editor'
|
|
125
|
+
|
|
126
|
+
export default function PuckProvider({ children }: { children: React.ReactNode }) {
|
|
127
|
+
return <PuckConfigProvider config={editorConfig}>{children}</PuckConfigProvider>
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
99
131
|
### Step 3: Create a Frontend Route
|
|
100
132
|
|
|
101
133
|
The plugin can't auto-create frontend routes (Next.js App Router is file-based), but here's copy-paste ready code:
|
|
@@ -112,16 +144,23 @@ import { notFound } from 'next/navigation'
|
|
|
112
144
|
import type { Metadata } from 'next'
|
|
113
145
|
|
|
114
146
|
// Fetch page by slug (or homepage if no slug)
|
|
147
|
+
// Only returns published pages - unpublished pages will 404
|
|
115
148
|
async function getPage(slug?: string[]) {
|
|
116
149
|
const payload = await getPayload({ config })
|
|
117
150
|
const slugPath = slug?.join('/') || ''
|
|
118
151
|
|
|
119
152
|
// Try to find by slug, or find homepage
|
|
153
|
+
// Filter for published pages only (_status: 'published')
|
|
120
154
|
const { docs } = await payload.find({
|
|
121
155
|
collection: 'pages',
|
|
122
|
-
where:
|
|
123
|
-
|
|
124
|
-
|
|
156
|
+
where: {
|
|
157
|
+
and: [
|
|
158
|
+
{ _status: { equals: 'published' } },
|
|
159
|
+
slugPath
|
|
160
|
+
? { slug: { equals: slugPath } }
|
|
161
|
+
: { isHomepage: { equals: true } },
|
|
162
|
+
],
|
|
163
|
+
},
|
|
125
164
|
limit: 1,
|
|
126
165
|
})
|
|
127
166
|
|
|
@@ -171,6 +210,74 @@ export default async function Page({
|
|
|
171
210
|
- The editor runs inside Payload's admin UI with full navigation
|
|
172
211
|
- API endpoints are handled automatically via Payload's endpoint system
|
|
173
212
|
|
|
213
|
+
### Adding to Existing Projects
|
|
214
|
+
|
|
215
|
+
> **⚠️ Important:** If you're adding Puck to a project with existing frontend routes, you must update those routes to render Puck content.
|
|
216
|
+
|
|
217
|
+
When adding Puck to an existing Payload project:
|
|
218
|
+
|
|
219
|
+
1. ✅ Add the plugin to `payload.config.ts`
|
|
220
|
+
2. ✅ Add `PuckConfigProvider` to your admin layout
|
|
221
|
+
3. ⚠️ **Update your frontend page templates** to render `puckData`
|
|
222
|
+
|
|
223
|
+
Without step 3, Puck pages will render blank because your existing routes only look for legacy block fields like `layout` or `hero`.
|
|
224
|
+
|
|
225
|
+
**Option A: Hybrid Rendering (recommended for migration)**
|
|
226
|
+
|
|
227
|
+
Use `HybridPageRenderer` to support both legacy blocks and Puck pages:
|
|
228
|
+
|
|
229
|
+
```typescript
|
|
230
|
+
import { HybridPageRenderer } from '@delmaredigital/payload-puck/render'
|
|
231
|
+
import { baseConfig } from '@delmaredigital/payload-puck/config'
|
|
232
|
+
import { LegacyBlockRenderer } from '@/components/LegacyBlockRenderer'
|
|
233
|
+
|
|
234
|
+
export default async function Page({ params }) {
|
|
235
|
+
const page = await getPage(params.slug)
|
|
236
|
+
|
|
237
|
+
return (
|
|
238
|
+
<HybridPageRenderer
|
|
239
|
+
page={page}
|
|
240
|
+
config={baseConfig}
|
|
241
|
+
legacyRenderer={(blocks) => <LegacyBlockRenderer blocks={blocks} />}
|
|
242
|
+
/>
|
|
243
|
+
)
|
|
244
|
+
}
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
**Option B: Manual Detection**
|
|
248
|
+
|
|
249
|
+
Add conditional logic to check `editorVersion`:
|
|
250
|
+
|
|
251
|
+
```typescript
|
|
252
|
+
// Check if page was created with Puck
|
|
253
|
+
const isPuckPage = page.editorVersion === 'puck' && page.puckData?.content?.length > 0
|
|
254
|
+
|
|
255
|
+
if (isPuckPage) {
|
|
256
|
+
return <PageRenderer config={baseConfig} data={page.puckData} />
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
// Fall back to legacy rendering
|
|
260
|
+
return <LegacyBlockRenderer blocks={page.layout} />
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
**Option C: Custom Components**
|
|
264
|
+
|
|
265
|
+
If you have custom Puck components (not just the built-in ones), create a client wrapper:
|
|
266
|
+
|
|
267
|
+
```typescript
|
|
268
|
+
// components/PuckPageRenderer.tsx
|
|
269
|
+
'use client'
|
|
270
|
+
|
|
271
|
+
import { Render } from '@puckeditor/core'
|
|
272
|
+
import { myCustomConfig } from '@/puck/config'
|
|
273
|
+
|
|
274
|
+
export function PuckPageRenderer({ data }) {
|
|
275
|
+
return <Render config={myCustomConfig} data={data} />
|
|
276
|
+
}
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
Then use this wrapper in your page template instead of `PageRenderer`.
|
|
280
|
+
|
|
174
281
|
---
|
|
175
282
|
|
|
176
283
|
## Styling Setup
|
|
@@ -285,6 +392,11 @@ The editor uses Payload's native draft system. The plugin automatically enables
|
|
|
285
392
|
}
|
|
286
393
|
```
|
|
287
394
|
|
|
395
|
+
The editor header provides:
|
|
396
|
+
- **Save** - Saves as draft without publishing
|
|
397
|
+
- **Publish** - Publishes the page (sets `_status: 'published'`)
|
|
398
|
+
- **Unpublish** - Reverts a published page to draft status (appears only when published)
|
|
399
|
+
|
|
288
400
|
---
|
|
289
401
|
|
|
290
402
|
## Components
|
|
@@ -306,7 +418,7 @@ The editor uses Payload's native draft system. The plugin automatically enables
|
|
|
306
418
|
|-----------|-------------|
|
|
307
419
|
| **Heading** | H1-H6 headings with size and alignment |
|
|
308
420
|
| **Text** | Paragraph text with styling options |
|
|
309
|
-
| **RichText** |
|
|
421
|
+
| **RichText** | Puck's native richtext editor with enhancements: font sizes, text colors with opacity, highlights, superscript/subscript, and inline editing on canvas |
|
|
310
422
|
|
|
311
423
|
### Media & Interactive
|
|
312
424
|
|
|
@@ -316,7 +428,20 @@ The editor uses Payload's native draft system. The plugin automatically enables
|
|
|
316
428
|
| **Button** | Styled button/link with variants |
|
|
317
429
|
| **Card** | Content card with optional image |
|
|
318
430
|
| **Divider** | Horizontal rule with styles |
|
|
319
|
-
| **Accordion** | Expandable content sections |
|
|
431
|
+
| **Accordion** | Expandable content sections (first item opens by default) |
|
|
432
|
+
|
|
433
|
+
### Semantic HTML Elements
|
|
434
|
+
|
|
435
|
+
Layout components (Section, Flex, Container, Grid) support semantic HTML output for better SEO and accessibility:
|
|
436
|
+
|
|
437
|
+
| Component | Available Elements |
|
|
438
|
+
|-----------|-------------------|
|
|
439
|
+
| **Section** | `section`, `article`, `aside`, `nav`, `header`, `footer`, `main`, `div` |
|
|
440
|
+
| **Flex** | `div`, `nav`, `ul`, `ol`, `aside`, `section` |
|
|
441
|
+
| **Container** | `div`, `article`, `aside`, `section` |
|
|
442
|
+
| **Grid** | `div`, `ul`, `ol` |
|
|
443
|
+
|
|
444
|
+
Select the appropriate HTML element in the component's sidebar to output semantic markup.
|
|
320
445
|
|
|
321
446
|
### Responsive Controls
|
|
322
447
|
|
|
@@ -324,6 +449,7 @@ Layout components support per-breakpoint customization:
|
|
|
324
449
|
- **Dimensions** - Width, max-width, height constraints
|
|
325
450
|
- **Padding/Margin** - Spacing per breakpoint
|
|
326
451
|
- **Visibility** - Show/hide at specific breakpoints
|
|
452
|
+
- **Viewport Preview** - Mobile, Tablet, Desktop, and Full Width options
|
|
327
453
|
|
|
328
454
|
---
|
|
329
455
|
|
|
@@ -336,13 +462,15 @@ All fields are imported from `@delmaredigital/payload-puck/fields`.
|
|
|
336
462
|
| Field | Description |
|
|
337
463
|
|-------|-------------|
|
|
338
464
|
| **MediaField** | Payload media library integration |
|
|
339
|
-
| **
|
|
465
|
+
| **RichTextField** | Puck's native richtext with enhancements (colors, font sizes, highlights) |
|
|
340
466
|
| **ColorPickerField** | Color picker with opacity and presets |
|
|
341
467
|
| **BackgroundField** | Solid colors, gradients, images |
|
|
342
468
|
| **PaddingField / MarginField** | Visual spacing editors |
|
|
343
469
|
| **BorderField** | Border width, style, color, radius |
|
|
344
470
|
| **DimensionsField** | Width/height with constraints |
|
|
345
|
-
| **AlignmentField** | Text alignment
|
|
471
|
+
| **AlignmentField** | Text alignment (left, center, right) |
|
|
472
|
+
| **ContentAlignmentField** | Visual 3x3 grid selector for positioning (d-pad style) |
|
|
473
|
+
| **SizeField** | Preset sizes (sm, default, lg) with custom mode |
|
|
346
474
|
| **AnimationField** | Entrance animations |
|
|
347
475
|
| **ResponsiveVisibilityField** | Show/hide per breakpoint |
|
|
348
476
|
| **FolderPickerField** | Hierarchical folder selection (page-tree) |
|
|
@@ -375,9 +503,46 @@ import {
|
|
|
375
503
|
dimensionsValueToCSS,
|
|
376
504
|
animationValueToCSS,
|
|
377
505
|
visibilityValueToCSS,
|
|
506
|
+
alignmentToFlexCSS,
|
|
507
|
+
alignmentToGridCSS,
|
|
508
|
+
sizeValueToCSS,
|
|
509
|
+
getSizeClasses,
|
|
378
510
|
} from '@delmaredigital/payload-puck/fields'
|
|
379
511
|
```
|
|
380
512
|
|
|
513
|
+
### ContentAlignmentField Example
|
|
514
|
+
|
|
515
|
+
The ContentAlignmentField provides a visual 3x3 grid selector for content positioning:
|
|
516
|
+
|
|
517
|
+
```typescript
|
|
518
|
+
import {
|
|
519
|
+
createContentAlignmentField,
|
|
520
|
+
alignmentToFlexCSS,
|
|
521
|
+
alignmentToGridCSS,
|
|
522
|
+
} from '@delmaredigital/payload-puck/fields'
|
|
523
|
+
|
|
524
|
+
const BannerConfig = {
|
|
525
|
+
fields: {
|
|
526
|
+
contentPosition: createContentAlignmentField({ label: 'Content Position' }),
|
|
527
|
+
},
|
|
528
|
+
render: ({ contentPosition }) => (
|
|
529
|
+
<div style={{
|
|
530
|
+
display: 'flex',
|
|
531
|
+
minHeight: '400px',
|
|
532
|
+
...alignmentToFlexCSS(contentPosition), // Converts to justify-content + align-items
|
|
533
|
+
}}>
|
|
534
|
+
<div>Positioned content</div>
|
|
535
|
+
</div>
|
|
536
|
+
),
|
|
537
|
+
}
|
|
538
|
+
```
|
|
539
|
+
|
|
540
|
+
Helper functions:
|
|
541
|
+
- `alignmentToFlexCSS()` - For Flexbox containers (`justify-content` + `align-items`)
|
|
542
|
+
- `alignmentToGridCSS()` - For Grid containers (`justify-content` + `align-content`)
|
|
543
|
+
- `alignmentToPlaceSelfCSS()` - For individual grid items (`place-self`)
|
|
544
|
+
- `alignmentToTailwind()` - Returns Tailwind classes (`justify-* items-*`)
|
|
545
|
+
|
|
381
546
|
---
|
|
382
547
|
|
|
383
548
|
## Building Custom Components
|
|
@@ -417,7 +582,7 @@ export const puckConfig: Config = {
|
|
|
417
582
|
Build custom components with pre-built fields:
|
|
418
583
|
|
|
419
584
|
```typescript
|
|
420
|
-
import type { ComponentConfig } from '@
|
|
585
|
+
import type { ComponentConfig } from '@puckeditor/core'
|
|
421
586
|
import {
|
|
422
587
|
createMediaField,
|
|
423
588
|
createBackgroundField,
|
|
@@ -539,8 +704,11 @@ This is the recommended pattern for Payload apps. The provider wraps only the ad
|
|
|
539
704
|
| `createBorderField()` | Border styling |
|
|
540
705
|
| `createDimensionsField()` | Width/height constraints |
|
|
541
706
|
| `createAnimationField()` | Entrance animations |
|
|
542
|
-
| `createAlignmentField()` | Text alignment |
|
|
543
|
-
| `
|
|
707
|
+
| `createAlignmentField()` | Text alignment (left, center, right) |
|
|
708
|
+
| `createContentAlignmentField()` | Visual 3x3 grid positioning selector |
|
|
709
|
+
| `createSizeField()` | Size presets with custom mode |
|
|
710
|
+
| `createRichTextField()` | Puck's native richtext with colors, font sizes, highlights |
|
|
711
|
+
| `createResponsiveVisibilityField()` | Show/hide per breakpoint |
|
|
544
712
|
|
|
545
713
|
### CSS Helper Functions
|
|
546
714
|
|
|
@@ -554,12 +722,17 @@ import {
|
|
|
554
722
|
borderValueToCSS,
|
|
555
723
|
dimensionsValueToCSS,
|
|
556
724
|
colorValueToCSS,
|
|
725
|
+
alignmentToFlexCSS,
|
|
726
|
+
alignmentToGridCSS,
|
|
727
|
+
sizeValueToCSS,
|
|
557
728
|
} from '@delmaredigital/payload-puck/fields'
|
|
558
729
|
|
|
559
730
|
const style = {
|
|
560
731
|
background: backgroundValueToCSS(props.background),
|
|
561
732
|
padding: paddingValueToCSS(props.padding),
|
|
562
733
|
...dimensionsValueToCSS(props.dimensions),
|
|
734
|
+
...alignmentToFlexCSS(props.contentAlignment),
|
|
735
|
+
...sizeValueToCSS(props.size),
|
|
563
736
|
}
|
|
564
737
|
```
|
|
565
738
|
|
|
@@ -772,6 +945,196 @@ import { LegacyBlockRenderer } from '@/components/LegacyBlockRenderer'
|
|
|
772
945
|
|
|
773
946
|
---
|
|
774
947
|
|
|
948
|
+
## AI Integration
|
|
949
|
+
|
|
950
|
+
> **Early Preview:** While Puck's AI features are powerful, this plugin's implementation is still in early stages and under active development. Expect changes as we refine the integration.
|
|
951
|
+
|
|
952
|
+
The plugin integrates with [Puck AI](https://puckeditor.com/docs/integrating-puck/ai) to enable AI-assisted page generation. Users can describe what they want in natural language, and the AI builds complete page layouts using your components.
|
|
953
|
+
|
|
954
|
+
### Requirements
|
|
955
|
+
|
|
956
|
+
- `PUCK_API_KEY` environment variable (from [Puck Cloud](https://puckeditor.com))
|
|
957
|
+
- AI features require `@puckeditor/plugin-ai` and `@puckeditor/cloud-client` (bundled with the plugin)
|
|
958
|
+
|
|
959
|
+
### Quick Start
|
|
960
|
+
|
|
961
|
+
Enable AI in your plugin configuration:
|
|
962
|
+
|
|
963
|
+
```typescript
|
|
964
|
+
createPuckPlugin({
|
|
965
|
+
pagesCollection: 'pages',
|
|
966
|
+
ai: {
|
|
967
|
+
enabled: true,
|
|
968
|
+
context: 'We are Acme Corp, a B2B SaaS company. Use professional language.',
|
|
969
|
+
},
|
|
970
|
+
})
|
|
971
|
+
```
|
|
972
|
+
|
|
973
|
+
This automatically:
|
|
974
|
+
- Registers the AI chat endpoint at `/api/puck/ai`
|
|
975
|
+
- Adds the AI chat plugin to the editor
|
|
976
|
+
- Applies comprehensive component instructions for better generation quality
|
|
977
|
+
|
|
978
|
+
### Dynamic Business Context
|
|
979
|
+
|
|
980
|
+
Instead of hardcoding context in your config, you can manage it through Payload admin:
|
|
981
|
+
|
|
982
|
+
```typescript
|
|
983
|
+
createPuckPlugin({
|
|
984
|
+
ai: {
|
|
985
|
+
enabled: true,
|
|
986
|
+
contextCollection: true, // Creates puck-ai-context collection
|
|
987
|
+
},
|
|
988
|
+
})
|
|
989
|
+
```
|
|
990
|
+
|
|
991
|
+
This creates a `puck-ai-context` collection where you can add entries for:
|
|
992
|
+
- **Brand Guidelines** - Colors, fonts, brand voice
|
|
993
|
+
- **Tone of Voice** - How to communicate
|
|
994
|
+
- **Product Information** - What you sell/offer
|
|
995
|
+
- **Industry Context** - Your market and audience
|
|
996
|
+
- **Technical Requirements** - Specific constraints
|
|
997
|
+
- **Page Patterns** - Common layout structures
|
|
998
|
+
|
|
999
|
+
Context entries can be enabled/disabled and ordered. The AI receives all enabled entries sorted by order.
|
|
1000
|
+
|
|
1001
|
+
### Context Editor Plugin
|
|
1002
|
+
|
|
1003
|
+
When `contextCollection: true`, a "Context" panel appears in the Puck plugin rail. Users can view, create, edit, and toggle context entries directly in the editor without visiting Payload admin.
|
|
1004
|
+
|
|
1005
|
+
### Prompt Management
|
|
1006
|
+
|
|
1007
|
+
Store reusable prompts in Payload:
|
|
1008
|
+
|
|
1009
|
+
```typescript
|
|
1010
|
+
createPuckPlugin({
|
|
1011
|
+
ai: {
|
|
1012
|
+
enabled: true,
|
|
1013
|
+
promptsCollection: true, // Creates puck-ai-prompts collection
|
|
1014
|
+
examplePrompts: [
|
|
1015
|
+
{ label: 'Landing page', prompt: 'Create a landing page for...' },
|
|
1016
|
+
],
|
|
1017
|
+
},
|
|
1018
|
+
})
|
|
1019
|
+
```
|
|
1020
|
+
|
|
1021
|
+
Prompts from the collection appear in the AI chat interface. A "Prompts" panel in the plugin rail allows in-editor prompt management.
|
|
1022
|
+
|
|
1023
|
+
### Custom Tools
|
|
1024
|
+
|
|
1025
|
+
Enable the AI to query your data:
|
|
1026
|
+
|
|
1027
|
+
```typescript
|
|
1028
|
+
import { z } from 'zod'
|
|
1029
|
+
|
|
1030
|
+
createPuckPlugin({
|
|
1031
|
+
ai: {
|
|
1032
|
+
enabled: true,
|
|
1033
|
+
tools: {
|
|
1034
|
+
getProducts: {
|
|
1035
|
+
description: 'Get products from the database',
|
|
1036
|
+
inputSchema: z.object({ category: z.string() }),
|
|
1037
|
+
execute: async ({ category }, { payload }) => {
|
|
1038
|
+
return await payload.find({
|
|
1039
|
+
collection: 'products',
|
|
1040
|
+
where: { category: { equals: category } },
|
|
1041
|
+
})
|
|
1042
|
+
},
|
|
1043
|
+
},
|
|
1044
|
+
},
|
|
1045
|
+
},
|
|
1046
|
+
})
|
|
1047
|
+
```
|
|
1048
|
+
|
|
1049
|
+
Tools receive a context object with the Payload instance and authenticated user.
|
|
1050
|
+
|
|
1051
|
+
### AI Configuration Options
|
|
1052
|
+
|
|
1053
|
+
| Option | Default | Description |
|
|
1054
|
+
|--------|---------|-------------|
|
|
1055
|
+
| `enabled` | `false` | Enable AI features |
|
|
1056
|
+
| `context` | `undefined` | Static system context for the AI |
|
|
1057
|
+
| `contextCollection` | `false` | Create `puck-ai-context` collection for dynamic context |
|
|
1058
|
+
| `promptsCollection` | `false` | Create `puck-ai-prompts` collection for reusable prompts |
|
|
1059
|
+
| `examplePrompts` | `[]` | Static example prompts for the chat interface |
|
|
1060
|
+
| `tools` | `undefined` | Custom tools for AI to query your system |
|
|
1061
|
+
| `componentInstructions` | `undefined` | Override default component AI instructions |
|
|
1062
|
+
|
|
1063
|
+
### Component Instructions
|
|
1064
|
+
|
|
1065
|
+
The plugin includes comprehensive instructions for all built-in components, teaching the AI:
|
|
1066
|
+
- Correct field names and values
|
|
1067
|
+
- Component composition patterns
|
|
1068
|
+
- Page structure best practices (Hero → Features → CTA flow)
|
|
1069
|
+
- Semantic HTML usage
|
|
1070
|
+
|
|
1071
|
+
To customize or extend:
|
|
1072
|
+
|
|
1073
|
+
```typescript
|
|
1074
|
+
createPuckPlugin({
|
|
1075
|
+
ai: {
|
|
1076
|
+
enabled: true,
|
|
1077
|
+
componentInstructions: {
|
|
1078
|
+
Heading: {
|
|
1079
|
+
ai: { instructions: 'Use our brand voice: professional but approachable' },
|
|
1080
|
+
fields: {
|
|
1081
|
+
text: { ai: { instructions: 'Keep under 8 words' } },
|
|
1082
|
+
},
|
|
1083
|
+
},
|
|
1084
|
+
},
|
|
1085
|
+
},
|
|
1086
|
+
})
|
|
1087
|
+
```
|
|
1088
|
+
|
|
1089
|
+
### Standalone API Routes
|
|
1090
|
+
|
|
1091
|
+
For custom implementations outside the plugin:
|
|
1092
|
+
|
|
1093
|
+
```typescript
|
|
1094
|
+
// app/api/puck/[...all]/route.ts
|
|
1095
|
+
import { createPuckAiApiRoutes } from '@delmaredigital/payload-puck/ai'
|
|
1096
|
+
import config from '@payload-config'
|
|
1097
|
+
|
|
1098
|
+
export const POST = createPuckAiApiRoutes({
|
|
1099
|
+
payloadConfig: config,
|
|
1100
|
+
auth: {
|
|
1101
|
+
authenticate: async (request) => {
|
|
1102
|
+
// Your auth implementation
|
|
1103
|
+
return { user: { id: '...' } }
|
|
1104
|
+
},
|
|
1105
|
+
},
|
|
1106
|
+
ai: {
|
|
1107
|
+
context: 'Your business context...',
|
|
1108
|
+
},
|
|
1109
|
+
})
|
|
1110
|
+
```
|
|
1111
|
+
|
|
1112
|
+
### AI Exports
|
|
1113
|
+
|
|
1114
|
+
```typescript
|
|
1115
|
+
import {
|
|
1116
|
+
// Plugins
|
|
1117
|
+
createAiPlugin,
|
|
1118
|
+
createPromptEditorPlugin,
|
|
1119
|
+
createContextEditorPlugin,
|
|
1120
|
+
|
|
1121
|
+
// Hooks
|
|
1122
|
+
useAiPrompts,
|
|
1123
|
+
useAiContext,
|
|
1124
|
+
|
|
1125
|
+
// Config utilities
|
|
1126
|
+
injectAiConfig,
|
|
1127
|
+
comprehensiveComponentAiConfig,
|
|
1128
|
+
pagePatternSystemContext,
|
|
1129
|
+
|
|
1130
|
+
// API routes
|
|
1131
|
+
createPuckAiApiRoutes,
|
|
1132
|
+
createAiGenerate,
|
|
1133
|
+
} from '@delmaredigital/payload-puck/ai'
|
|
1134
|
+
```
|
|
1135
|
+
|
|
1136
|
+
---
|
|
1137
|
+
|
|
775
1138
|
## Advanced Configuration
|
|
776
1139
|
|
|
777
1140
|
### Plugin Options
|
|
@@ -785,6 +1148,8 @@ import { LegacyBlockRenderer } from '@/components/LegacyBlockRenderer'
|
|
|
785
1148
|
| `adminViewPath` | `'/puck-editor'` | Path for the editor (full path: `/admin/puck-editor/:collection/:id`) |
|
|
786
1149
|
| `pageTreeIntegration` | auto-detect | Integration with `@delmaredigital/payload-page-tree` |
|
|
787
1150
|
| `layouts` | `undefined` | Layout definitions for page templates |
|
|
1151
|
+
| `editorStylesheet` | `undefined` | Path to CSS file for editor iframe styling (e.g., `'src/app/globals.css'`) |
|
|
1152
|
+
| `editorStylesheetUrls` | `[]` | Additional stylesheet URLs for the editor (e.g., Google Fonts) |
|
|
788
1153
|
|
|
789
1154
|
```typescript
|
|
790
1155
|
createPuckPlugin({
|
|
@@ -812,6 +1177,52 @@ createPuckPlugin({
|
|
|
812
1177
|
})
|
|
813
1178
|
```
|
|
814
1179
|
|
|
1180
|
+
### Editor Stylesheet (Iframe Styling)
|
|
1181
|
+
|
|
1182
|
+
The Puck editor renders page content in an iframe. By default, this iframe doesn't have access to your frontend's CSS (Tailwind utilities, CSS variables, fonts). The `editorStylesheet` option solves this by compiling and serving your CSS.
|
|
1183
|
+
|
|
1184
|
+
**How it works:**
|
|
1185
|
+
1. You specify your CSS file path in the plugin config
|
|
1186
|
+
2. The plugin creates an endpoint at `/api/puck/styles`
|
|
1187
|
+
3. On first request, the CSS is compiled with PostCSS/Tailwind and cached
|
|
1188
|
+
4. The iframe loads this compiled CSS
|
|
1189
|
+
|
|
1190
|
+
```typescript
|
|
1191
|
+
createPuckPlugin({
|
|
1192
|
+
pagesCollection: 'pages',
|
|
1193
|
+
// Your frontend's main CSS file
|
|
1194
|
+
editorStylesheet: 'src/app/(frontend)/globals.css',
|
|
1195
|
+
// External stylesheets (Google Fonts, etc.)
|
|
1196
|
+
editorStylesheetUrls: [
|
|
1197
|
+
'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
|
|
1198
|
+
],
|
|
1199
|
+
})
|
|
1200
|
+
```
|
|
1201
|
+
|
|
1202
|
+
Then update your `PuckConfigProvider` to use the compiled stylesheet:
|
|
1203
|
+
|
|
1204
|
+
```typescript
|
|
1205
|
+
<PuckConfigProvider
|
|
1206
|
+
config={editorConfig}
|
|
1207
|
+
layouts={siteLayouts}
|
|
1208
|
+
editorStylesheets={[
|
|
1209
|
+
'/api/puck/styles', // Plugin-created endpoint
|
|
1210
|
+
'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
|
|
1211
|
+
]}
|
|
1212
|
+
>
|
|
1213
|
+
{children}
|
|
1214
|
+
</PuckConfigProvider>
|
|
1215
|
+
```
|
|
1216
|
+
|
|
1217
|
+
**Requirements:**
|
|
1218
|
+
- `postcss` must be installed in your project
|
|
1219
|
+
- For Tailwind v4: `@tailwindcss/postcss`
|
|
1220
|
+
- For Tailwind v3: `tailwindcss`
|
|
1221
|
+
|
|
1222
|
+
The CSS is compiled at runtime (cached after first request) using your project's PostCSS/Tailwind installation.
|
|
1223
|
+
|
|
1224
|
+
---
|
|
1225
|
+
|
|
815
1226
|
### Custom API Routes (Advanced)
|
|
816
1227
|
|
|
817
1228
|
The built-in endpoints handle most use cases. Only disable them if you need custom authentication or middleware.
|
|
@@ -845,6 +1256,7 @@ See the JSDoc in `@delmaredigital/payload-puck/api` for usage examples.
|
|
|
845
1256
|
| `@delmaredigital/payload-puck/theme` | `ThemeProvider`, theme utilities |
|
|
846
1257
|
| `@delmaredigital/payload-puck/layouts` | Layout definitions, `LayoutWrapper` |
|
|
847
1258
|
| `@delmaredigital/payload-puck/api` | API route factories (for custom implementations) |
|
|
1259
|
+
| `@delmaredigital/payload-puck/ai` | AI plugins, hooks, config utilities, API routes |
|
|
848
1260
|
| `@delmaredigital/payload-puck/admin/client` | `EditWithPuckButton`, `EditWithPuckCell` |
|
|
849
1261
|
|
|
850
1262
|
---
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PuckEditorView.d.ts","sourceRoot":"","sources":["../../src/admin/PuckEditorView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,IAAI,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"PuckEditorView.d.ts","sourceRoot":"","sources":["../../src/admin/PuckEditorView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,IAAI,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAExF;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,EAAE,UAAU,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;IAChD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACtE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACrC;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,cAAwB,EACxB,WAAyB,EACzB,OAAO,EACP,UAAU,EACV,YAAY,EACZ,SAAwB,EACxB,OAAO,EACP,aAAa,EACb,WAAW,GACZ,EAAE,mBAAmB,2CAkKrB;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { CollectionConfig } from 'payload';
|
|
2
|
+
/**
|
|
3
|
+
* AI Context Collection
|
|
4
|
+
*
|
|
5
|
+
* Stores business context entries for the AI chat interface.
|
|
6
|
+
* These context entries are concatenated and sent to the AI system prompt
|
|
7
|
+
* to help it understand your brand, tone, and requirements.
|
|
8
|
+
*
|
|
9
|
+
* @example Creating context entries in Payload admin:
|
|
10
|
+
* - "Brand Guidelines" - Colors, fonts, brand voice
|
|
11
|
+
* - "Tone of Voice" - How to communicate
|
|
12
|
+
* - "Product Information" - What you sell/offer
|
|
13
|
+
* - "Industry Context" - Your market and audience
|
|
14
|
+
*/
|
|
15
|
+
export declare const AiContextCollection: CollectionConfig;
|
|
16
|
+
//# sourceMappingURL=AiContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AiContext.d.ts","sourceRoot":"","sources":["../../../src/ai/collections/AiContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,EAAE,gBA0EjC,CAAA"}
|