Home

>

Tools

>

Payload CMS

>

Releases

>

3.0.0-beta.98

Payload CMS Release: 3.0.0-beta.98

Pre Release

Tag Name: v3.0.0-beta.98

Release Date: 9/3/2024

Payload CMS LogoPayload CMS

Payload CMS is a modern, self-hosted headless content management system built with TypeScript, Node.js, and MongoDB. It's designed specifically for developers who want full control over their content management system while maintaining a powerful admin interface for content editors.

TL;DR

PayloadCMS v3.0.0-beta.98 brings significant performance improvements to the rich text editor by simplifying Lexical loading, adds Italian translations to the SEO plugin, and fixes several UI issues including list view crashes, radio field filtering, and rich text toolbar styling. This release includes breaking changes to the Lexical editor API that developers using custom Lexical features should be aware of.

Highlight of the Release

    • Major performance improvements to the Lexical rich text editor
    • Italian translations added to the SEO plugin
    • Fixed UI issues including list view crashes and radio field filtering
    • Improved rich text toolbar styling and functionality
    • Breaking changes to the Lexical editor API

Migration Guide

Breaking Changes in Lexical Rich Text Editor

If you're using custom features with the Lexical rich text editor, you'll need to make the following adjustments:

  1. API Changes:

    • createClientComponent is no longer exported as it's not needed anymore
    • The exported ClientComponentProps type has been renamed to BaseClientFeatureProps
    • The order of arguments in sanitizeClientEditorConfig has changed
  2. Migration Steps:

    • If you were using createClientComponent, refactor your code to bring functions down to the client directly
    • Update any type references from ClientComponentProps to BaseClientFeatureProps
    • Check and update any calls to sanitizeClientEditorConfig to match the new parameter order

For detailed implementation examples, refer to the changes in PR #8041.

Upgrade Recommendations

This release contains important bug fixes and performance improvements, particularly for the rich text editor.

For most users: This upgrade is recommended as it fixes several UI issues and improves performance.

For developers using custom Lexical features: Review the breaking changes carefully before upgrading. You will need to update your code to accommodate the API changes in the Lexical editor.

To upgrade:

npm install [email protected]
# or
yarn add [email protected]

After upgrading, test your application thoroughly, especially any custom rich text editor implementations.

Bug Fixes

UI Fixes

  • Fixed list view crash when using a code field type (#7994)
  • Radio fields are now properly selectable as options in filtering within the query builder (#8002)
  • Fixed collection pagination limits being merged with defaults instead of being overridden as expected (#8004)
  • Corrected padding issues on the right side when scrollbars are enabled in the browser (#8023)

Rich Text Editor Fixes

  • Fixed incorrect error check in TableActionMenu component (#7964, fixes issues #7961 and #8021)
  • Corrected toolbar styles where the active style was not effective due to a CSS typo (#7936, fixes issue #7925)

SEO Plugin Fixes

  • Fixed meta image selection not working in the SEO plugin (#8024, fixes issue #8016)

New Features

Italian Translations for SEO Plugin

The SEO plugin now includes Italian translations, making it more accessible to Italian-speaking users. This enhancement expands the internationalization capabilities of PayloadCMS, allowing for a more localized experience.

Rich Text Editor Improvements

While technically a performance improvement, the rich text editor (Lexical) has been significantly reworked to provide a better user experience with improved toolbar styling:

  • Better visual differentiation between hover, active, and hover+active states
  • Added proper spacing (gap) to fixed toolbar buttons
  • Improved color consistency throughout the editor interface

Security Updates

No specific security fixes were mentioned in this release.

Performance Improvements

Rich Text Editor Performance Boost

The Lexical rich text editor has undergone a significant architectural improvement that greatly enhances performance:

  • Functions can now be brought down to the client directly without wrapping them in a component first
  • This simplification greatly improves the loading time and overall performance of all Lexical client components
  • The codebase is now more streamlined and efficient, resulting in a smoother editing experience

Code Cleanup

  • Removed all unused imports throughout the codebase (#7999)
  • Improved template handling by using tar files from codeload instead of degit (#8006)
  • These changes contribute to a leaner codebase and potentially faster load times

Impact Summary

This release significantly improves the performance and stability of PayloadCMS, particularly for users of the rich text editor. The architectural changes to the Lexical editor result in faster loading times and a more responsive editing experience.

The addition of Italian translations to the SEO plugin expands the CMS's internationalization capabilities, making it more accessible to Italian-speaking users.

Several UI bugs have been fixed, including issues with list views, radio fields in filtering, and rich text toolbar styling. These fixes collectively enhance the user experience and eliminate frustrating edge cases that could impact productivity.

The breaking changes to the Lexical editor API are significant for developers who have built custom rich text features, but the performance benefits justify the required code updates. The simplified architecture will also make future development and maintenance easier.

Overall, this release represents an important step forward in PayloadCMS's evolution, balancing new features with performance improvements and necessary bug fixes.

Full Release Notes

v3.0.0-beta.98 (2024-09-03)

šŸš€ Features

⚔ Performance

  • richtext-lexical: greatly simplify lexical loading and improve performance (#8041) (b6a8d1c)

šŸ› Bug Fixes

  • richtext-lexical: toolbar styles (#7936) (7a3507d)
  • plugin-seo: meta image selection not working (#8024) (9bcdf0d)
  • padding on the right of the default padding when scrollbars are enabled in the browser (#8023) (8203fe8)
  • richtext-lexical: incorrect error check in TableActionMenu (#7964) (d9cccc7)
  • collection pagination limits being merged with defaults instead of overidden (#8004) (ee3d585)
  • ui: radio fields are now selectable as options in filtering in query builder (#8002) (cf9e13a)
  • ui: list view crash when using a code field type (#7994) (e25730f)

āš ļø BREAKING CHANGES

  • richtext-lexical: greatly simplify lexical loading and improve performance (#8041) (b6a8d1c)

    We noticed that we can bring functions down to the client directly
    without having to wrap them in a component first. This greatly
    simplifies the loading of all lexical client components

    BREAKING:

    • createClientComponent is no longer exported as it's not needed
      anymore
    • The exported ClientComponentProps type has been renamed to
      BaseClientFeatureProps.
    • The order of arguments in sanitizeClientEditorConfig has changed

šŸ¤ Contributors

Statistics:

File Changed183
Line Additions4,147
Line Deletions9,451
Line Changes13,598
Total Commits21

User Affected:

  • Need to adapt to breaking changes in the Lexical rich text editor API
  • Benefit from improved performance in rich text editing
  • Can now use Italian translations in the SEO plugin

Contributors:

paulpopusdenolfeAlessioGrrilromxfloorGermanJablo