The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.
MIT License
Bot releases are hidden (Show)
adds misc translations to API view and react select (#6138) (30e535b)
richtext-lexical: remove LexicalBlock, RichTextFieldRequiredEditor and FieldWithRichTextRequiredEditor types (#6279) (9df5ab8)
editDepth
value to radio
& checkbox
IDs when inside drawer (#6181) (69c93d3)Published by denolfe 5 months ago
Previously, we were only passing
payload
to RSCs. Now, we are passing the following props for component rendered outside buildComponentMap:
i18n
,locale
,params
,payload
,permissions
,searchParams
,user
And the following props for components rendered within buildComponentMap:
i18n
,payload
,Breaking:
if you use the following components in your own project, these now require aforementioned additional, server-only props, instead of just the
payload
prop:
Account
view- Default
Dashboard
viewDefaultTemplate
WithServerSideProps
RenderCustomComponent
(optional)Logo
Additionally, if you were using an HOC as a custom component, and the HOC passed props to the client component, you now have to filter out the additional server-only props we provide. You can use our withMergedProps
helper, which filters them automatically, >or mark your HOC with 'use client'
.
The
admin.logoutRoute
andadmin.inactivityRoute
properties have been consolidated into a singleadmin.routes
property. To migrate, simply move those two keys as follows:Old way:
// payload.config.ts { // ... admin: { logoutRoute: '/custom-logout', inactivityRoute: '/custom-inactivity' } }
New way:
// payload.config.ts { // ... admin: { routes: { logout: '/custom-logout', inactivity: '/custom-inactivity' } } }
Published by denolfe 5 months ago
readOnly
styles to disabled radio
fields (#6240) (c7635b2)BREAKING: all i18n functions are now strongly typed, which will create errors if you have custom translations. If you do, you will have to pass a generic to
i18n
containing the types of your custom translationsExample of adding your own translations to the default translations type on the client:
const linkTranslations = { en: { lexical: { link: { custom: 'Custom', internal: 'Internal', }, }, }, } type LinkTranslationKeys = NestedKeysStripped<typeof linkTranslations.en> type MyI18n = I18nClient<typeof linkTranslations.en, LinkTranslationKeys> const myI18n: MyI18n myI18n.t('lexical:link:custom') // custom translations have been ADDED to the default client translations
Example for the useTranslation hook within a component:
const linkTranslations = { en: { lexical: { link: { custom: 'Custom', internal: 'Internal', }, }, }, } type LinkTranslationKeys = NestedKeysStripped<typeof linkTranslations.en> export const MyComponent: React.FC = () => { const { i18n, t } = useTranslation<typeof linkTranslations.en, LinkTranslationKeys>() return t('lexical:link:custom') }
The admin.favicon: string property has been succeeeded by admin.icons: string | Icons | Icon[]. See nextjs.org/docs/app/api-reference/functions/generate-metadata#icons for full details.
Breaking: The following, exported components now need the
payload
object as a prop rather than theconfig
object:
RenderCustomComponent
(optional)Logo
DefaultTemplate
DefaultNav
Published by denolfe 5 months ago
disableListColumn
& disableListFilter
to fields admin
props (#6238) (ea84e82)editDepth
value to radio
& checkbox
IDs when inside drawer (#6252) (dcad500)Published by denolfe 5 months ago
Breaking Changes:
- Globals config:
admin.description
no longer accepts a custom component. You will have to move it toadmin.components.elements.Description
- Collections config:
admin.description
no longer accepts a custom component. You will have to move it toadmin.components.edit.Description
- All Fields:
field.admin.description
no longer accepts a custom component. You will have to move it tofield.admin.components.Description
- Collapsible Field:
field.label
no longer accepts a custom component. You will have to move it tofield.admin.components.RowLabel
- Array Field:
field.admin.components.RowLabel
no longer accepts strings or records- If you are using our exported field components in your own app, their
labelProps
property has been stripped down and no longer contains thelabel
andrequired
prop. Those can now only be configured at the top-level
Published by denolfe 6 months ago
Published by denolfe 6 months ago
BREAKING:
- Narrows the type of the
plugins
prop of lexical features. Client props are now also automatically provided to the plugin components. To migrate, type your plugin as eitherPluginComponent
or PluginComponentWithAnchor.BlockQuoteFeature
has been renamed toBlockquoteFeature
createClientComponent
is now exported only from /components- The
LexicalBlocks
andFieldWithRichTextRequiredEditor
types have been removed in favor of justBlocks
&Fields
, as well as improved validation.
Published by denolfe 6 months ago
editor: lexicalEditor({
features: ({ defaultFeatures }) => [
...defaultFeatures,
FixedToolbarFeature(),
],
}),
Some minor type renaming for consistency with other packages.
BREAKING:
- The default inline toolbar has now been extracted into an
InlineToolbarFeature
. While it's part of the defaultFeatures, you might have to add it to your editor features if you are not including the defaultFeatures and still want to keep the inline toolbar (floating toolbar)- Some types have been renamed, e.g.
InlineToolbarGroup
is nowToolbarGroup
, andInlineToolbarGroupItem
is nowToolbarGroupItem
- The
displayName
property of SlashMenuGroup and SlashMenuItem has been renamed tolabel
to match thelabel
prop of the toolbars- The
inlineToolbarFeatureButtonsGroupWithItem
,inlineToolbarFormatGroupWithItems
andinlineToolbarTextDropdownGroupWithItems
exports have been renamed totoolbarTextDropdownGroupWithItems
,toolbarFormatGroupWithItems
,toolbarFeatureButtonsGroupWithItems
Published by denolfe 6 months ago
All plugins have been updated to use named exports and the names have been updated to be consistent.
Please read the list below and rename your import accordingly
// before
import { cloudStorage } from '@payloadcms/plugin-cloud-storage'
// current
import { cloudStoragePlugin } from '@payloadcms/plugin-cloud-storage'
// before
import { payloadCloud } from '@payloadcms/plugin-cloud'
// current
import { payloadCloudPlugin } from '@payloadcms/plugin-cloud'
// before
import formBuilder from '@payloadcms/plugin-form-builder'
// current
import { formBuilderPlugin } from '@payloadcms/plugin-form-builder'
// before
import { nestedDocs } from '@payloadcms/plugin-nested-docs'
// current
import { nestedDocsPlugin } from '@payloadcms/plugin-nested-docs'
// before
import { redirects } from '@payloadcms/plugin-redirects'
// current
import { redirectsPlugin } from '@payloadcms/plugin-redirects'
// before
import search from '@payloadcms/plugin-search'
// current
import { searchPlugin } from '@payloadcms/plugin-search'
// before
import { sentry } from '@payloadcms/plugin-sentry'
// current
import { sentryPlugin } from '@payloadcms/plugin-sentry'
// before
import { seo } from '@payloadcms/plugin-seo'
// current
import { seoPlugin } from '@payloadcms/plugin-seo'
If you have own, custom lexical features, there will be a bunch of breaking API changes for you. The saved JSON data is not affected.
floatingSelectToolbar
has been changed totoolbarInline
slashMenu.dynamicOptions
andslashMenu.options
have been changed toslashMenu.groups
andslashMenu.dynamicGroups
toolbarFixed.sections
is nowtoolbarFixed.groups
Slash menu group
options
and toolbar groupentries
have both been renamed toitems
Toolbar group item
onClick
has been renamed toonSelect
to match slash menu propertiesslashMenu item
onSelect
is no longer auto-wrapped inside aneditor.update
. If you perform editor updates in them, you have to wrap it inside aneditor.update
callback yourself. Within our own features this extra control has removed a good amount of unnecessary, nestededitor.update
calls, which is goodSlash menu items are no longer initialized using the
new
keyword, as they are now types and no longer classes. You can convert them to an object and add thekey
property as an object property instead of an argument to the previous SlashMenuItem constructorCSS classnames for slash menu and toolbars, as well as their items, have changed
CheckListFeature
is now exported as and has been renamed toChecklistFeature
For guidance on migration, check out how we migrated our own features in this PR's diff: https://github.com/payloadcms/payload/pull/6191/files
localesNotSaved
translation (#5996) (af67749)readonly
styles to disabled radio
fields (#6176) (9b7e62d)Published by denolfe 6 months ago
Published by denolfe 6 months ago
This will now display errors if you're previously had invalid link or upload fields data - for example if you have a required field added to an uploads node and did not provide a value to it every time you've added an upload node
- Drawer fields are no longer wrapped in a
fields
group. This might be breaking if you depend on them being in a field group in any way - potentially if you use custom link fields. This does not change how the data is saved- If you pass in an array of custom fields to the link feature, those were previously added to the base fields. Now, they completely replace the base fields for consistency. If you want to ADD fields to the base fields now, you will have to pass in a function and spread
defaultFields
- similar to how adding your own features to lexical worksExample Migration for ADDING fields to the link base fields:
Previous:
LinkFeature({ fields: [ { name: 'rel', label: 'Rel Attribute', type: 'select', hasMany: true, options: ['noopener', 'noreferrer', 'nofollow'], admin: { description: 'The rel attribute defines the relationship between a linked resource and the current document. This is a custom link field.', }, }, ], }),
Now:
LinkFeature({ fields: ({ defaultFields }) => [ ...defaultFields, { name: 'rel', label: 'Rel Attribute', type: 'select', hasMany: true, options: ['noopener', 'noreferrer', 'nofollow'], admin: { description: 'The rel attribute defines the relationship between a linked resource and the current document. This is a custom link field.', }, }, ], }), "
- sanitizeFields is now an async function
- the richText adapters now return a function instead of returning the adapter directly"
Published by denolfe 6 months ago
⚠ BREAKING CHANGES:
@payloadcms/richtext-lexical
Upgrade lexical from 0.13.1 to 0.14.5 and backport other changes by @AlessioGr in https://github.com/payloadcms/payload/pull/6095
Full Changelog: https://github.com/payloadcms/payload/compare/v3.0.0-beta.18...v3.0.0-beta.20