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:
-
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
-
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
š 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