From 7cad6341559738a2fbc7e49a263c44ee6ea6ff1a Mon Sep 17 00:00:00 2001
From: ruslan-amboss <rri@medicuja.com>
Date: Mon, 14 Apr 2025 22:33:34 +0200
Subject: [PATCH] feat(ui): fixed toolbar group customization

---
 .../features/toolbars/fixed/server/index.ts   |  9 +++++++
 .../src/lexical/config/client/sanitize.ts     | 25 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/packages/richtext-lexical/src/features/toolbars/fixed/server/index.ts b/packages/richtext-lexical/src/features/toolbars/fixed/server/index.ts
index c87f33829b7..688539886e0 100644
--- a/packages/richtext-lexical/src/features/toolbars/fixed/server/index.ts
+++ b/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
diff --git a/packages/richtext-lexical/src/lexical/config/client/sanitize.ts b/packages/richtext-lexical/src/lexical/config/client/sanitize.ts
index 294683cd3ba..41ae552eaf6 100644
--- a/packages/richtext-lexical/src/lexical/config/client/sanitize.ts
+++ b/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) {