Payload CMS Release: 3.0.0-beta.102

TL;DR

PayloadCMS v3.0.0-beta.102 introduces explicit typing for field components and fixes critical bugs

This release brings a significant improvement to TypeScript support by explicitly typing field components for both client and server environments. It also fixes important bugs related to rich text indentation and localized blocks/arrays duplication. Developers using custom field components will need to update their type imports due to breaking changes in the typing system.

Highlight of the Release

• Explicit typing for field components in both client and server environments
• Fixed rich text indentation regression to maintain consistent 40px indentation
• Fixed issue with duplicating localized blocks and arrays

Migration Guide

Migrating to Explicit Field Component Types

If you have custom field components that import field prop types from PayloadCMS, you'll need to update your imports to use the new environment-specific types.

Before:

import type { TextFieldProps } from 'payload'

export const MyCustomTextField: React.FC<TextFieldProps> = (props) => {
  // Component implementation
}

After:

For client components:

'use client'
import type { TextFieldClientProps, TextFieldClientComponent } from 'payload'

export const MyCustomClientTextField: TextFieldClientComponent = (props) => {
  // Component implementation
}

For server components:

import type { TextFieldServerProps, TextFieldServerComponent } from 'payload'

export const MyCustomServerTextField: TextFieldServerComponent = (props) => {
  // Component implementation
}

This pattern applies to all field types (Text, Textarea, Select, etc.), where you'll need to use the appropriate [FieldType]ClientProps/[FieldType]ServerProps or [FieldType]ClientComponent/[FieldType]ServerComponent types based on your component's environment.

Upgrade Recommendations

This release contains breaking changes to the type system for field components, so developers using custom field components with TypeScript will need to update their code.

1. For TypeScript Projects: Update immediately but plan for type changes in your custom field components.

2. For JavaScript-only Projects: This update is safe to apply as the changes primarily affect TypeScript types.

3. For Projects with Rich Text Editor: Upgrading is recommended to fix the indentation regression.

4. For Projects Using Localized Blocks/Arrays: Upgrading is recommended to fix duplication issues.

The upgrade process should be straightforward:

1. Update your dependency to v3.0.0-beta.102
2. Update type imports in your custom field components
3. Test your application thoroughly, especially custom field components and rich text editing functionality

Bug Fixes

Rich Text Indentation Regression Fix

Fixed a regression (issue #8038) in the rich text editor where indentation wasn't consistently applied. The fix ensures that indentation is maintained at 40px at all times, which aligns with browser defaults for lists. This consistency ensures that indented paragraphs and headings match the indentation of lists.

Localized Blocks and Arrays Duplication Fix

Resolved an issue (issue #7988) where the beforeDuplicate hook wasn't properly handling localized blocks and arrays. This fix ensures that when duplicating content with localized blocks and arrays, the duplication process works correctly and maintains the proper structure and localization information.

New Features

Explicit Typing for Field Components

PayloadCMS now provides explicit type definitions for field components in both client and server environments. This addresses a significant gap in the typing system where custom server field components weren't properly typed.

Previously, all field components were treated as client components internally, which made it difficult to properly type server components. The new system exports specific types for each environment:

For client components:

'use client'
export const MyClientTextFieldComponent: TextFieldClientComponent

For server components:

export const MyServerTextFieldComponent: TextFieldServerComponent

This pattern applies to all field types, with each field name prepended to the component type. The new types can be imported as:

import type {
  TextFieldClientComponent,
  TextFieldServerComponent,
  TextFieldClientProps,
  TextFieldServerProps,
  // ...and similar types for other field types
} from 'payload'

This improvement ensures that server components receive properly typed field and payload props without requiring manual typing using underlying utilities.

Security Updates

No security fixes were mentioned in this release.

Performance Improvements

No specific performance improvements were mentioned in this release.

Impact Summary

PayloadCMS v3.0.0-beta.102 brings significant improvements to TypeScript support through explicit typing for field components in both client and server environments. This addresses a long-standing issue where server components lacked proper typing. The release also fixes important bugs related to rich text indentation and localized content duplication.

The most notable impact is the breaking change to field component types. Developers using custom field components with TypeScript will need to update their type imports from generic types like TextFieldProps to environment-specific types like TextFieldClientProps or TextFieldServerProps. This change improves type safety but requires code modifications.

Content editors will benefit from fixes to rich text indentation, ensuring consistent 40px indentation that aligns with browser defaults for lists. The fix for localized blocks and arrays duplication also improves the content editing experience when working with multilingual content.

Overall, this release enhances developer experience through better TypeScript support while fixing important usability issues for content editors.

Full Release Notes