feat(richtext-lexical)!: strongly typed PluginComponent types, remove LexicalBlocks, improve exports, fix e2e (#6255)

**BREAKING:**
- Narrows the type of the `plugins` prop of lexical features. Client props are now also automatically provided to the plugin components. To migrate, type your plugin as either `PluginComponent` or PluginComponentWithAnchor.
- `BlockQuoteFeature` has been renamed to `BlockquoteFeature`
- `createClientComponent` is now exported only from /components
- The `LexicalBlocks` and `FieldWithRichTextRequiredEditor` types have been removed in favor of just `Blocks` & `Fields`, as well as improved validation.

Author: AlessioGr

packages/payload/src/admin/RichText.ts

@@ -92,8 +92,15 @@ export type RichTextAdapterProvider<
   ExtraFieldProperties = {},
 > = ({
   config,
+  isRoot,
 }: {
   config: SanitizedConfig
+  /**
+   * Whether or not this is the root richText editor, defined in the payload.config.ts.
+   *
+   * @default false
+   */
+  isRoot?: boolean
 }) =>
   | Promise<RichTextAdapter<Value, AdapterProps, ExtraFieldProperties>>
   | RichTextAdapter<Value, AdapterProps, ExtraFieldProperties>

packages/payload/src/config/sanitize.ts

@@ -150,6 +150,7 @@ export const sanitizeConfig = async (incomingConfig: Config): Promise<SanitizedC
   if (typeof incomingConfig.editor === 'function') {
     config.editor = await incomingConfig.editor({
       config: config as SanitizedConfig,
+      isRoot: true,
     })
   }
 

packages/payload/src/errors/MissingEditorProp.ts

@@ -6,7 +6,7 @@ import { APIError } from './APIError.js'
 export class MissingEditorProp extends APIError {
   constructor(field: Field) {
     super(
-      `RichText field${fieldAffectsData(field) ? ` "${field.name}"` : ''} is missing the editor prop`,
+      `RichText field${fieldAffectsData(field) ? ` "${field.name}"` : ''} is missing the editor prop. For sub-richText fields, the editor props is required, as it would otherwise create infinite recursion.`,
     )
   }
 }

packages/payload/src/exports/types.ts

@@ -72,7 +72,6 @@ export type {
   FieldWithMany,
   FieldWithMaxDepth,
   FieldWithPath,
-  FieldWithRichTextRequiredEditor,
   FieldWithSubFields,
   FilterOptions,
   FilterOptionsProps,
@@ -91,7 +90,6 @@ export type {
   RelationshipField,
   RelationshipValue,
   RichTextField,
-  RichTextFieldRequiredEditor,
   RowAdmin,
   RowField,
   SelectField,

packages/payload/src/fields/config/sanitize.ts

@@ -161,7 +161,10 @@ export const sanitizeFields = async ({
         }
 
         if (typeof field.editor === 'function') {
-          field.editor = await field.editor({ config: _config })
+          field.editor = await field.editor({
+            config: _config,
+            isRoot: requireFieldLevelRichTextEditor,
+          })
         }
 
         // Add editor adapter hooks to field hooks

packages/payload/src/fields/config/types.ts

@@ -607,16 +607,6 @@ export type RichTextField<
   type: 'richText'
 } & ExtraProperties
 
-export type RichTextFieldRequiredEditor<
-  Value extends object = any,
-  AdapterProps = any,
-  ExtraProperties = object,
-> = Omit<RichTextField<Value, AdapterProps, ExtraProperties>, 'editor'> & {
-  editor:
-    | RichTextAdapter<Value, AdapterProps, AdapterProps>
-    | RichTextAdapterProvider<Value, AdapterProps, AdapterProps>
-}
-
 export type ArrayField = FieldBase & {
   admin?: Admin & {
     components?: {
@@ -730,10 +720,6 @@ export type Field =
   | UIField
   | UploadField
 
-export type FieldWithRichTextRequiredEditor =
-  | Exclude<Field, RichTextField>
-  | RichTextFieldRequiredEditor
-
 export type FieldAffectingData =
   | ArrayField
   | BlockField

packages/richtext-lexical/src/exports/components.ts

@@ -1,7 +1,13 @@
 export { RichTextCell } from '../cell/index.js'
-export { ToolbarButton } from '../field/features/toolbars/shared/ToolbarButton/index.js'
+export { createClientComponent } from '../field/features/createClientComponent.js'
 
+export { toolbarFormatGroupWithItems } from '../field/features/format/shared/toolbarFormatGroup.js'
+export { toolbarAddDropdownGroupWithItems } from '../field/features/shared/toolbar/addDropdownGroup.js'
+export { toolbarFeatureButtonsGroupWithItems } from '../field/features/shared/toolbar/featureButtonsGroup.js'
+export { toolbarTextDropdownGroupWithItems } from '../field/features/shared/toolbar/textDropdownGroup.js'
+export { ToolbarButton } from '../field/features/toolbars/shared/ToolbarButton/index.js'
 export { ToolbarDropdown } from '../field/features/toolbars/shared/ToolbarDropdown/index.js'
+
 export { RichTextField } from '../field/index.js'
 export {
   type EditorFocusContextType,

packages/richtext-lexical/src/field/features/blockquote/feature.client.tsx

@@ -40,7 +40,7 @@ const toolbarGroups: ToolbarGroup[] = [
   ]),
 ]
 
-const BlockQuoteFeatureClient: FeatureProviderProviderClient<undefined> = (props) => {
+const BlockquoteFeatureClient: FeatureProviderProviderClient<undefined> = (props) => {
   return {
     clientFeatureProps: props,
     feature: () => ({
@@ -80,4 +80,4 @@ const BlockQuoteFeatureClient: FeatureProviderProviderClient<undefined> = (props
   }
 }
 
-export const BlockQuoteFeatureClientComponent = createClientComponent(BlockQuoteFeatureClient)
+export const BlockquoteFeatureClientComponent = createClientComponent(BlockquoteFeatureClient)

packages/richtext-lexical/src/field/features/blockquote/feature.server.ts

@@ -4,14 +4,14 @@ import type { FeatureProviderProviderServer } from '../types.js'
 
 import { convertLexicalNodesToHTML } from '../converters/html/converter/index.js'
 import { createNode } from '../typeUtilities.js'
-import { BlockQuoteFeatureClientComponent } from './feature.client.js'
+import { BlockquoteFeatureClientComponent } from './feature.client.js'
 import { MarkdownTransformer } from './markdownTransformer.js'
 
-export const BlockQuoteFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {
+export const BlockquoteFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {
   return {
     feature: () => {
       return {
-        ClientComponent: BlockQuoteFeatureClientComponent,
+        ClientComponent: BlockquoteFeatureClientComponent,
         clientFeatureProps: null,
         markdownTransformers: [MarkdownTransformer],
         nodes: [

packages/richtext-lexical/src/field/features/blocks/feature.server.ts

@@ -1,5 +1,5 @@
 import type { Config } from 'payload/config'
-import type { Block, BlockField, Field, FieldWithRichTextRequiredEditor } from 'payload/types'
+import type { Block, BlockField, Field } from 'payload/types'
 
 import { traverseFields } from '@payloadcms/next/utilities'
 import { baseBlockFields, sanitizeFields } from 'payload/config'
@@ -14,33 +14,29 @@ import { BlockNode } from './nodes/BlocksNode.js'
 import { blockPopulationPromiseHOC } from './populationPromise.js'
 import { blockValidationHOC } from './validate.js'
 
-export type LexicalBlock = Omit<Block, 'fields'> & {
-  fields: FieldWithRichTextRequiredEditor[]
-}
-
 export type BlocksFeatureProps = {
-  blocks: LexicalBlock[]
+  blocks: Block[]
 }
 
 export const BlocksFeature: FeatureProviderProviderServer<
   BlocksFeatureProps,
   BlocksFeatureClientProps
 > = (props) => {
   return {
-    feature: async ({ config: _config }) => {
+    feature: async ({ config: _config, isRoot }) => {
       if (props?.blocks?.length) {
         const validRelationships = _config.collections.map((c) => c.slug) || []
 
         for (const block of props.blocks) {
-          block.fields = block.fields.concat(baseBlockFields as FieldWithRichTextRequiredEditor[])
+          block.fields = block.fields.concat(baseBlockFields)
           block.labels = !block.labels ? formatLabels(block.slug) : block.labels
 
-          block.fields = (await sanitizeFields({
+          block.fields = await sanitizeFields({
             config: _config as unknown as Config,
             fields: block.fields,
-            requireFieldLevelRichTextEditor: true,
+            requireFieldLevelRichTextEditor: isRoot,
             validRelationships,
-          })) as FieldWithRichTextRequiredEditor[]
+          })
         }
       }