payload 2.4.0

Release v2.4.0

on Node.js NPM

2.4.0 (2023-12-06)

Features

• add Chinese Traditional translation (#4372) (50253f6)
• async live preview urls (#4339) (5f17324)
• pass path to FieldDescription (#4364) (3b8a27d)
• richtext-lexical: lazy import React components to prevent client-only code from leaking into the server (#4290) (5de347f)
• richtext-lexical: Link & Relationship Feature: field-level configurable allowed relationships (#4182) (7af8f29)

Bug Fixes

• db-postgres: sorting on a not-configured field throws error (#4382) (dbaecda)
• defaultValues computed on new globals (#4380) (b6cffce)
• handles null upload field values (#4397) (cf9a370)
• live-preview: populates rte uploads and relationships (#4379) (4090aeb)
• live-preview: sends raw js objects through window.postMessage instead of json (#4354) (03a3872)
• simplifies query validation and fixes nested relationship fields (#4391) (4b5453e)
• upload editing error with plugin-cloud (#4170) (fcbe574)
• uploads files after validation (#4218) (65adfd2)

BREAKING CHANGES

• richtext-lexical: lazy import React components to prevent client-only code from leaking into the server (#4290)

⚠️ @payloadcms/richtext-lexical

Most important: If you are updating @payloadcms/richtext-lexical to v0.4.0 or higher, you will HAVE to update payload to the latest version as well. If you don't update it, payload likely won't start up due to validation errors. It's generally good practice to upgrade packages prefixed with @payloadcms/ together with payload and keep the versions in sync.

@payloadcms/richtext-slate is not affected by this.

Every single property in the Feature interface which accepts a React component now no longer accepts a React component, but a function which imports a React component instead. This is done to ensure no unnecessary client-only code is leaked to the server when importing Features on a server.
Here's an example migration:

Old:

import { BlockIcon } from '../../lexical/ui/icons/Block'
...
Icon: BlockIcon,

New:

// import { BlockIcon } from '../../lexical/ui/icons/Block' // <= Remove this import
...
Icon: () =>
  // @ts-expect-error
  import('../../lexical/ui/icons/Block').then((module) => module.BlockIcon),

Or alternatively, if you're using default exports instead of named exports:

// import BlockIcon from '../../lexical/ui/icons/Block' // <= Remove this import
...
Icon: () =>
  // @ts-expect-error
  import('../../lexical/ui/icons/Block'),

The types for SanitizedEditorConfig and EditorConfig have changed. Their respective lexical property no longer expects the LexicalEditorConfig. It now expects a function returning the LexicalEditorConfig. You will have to adjust this if you adjusted that property anywhere, e.g. when initializing the lexical field editor property, or when initializing a new headless editor.

The following exports are now exported from the @payloadcms/richtext-lexical/components subpath exports instead of @payloadcms/richtext-lexical:

• ToolbarButton
• ToolbarDropdown
• RichTextCell
• RichTextField
• defaultEditorLexicalConfig

You will have to adjust your imports, only if you import any of those properties in your project.