Payload CMS Release: 3.0.0-beta.135

TL;DR

Payload CMS v3.0.0-beta.135 introduces significant enhancements including MDX support for the Lexical rich text editor, a brand new logo, and important performance optimizations. This release includes a breaking change to field styling, numerous bug fixes for GraphQL, Next.js integration, and various UI improvements. The update focuses on improving developer experience and fixing critical issues reported by the community.

Highlight of the Release

• New Payload logo introduced across the platform
• MDX support added to the Lexical rich text editor with bi-directional import/export
• Performance optimization by removing unnecessary field styles from initial page response
• Fixed issues with Next.js integration including locale handling and import maps
• Improved TypeScript support for queues with strict: true

Migration Guide

Breaking Change: Field Styling

This release includes a breaking change that affects developers who are importing Payload's field components into custom components or front-end applications. The width prop no longer exists and has been consolidated into the existing style prop.

To migrate, update your code as follows:

import { TextInput } from '@payloadcms/ui'

export const MyCustomComponent = () => {
  return (
    <TextInput 
-      width="60%"
       style={{
+        width: "60%",
       }}
    />
  )
}

This change was made to optimize the initial page response by removing unnecessary inline field styles that were being duplicated throughout the Client Config.

Upgrade Recommendations

This beta release contains important bug fixes and performance improvements that benefit all Payload users. The breaking change only affects developers who are importing Payload's field components into custom components or front-end applications.

For most users: This is a recommended upgrade that improves stability and performance.

For developers using Payload field components in custom code: You should plan to update your code to accommodate the breaking change in field styling (moving from width prop to style.width).

To upgrade:

1. Update your package.json to reference v3.0.0-beta.135
2. Run npm install or yarn to update dependencies
3. If you're using Payload field components in custom code, update your styling approach as described in the migration guide
4. Test your application thoroughly, especially if you're using Next.js integration or GraphQL with polymorphic relationships

Bug Fixes

Next.js Integration Fixes

Several critical fixes have been implemented for Next.js integration:

• Fixed initialization of Payload with importMap in the Root layout
• Improved locale handling in live preview edit view
• Fixed document data passing through edit view handler to prevent duplicate API requests

GraphQL Improvements

• Fixed loading of polymorphic hasMany relationships by correctly comparing arrays when isRelatedToManyCollections is true

UI and Navigation Fixes

• Fixed navigation jumping issues when no preferences are set
• Safely accessing field in default filter component to prevent "cannot access property field of undefined" errors
• Fixed sanitization of sub block field permissions

Error Handling and Data Integrity

• Improved error handling for WebSocket connection failures in getPayload node
• Fixed potential errors in sanitizeRelationshipIDs when ref is a non-object
• Fixed template seeding to use URLs instead of image assets for better compatibility with Vercel deployments
• Fixed queues types with strict: true to ensure all properties in generated types are required

New Features

MDX Support in Lexical Rich Text Editor

The Lexical rich text editor now supports bi-directional import/export between MDX and Lexical. This powerful feature allows JSX to be mapped to Lexical blocks and vice versa, enabling users to edit MDX documents directly within Payload while maintaining MDX as the source of truth. This is particularly valuable for documentation sites and content that requires the expressiveness of MDX.

New Payload Logo

This release introduces a fresh new logo for Payload CMS, giving the platform an updated visual identity. The new logo has been implemented across the entire platform, providing a more modern and cohesive brand experience.

Security Updates

No specific security fixes were mentioned in this release.

Performance Improvements

Optimized Initial Page Response

A significant performance improvement has been implemented by removing unnecessary inline field styles from the initial page response. The Client Config previously contained numerous duplicates of the string "style\":{\"flex\":\"1 1 auto\"}" for every field in the config, leading to hundreds or potentially thousands of instances of this same string being transmitted. This optimization moves the styling entirely client-side, preventing these redundant strings from being transmitted over the network in the first place.

Deduplication of Field Description Functions

Field description functions were being duplicately called in both the Client Config and form state. This has been optimized so that field description functions are only executed once within form state. Additionally, static descriptions are now deferred to the client for rendering, further improving performance.

Impact Summary

This release of Payload CMS (v3.0.0-beta.135) delivers significant improvements across multiple areas. The addition of MDX support to the Lexical rich text editor enables a more powerful content editing experience, especially for documentation sites. Performance optimizations in the initial page response will benefit all users by reducing network payload size.

The breaking change to field styling consolidates the approach to styling components, which may require updates to custom code but results in a cleaner API and better performance. The numerous bug fixes address important issues in Next.js integration, GraphQL queries, and UI behavior that were affecting users in production environments.

For developers, the improved TypeScript support with strict: true and the fixes for relationship handling in GraphQL provide a more robust development experience. Content editors will benefit from the more stable navigation and improved UI behavior.

Overall, this release represents an important step forward in stability and feature completeness as Payload approaches its 3.0 stable release.

Full Release Notes