Payload CMS Release: 3.0.0-beta.26

TL;DR

PayloadCMS 3.0.0-beta.26 Release

This beta release introduces significant improvements to the rich text editor with Lexical, adds SSR live preview functionality, enhances image crop rendering in thumbnails, and fixes numerous UX issues. Notable breaking changes include refined type definitions for Lexical plugins and disabling the Stripe REST proxy by default.

Highlight of the Release

• SSR live preview functionality for more accurate content previews
• Improved crop rendering in thumbnails for better image management
• Enhanced Lexical rich text editor with better UX and toolbar positioning
• Strongly typed plugin components for better developer experience
• Added maxDepth property to various Lexical features for more control

Migration Guide

Breaking Changes Migration

Lexical Rich Text Editor

1. Update plugin component types:

   • Use PluginComponent or PluginComponentWithAnchor types for your plugins
   • Client props are now automatically provided to plugin components

2. Rename BlockQuoteFeature to BlockquoteFeature in your imports and usage

3. Update imports:

   • createClientComponent is now exported only from /components
   • Replace LexicalBlocks and FieldWithRichTextRequiredEditor types with Blocks & Fields

Stripe Plugin

• The REST proxy is now disabled by default. If your application relies on this functionality, you need to explicitly enable it in your Stripe plugin configuration.

Upgrade Recommendations

This beta release contains important improvements and bug fixes for the rich text editor and introduces SSR live preview functionality. Developers using the Lexical rich text editor should upgrade but be prepared to make the necessary changes to accommodate the breaking changes in type definitions.

If you're using the Stripe plugin, be aware that the REST proxy is now disabled by default and will need to be explicitly enabled if required.

To upgrade:

1. Update your Payload CMS dependency to version 3.0.0-beta.26
2. Review and update any Lexical plugin implementations according to the migration guide
3. Check your Stripe plugin configuration if applicable
4. Test thoroughly, especially rich text editing functionality and any SSR preview implementations

Bug Fixes

Rich Text Editor Fixes

• Fixed various UX issues in the Lexical rich text editor
• Ensured toolbar actions properly focus the editor when needed
• Fixed link editor selection issues
• Improved toolbar wrapping on small screen sizes
• Fixed positioning of inline toolbar between link editor and fixed toolbar
• Fixed text selection issues within relationship and upload node components
• Corrected overlapping inline editor and clickable link editor in the first line
• Fixed floating link editor visibility when selection is not a range selection

Other Fixes

• Properly extracts fallbackLang for better language handling

New Features

SSR Live Preview

Added server-side rendering support for live preview functionality, allowing content editors to see a more accurate representation of how their content will appear on the frontend.

Improved Crop Rendering in Thumbnails

Enhanced the rendering of cropped images in thumbnails, providing a better visual representation of the actual crop that will be applied.

Rich Text Editor Enhancements

• Added strongly typed PluginComponent types for better developer experience
• Improved draggable block indicator styling and animations for better visual feedback
• Added maxDepth property to various Lexical features for more control over content structure
• Improved exports and type definitions for better TypeScript support

Security Updates

No specific security fixes were mentioned in this release.

Performance Improvements

Rich Text Editor Performance

The improvements to the Lexical rich text editor, including better handling of selections and toolbar positioning, contribute to a smoother editing experience with less UI jank and more responsive interactions.

Impact Summary

This beta release significantly improves the rich text editing experience with numerous UX enhancements and bug fixes to the Lexical editor. The addition of SSR live preview functionality provides content editors with a more accurate representation of how their content will appear on the frontend.

The breaking changes to the Lexical plugin system require developers to update their implementations, but result in better type safety and a more consistent API. The disabling of the Stripe REST proxy by default is a security-focused change that requires explicit opt-in for this functionality.

Overall, this release enhances both developer and content editor experiences with better TypeScript support, improved UI interactions, and more accurate content previewing capabilities.

Full Release Notes