feat(ui): fixed toolbar group customization

packages/richtext-lexical/src/features/toolbars/fixed/server/index.ts

@@ -1,3 +1,5 @@
+import type { ToolbarGroup } from '../../types.js'
+
 import { createServerFeature } from '../../../../utilities/createServerFeature.js'
 
 export type FixedToolbarFeatureProps = {
@@ -9,6 +11,12 @@ export type FixedToolbarFeatureProps = {
    * This means that if the editor has a child-editor, and the child-editor is focused, the toolbar will apply to the child-editor, not the parent editor with this feature added.
    */
   applyToFocusedEditor?: boolean
+  /**
+   * Custom configurations for toolbar groups
+   * Key is the group key (e.g. 'format', 'indent', 'align')
+   * Value is a partial ToolbarGroup object that will be merged with the default configuration
+   */
+  customGroups?: Record<string, Partial<ToolbarGroup>>
   /**
    * @default false
    *
@@ -26,6 +34,7 @@ export const FixedToolbarFeature = createServerFeature<
     const sanitizedProps: FixedToolbarFeatureProps = {
       applyToFocusedEditor:
         props?.applyToFocusedEditor === undefined ? false : props.applyToFocusedEditor,
+      customGroups: props?.customGroups,
       disableIfParentHasFixedToolbar:
         props?.disableIfParentHasFixedToolbar === undefined
           ? false

packages/richtext-lexical/src/lexical/config/client/sanitize.ts

@@ -2,6 +2,9 @@
 
 import type { EditorConfig as LexicalEditorConfig } from 'lexical'
 
+import { deepMerge } from 'payload/shared'
+
+import type { ToolbarGroup } from '../../../features/toolbars/types.js'
 import type {
   ResolvedClientFeatureMap,
   SanitizedClientFeatures,
@@ -31,6 +34,17 @@ export const sanitizeClientFeatures = (
     },
   }
 
+  // Allow customization of groups for toolbarFixed
+  let customGroups: Record<string, Partial<ToolbarGroup>> = {}
+  features.forEach((feature) => {
+    if (feature.key === 'toolbarFixed' && feature.sanitizedClientFeatureProps?.customGroups) {
+      customGroups = {
+        ...customGroups,
+        ...feature.sanitizedClientFeatureProps.customGroups,
+      }
+    }
+  })
+
   if (!features?.size) {
     return sanitized
   }
@@ -158,6 +172,17 @@ export const sanitizeClientFeatures = (
     sanitized.enabledFeatures.push(feature.key)
   })
 
+  // Apply custom group configurations to toolbarFixed groups
+  if (Object.keys(customGroups).length > 0) {
+    sanitized.toolbarFixed.groups = sanitized.toolbarFixed.groups.map((group) => {
+      const customConfig = customGroups[group.key]
+      if (customConfig) {
+        return deepMerge(group, customConfig)
+      }
+      return group
+    })
+  }
+
   // Sort sanitized.toolbarInline.groups by order property
   sanitized.toolbarInline.groups.sort((a, b) => {
     if (a.order && b.order) {