fix(ui): respect custom Cell components on richText fields in list view (#15762)

Fixes #13954

Fixes richText fields ignoring `admin.components.Cell` in list view. The
`renderCell` function unconditionally used the editor's built-in
`CellComponent` for richText fields without checking for a user-defined
Cell first. Now it checks `admin.components.Cell` and falls back to the
editor's default.

Author: AlessioGr

packages/ui/src/providers/TableColumns/buildColumnState/renderCell.tsx

@@ -177,9 +177,11 @@ export function renderCell({
       serverField.admin.components = {}
     }
 
+    const CustomCellComponent = serverField.admin.components.Cell
+
     CustomCell = RenderServerComponent({
       clientProps: cellClientProps,
-      Component: serverField.editor.CellComponent,
+      Component: CustomCellComponent ?? serverField.editor.CellComponent,
       importMap: payload.importMap,
       serverProps: cellServerProps,
     })

test/lexical/baseConfig.ts

@@ -14,6 +14,7 @@ import {
 } from './collections/Lexical/index.js'
 import { LexicalAccessControl } from './collections/LexicalAccessControl/index.js'
 import { LexicalAutosave } from './collections/LexicalAutosave/index.js'
+import { LexicalCustomCell } from './collections/LexicalCustomCell/index.js'
 import { LexicalHeadingFeature } from './collections/LexicalHeadingFeature/index.js'
 import { LexicalInBlock } from './collections/LexicalInBlock/index.js'
 import { LexicalJSXConverter } from './collections/LexicalJSXConverter/index.js'
@@ -67,6 +68,7 @@ export const baseConfig: Partial<Config> = {
     ArrayFields,
     OnDemandForm,
     OnDemandOutsideForm,
+    LexicalCustomCell,
   ],
   globals: [TabsWithRichText],
 

test/lexical/collections/Lexical/e2e/main/e2e.spec.ts

@@ -28,7 +28,7 @@ import { reInitializeDB } from '../../../../../__helpers/shared/clearAndSeed/reI
 import { initPayloadE2ENoConfig } from '../../../../../__helpers/shared/initPayloadE2ENoConfig.js'
 import { RESTClient } from '../../../../../__helpers/shared/rest.js'
 import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../../../../../playwright.config.js'
-import { lexicalFieldsSlug } from '../../../../slugs.js'
+import { lexicalCustomCellSlug, lexicalFieldsSlug } from '../../../../slugs.js'
 import { lexicalDocData } from '../../data.js'
 
 const filename = fileURLToPath(import.meta.url)
@@ -1813,4 +1813,40 @@ describe('lexicalMain', () => {
     // before and after decoratorNodes and paragraphs. Tested manually,
     // but these are complex cases.
   })
+
+  test('should render custom Cell component for richText fields in list view', async () => {
+    const doc = await payload.create({
+      collection: lexicalCustomCellSlug,
+      data: {
+        title: 'Test Custom Cell',
+        richTextField: {
+          root: {
+            children: [
+              {
+                children: [{ text: 'Hello', type: 'text', version: 1 }],
+                direction: null,
+                format: '',
+                indent: 0,
+                type: 'paragraph',
+                version: 1,
+              },
+            ],
+            direction: null,
+            format: '',
+            indent: 0,
+            type: 'root',
+            version: 1,
+          },
+        },
+      },
+    })
+
+    const url = new AdminUrlUtil(serverURL, lexicalCustomCellSlug)
+    await page.goto(url.list)
+
+    const customCells = page.locator('#custom-richtext-cell')
+    await expect(customCells.first()).toBeVisible()
+    // Both title (text) and richTextField (richText) should render the custom cell
+    await expect(customCells).toHaveCount(2)
+  })
 })

test/lexical/collections/LexicalCustomCell/index.ts

@@ -0,0 +1,35 @@
+import type { CollectionConfig } from 'payload'
+
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+
+import { lexicalCustomCellSlug } from '../../slugs.js'
+
+export const LexicalCustomCell: CollectionConfig = {
+  slug: lexicalCustomCellSlug,
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['title', 'richTextField', 'createdAt'],
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+      admin: {
+        components: {
+          Cell: './components/CustomCell.js#CustomCell',
+        },
+      },
+    },
+    {
+      name: 'richTextField',
+      type: 'richText',
+      editor: lexicalEditor(),
+      admin: {
+        components: {
+          Cell: './components/CustomCell.js#CustomCell',
+        },
+      },
+    },
+  ],
+}

test/lexical/components/CustomCell.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import type { DefaultCellComponentProps } from 'payload'
+
+import React from 'react'
+
+export const CustomCell: React.FC<DefaultCellComponentProps> = (props) => {
+  return (
+    <span id="custom-richtext-cell">{`Custom cell: ${props?.cellData ? 'has data' : 'no data'}`}</span>
+  )
+}

test/lexical/payload-types.ts

@@ -107,6 +107,7 @@ export interface Config {
     'array-fields': ArrayField;
     OnDemandForm: OnDemandForm;
     OnDemandOutsideForm: OnDemandOutsideForm;
+    'lexical-custom-cell': LexicalCustomCell;
     'payload-kv': PayloadKv;
     users: User;
     'payload-locked-documents': PayloadLockedDocument;
@@ -136,6 +137,7 @@ export interface Config {
     'array-fields': ArrayFieldsSelect<false> | ArrayFieldsSelect<true>;
     OnDemandForm: OnDemandFormSelect<false> | OnDemandFormSelect<true>;
     OnDemandOutsideForm: OnDemandOutsideFormSelect<false> | OnDemandOutsideFormSelect<true>;
+    'lexical-custom-cell': LexicalCustomCellSelect<false> | LexicalCustomCellSelect<true>;
     'payload-kv': PayloadKvSelect<false> | PayloadKvSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
@@ -1086,6 +1088,31 @@ export interface OnDemandOutsideForm {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "lexical-custom-cell".
+ */
+export interface LexicalCustomCell {
+  id: string;
+  title: string;
+  richTextField?: {
+    root: {
+      type: string;
+      children: {
+        type: any;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  } | null;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-kv".
@@ -1219,6 +1246,10 @@ export interface PayloadLockedDocument {
         relationTo: 'OnDemandOutsideForm';
         value: string | OnDemandOutsideForm;
       } | null)
+    | ({
+        relationTo: 'lexical-custom-cell';
+        value: string | LexicalCustomCell;
+      } | null)
     | ({
         relationTo: 'users';
         value: string | User;
@@ -1676,6 +1707,16 @@ export interface OnDemandOutsideFormSelect<T extends boolean = true> {
   updatedAt?: T;
   createdAt?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "lexical-custom-cell_select".
+ */
+export interface LexicalCustomCellSelect<T extends boolean = true> {
+  title?: T;
+  richTextField?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-kv_select".

test/lexical/slugs.ts

@@ -21,6 +21,7 @@ export const uploads2Slug = 'uploads2'
 
 export const arrayFieldsSlug = 'array-fields'
 
+export const lexicalCustomCellSlug = 'lexical-custom-cell'
 export const lexicalNestedBlocksSlug = 'lexical-nested-blocks'
 
 export const collectionSlugs = [
@@ -33,4 +34,6 @@ export const collectionSlugs = [
   textFieldsSlug,
   uploadsSlug,
   lexicalListsFeatureSlug,
+  lexicalCustomCellSlug,
+  lexicalNestedBlocksSlug,
 ]