feat(ui): custom ordering for rte fixed toolbar

[ruslan-amboss]

What

This PR introduces a customizable ordering system for toolbar groups in the Lexical Rich Text Editor. It allows developers to override the default order of toolbar components (such as format, align, indent) by specifying custom order values through the FixedToolbarFeature configuration.

Why

Previously, toolbar group ordering was hardcoded in each component (e.g., format group had order=40, align group had order=30, etc.). This made it impossible for developers to rearrange these components without modifying the source code.
This enhancement provides more flexibility for customizing the rich text editor interface to match specific project requirements or design preferences, without compromising the default behavior for users who don't need customization.

How

The implementation consists of three key parts:

1. Extended the FixedToolbarFeature API:

• Added a new customGroupOrders property to FixedToolbarFeatureProps that accepts a record mapping group keys to custom order values
• Preserved all existing functionality while adding this new capability

2. Modified the sanitization process:

• Updated the sanitizeClientFeatures function to detect and collect custom order configurations from toolbar features
• Enhanced the toolbar group sorting logic to prioritize custom order values when available, while falling back to default ordering when no custom configuration exists

3. Maintained backward compatibility:

• The implementation is opt-in, preserving the existing behavior for all current users
• Default orders are still respected when no custom order is specified

Usage Example

import { FixedToolbarFeature } from '@payloadcms/richtext-lexical'

{
  name: 'content',
  type: 'richText',
  admin: {
    features: [
      // Other features...
      FixedToolbarFeature({
        customGroupOrders: {
          'text': 10,
          'format': 15,
          'add': 20,
        }
      })
    ]
  }
}

Before

before.mov

After

after.mov