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