v0.15.0
puckeditor/puckv0.15.0May 31, 2024by chrisvxd
AI Summary
A major release introducing dynamic field resolution, a reusable AutoField component, and an updated header override API that now requires rendering children for the default publish button.
Key Highlights
- Dynamic field resolution via resolveFields API
- New AutoField component for building custom fields
- Updated headerActions override (must render children for default button)
- New puck.isEditing prop to modify component behavior based on context
Breaking Changes
- headerActions override must now render {children} to show the default Publish button
New Features
- resolveFields API
- AutoField component
- headerActions override
- puck.isEditing prop
Full Release Notes
Puck v0.15.0 introduces the powerful [resolveFields API](https://puckeditor.com/docs/integrating-puck/dynamic-fields) for dynamically defining fields, and [exports Puck's internal field component](https://puckeditor.com/docs/api-reference/components/auto-field) for use within custom fields.
## TLDR
1. [**Dynamic fields**](https://puckeditor.com/docs/integrating-puck/dynamic-fields): Use the `resolveFields` API to dynamically define your fields - great for showing fields conditionally or loading external APIs.
2. [**AutoField component**](https://puckeditor.com/docs/api-reference/components/auto-field): Build custom fields using Puck's own field component for a seamless UI.
3. [**Override Publish button**](https://puckeditor.com/docs/api-reference/overrides/header-actions): Swap out the publish button without swapping out the entire header.
4. [**New `puck.isEditing` prop**](https://puckeditor.com/docs/api-reference/configuration/component-config#puckisediting): Modify component behaviour based on whether it's inside `<Puck>` or `<Render>`.
## Highlights
### 🪄 Dynamic fields
[Dynamic field resolution](https://puckeditor.com/docs/integrating-puck/dynamic-fields) via the `resolveFields` API allows you to change the [field configuration](https://puckeditor.com/docs/api-reference/configuration/component-config#fields) whenever the props change. You can use this to show and hide fields or even load data from an API.
https://github.com/measuredco/puck/assets/985961/298ea7c9-48e4-4e8c-99b5-211c5952c81c
Code example:
```tsx
const config = {
components: {
MyComponent: {
// ...
resolveFields: (data) => ({
myField: {
type: "radio",
options: [], // Populate dynamically
},
}),
},
},
};
```
### 🔤 AutoField component
The [AutoField component](https://puckeditor.com/docs/api-reference/components/auto-field) lets you render a Puck field based on a [Field](https://puckeditor.com/docs/api-reference/fields) object. Use this when building [custom fields](https://puckeditor.com/docs/extending-puck/custom-fields) that need to use Puck-style fields internally.
```tsx
const CustomField = ({ onChange, value }) => (
<AutoField field={{ type: "text" }} onChange={onChange} value={value} />
);
```
### 🌐 Enable override of Publish button via headerActions
It's now possible to implement a custom Publish button without overriding the entire header by using the [`headerActions` override](https://puckeditor.com/docs/api-reference/overrides/header-actions).
```tsx
<Puck
overrides={{
headerActions: ({ children }) => (
<>
{/* children will render default Publish button */}
{children}
{/* Or you can define your own */}
<button>Click me</button>
</>
),
}}
/>;
```
**This creates a breaking change for existing `headerActions` overrides, which will now need to render `children` to show the default Publish button.**
### 🖊️ New `puck.isEditing` prop provided to all components
Components now receive the [`puck.isEditing` prop](https://puckeditor.com/docs/api-reference/configuration/component-config#puckisediting). Use this to toggle functionality based on whether the component is being rendered in the `<Puck>` or `<Render>` contexts.
```tsx
const config = {
components: {
MyComponent: {
render: ({ puck }) => (
<div style={{ background: puck.isEditing ? "hotpink" : "transparent" }}>
Hello, world
</div>
),
},
},
};
```
## Breaking changes
### `headerActions` override must now render `{children}` to show default Publish button
In order to support custom Publish buttons, the `headerActions` override will no longer render the default Publish button unless `children` are rendered.
```tsx
<Puck
overrides={{
headerActions: ({ children }) => (
<>
{/* Render default Publish button */}
{children}
</>
),
}}
/>;
```
## Deprecations
### Undocumented `editMode` API deprecated
The undocumented `editMode` prop is now deprecated in favor of `puck.isEditing`.
## Changelog
### Features
* add AutoField component for using Puck fields inside custom fields ([106028b](https://github.com/measuredco/puck/commit/106028b59bb1a02756645bb76ce400adc398430d))
* add isEditing flag to `puck` object prop ([13bb1bd](https://github.com/measuredco/puck/commit/13bb1bdf03a62000c07a7d49a56ad09c1433fda0))
* add resolveFields API for dynamic fields ([0a18bdb](https://github.com/measuredco/puck/commit/0a18bdb9387f302565f74fa30f09fd912ea0769b))
* allow data prop to accept an empty object ([aedd401](https://github.com/measuredco/puck/commit/aedd401dd415e9d7dc1cbd6e33e59f5264180374))
* bump next recipe to Next@14 ([47a27ed](https://github.com/measuredco/puck/commit/47a27ed2c6aee80d4093975c399d96b950cb6956))
* enable override of publish button (breaking change) ([480467a](https://github.com/measuredco/puck/commit/480467ae2e06ae4d36c4fd67f75757557058f561))
* expose previous data to resolveData via `lastData` param ([dd7051e](https://github.com/measuredco/puck/commit/dd7051e8fbb3770714100c92f7f5c69d0be5dab6))
* replace history chevrons with undo/redo icons ([91dff22](https://github.com/measuredco/puck/commit/91dff227c382ddd5ad183cd69cb4d2fabd56f093))
### Bug Fixes
* align Drawer behaviour and docs with expectation ([e2cd445](https://github.com/measuredco/puck/commit/e2cd445f9d3abccca5b3daf95a4d92774a1dd47a))
* animate loader in iframe ([151a267](https://github.com/measuredco/puck/commit/151a2675bf8e700368aad0652192bc7d9fd2bbd6))
* don't inline link stylesheets for more predictable behaviour ([c0a331d](https://github.com/measuredco/puck/commit/c0a331de31c2d59e0e21ef342eb4c821850e10be))
* don't overflow external inputs inside arrays/objects ([42ef582](https://github.com/measuredco/puck/commit/42ef582cac949f8a24f9cdad204baf24d808b410))
* don't throw warning when user is correctly specifying root props ([46aa8ff](https://github.com/measuredco/puck/commit/46aa8ff3a68dcbd4aec4ebfef246d400469ca4d4))
* don't unintentionally use read-only styles in external fields ([acaf727](https://github.com/measuredco/puck/commit/acaf72746c2c82881a753dab6350161c774cd13f))
* fix defaultProps for root ([9a1cc7c](https://github.com/measuredco/puck/commit/9a1cc7c925f0b8a79b5f523fc7c8a6d6afdc2067))
* infer correct value types in Custom fields ([5c8c0e1](https://github.com/measuredco/puck/commit/5c8c0e1bfa9ca4da04e1cfac83c7a3ab5883fc5c))
* position field loader relative to sidebar, not fields ([2e8936e](https://github.com/measuredco/puck/commit/2e8936e4f416b0a04b273250cf3848447fb7e045))
* show external field modal when using custom interfaces ([6e97a0e](https://github.com/measuredco/puck/commit/6e97a0e18aea72581ba466e8cf3f87e60f3a65f3))
* show field loader when using field overrides ([8ccfa4c](https://github.com/measuredco/puck/commit/8ccfa4c0c3477b8e1d2db2fcc7a352b353643095))
* still load iframe if styles fail to load ([3e56bc1](https://github.com/measuredco/puck/commit/3e56bc1816c40c555de2eb28148baf5dcdcacbea))
## New Contributors
* @goynang made their first contribution in https://github.com/measuredco/puck/pull/487
**Full Changelog**: https://github.com/measuredco/puck/compare/v0.14.2...v0.15.0