feat(richtext-lexical): add rootFeatures prop to lexicalEditor (#6360)

packages/richtext-lexical/src/field/lexical/config/server/default.ts

@@ -21,7 +21,6 @@ import { OrderedListFeature } from '../../../features/lists/orderedList/feature.
 import { UnorderedListFeature } from '../../../features/lists/unorderedList/feature.server.js'
 import { ParagraphFeature } from '../../../features/paragraph/feature.server.js'
 import { RelationshipFeature } from '../../../features/relationship/feature.server.js'
-import { FixedToolbarFeature } from '../../../features/toolbars/fixed/feature.server.js'
 import { InlineToolbarFeature } from '../../../features/toolbars/inline/feature.server.js'
 import { UploadFeature } from '../../../features/upload/feature.server.js'
 import { LexicalEditorTheme } from '../../theme/EditorTheme.js'

packages/richtext-lexical/src/index.ts

@@ -6,7 +6,12 @@ import { withNullableJSONSchemaType } from 'payload/utilities'
 
 import type { FeatureProviderServer, ResolvedServerFeatureMap } from './field/features/types.js'
 import type { SanitizedServerEditorConfig } from './field/lexical/config/types.js'
-import type { AdapterProps, LexicalEditorProps, LexicalRichTextAdapterProvider } from './types.js'
+import type {
+  AdapterProps,
+  LexicalEditorProps,
+  LexicalRichTextAdapter,
+  LexicalRichTextAdapterProvider,
+} from './types.js'
 
 import { RichTextCell } from './cell/index.js'
 import { RichTextField } from './field/index.js'
@@ -29,6 +34,7 @@ let defaultSanitizedServerEditorConfig: SanitizedServerEditorConfig = null
 
 export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapterProvider {
   return async ({ config, isRoot }) => {
+    let features: FeatureProviderServer<unknown, unknown>[] = []
     let resolvedFeatureMap: ResolvedServerFeatureMap
 
     let finalSanitizedEditorConfig: SanitizedServerEditorConfig // For server only
@@ -38,15 +44,25 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte
           defaultEditorConfig,
           config,
         )
+        features = cloneDeep(defaultEditorFeatures)
       }
 
       finalSanitizedEditorConfig = cloneDeep(defaultSanitizedServerEditorConfig)
 
       resolvedFeatureMap = finalSanitizedEditorConfig.resolvedFeatureMap
     } else {
-      let features: FeatureProviderServer<unknown, unknown>[] =
+      const rootEditor = config.editor
+      let rootEditorFeatures: FeatureProviderServer<unknown, unknown>[] = []
+      if (typeof rootEditor === 'object' && 'features' in rootEditor) {
+        rootEditorFeatures = (rootEditor as LexicalRichTextAdapter).features
+      }
+
+      features =
         props.features && typeof props.features === 'function'
-          ? props.features({ defaultFeatures: cloneDeep(defaultEditorFeatures) })
+          ? props.features({
+              defaultFeatures: cloneDeep(defaultEditorFeatures),
+              rootFeatures: rootEditorFeatures,
+            })
           : (props.features as FeatureProviderServer<unknown, unknown>[])
       if (!features) {
         features = cloneDeep(defaultEditorFeatures)
@@ -80,6 +96,7 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte
         toMergeIntoProps: { lexicalEditorConfig: finalSanitizedEditorConfig.lexical },
       }),
       editorConfig: finalSanitizedEditorConfig,
+      features,
       generateComponentMap: getGenerateComponentMap({
         resolvedFeatureMap,
       }),

packages/richtext-lexical/src/types.ts

@@ -11,8 +11,33 @@ export type LexicalEditorProps = {
   features?:
     | (({
         defaultFeatures,
+        rootFeatures,
       }: {
+        /**
+         * This opinionated array contains all "recommended" default features.
+         *
+         * @Example
+         *
+         * ```ts
+         *  editor: lexicalEditor({
+         *    features: ({ defaultFeatures }) => [...defaultFeatures, FixedToolbarFeature()],
+         *  })
+         *  ```
+         */
         defaultFeatures: FeatureProviderServer<any, any>[]
+        /**
+         * This array contains all features that are enabled in the root richText editor (the one defined in the payload.config.ts).
+         * If this field is the root richText editor, or if the root richText editor is not a lexical editor, this array will be empty
+         *
+         * @Example
+         *
+         * ```ts
+         *  editor: lexicalEditor({
+         *    features: ({ rootFeatures }) => [...rootFeatures, FixedToolbarFeature()],
+         *  })
+         *  ```
+         */
+        rootFeatures: FeatureProviderServer<any, any>[]
       }) => FeatureProviderServer<any, any>[])
     | FeatureProviderServer<any, any>[]
   lexical?: LexicalEditorConfig
@@ -20,6 +45,7 @@ export type LexicalEditorProps = {
 
 export type LexicalRichTextAdapter = RichTextAdapter<SerializedEditorState, AdapterProps, any> & {
   editorConfig: SanitizedServerEditorConfig
+  features: FeatureProviderServer<any, any>[]
 }
 
 export type LexicalRichTextAdapterProvider =