fix(richtext-lexical): error in admin panel when setting a richtext field in useAsTitle (#11707)

If the `useAsTitle` property is defined referencing a richtext field,
the admin panel throws errors in several places.

I noticed this in the email builder plugin, where we're making the
subject field (which is the title) a single-paragraph richtext field
instead of a text field for technical reasons.

In this PR, for the lexical richtext case, I'm converting the first
child of the RootNode (usually a paragraph or heading) to plain text.

Additionally, I am verifying that if the resulting title is not of type
string, fallback to "untitled" so that this does not happen again in the
future (perhaps with slate, or with other fields).

Author: GermanJablo

packages/ui/src/elements/Autosave/index.tsx

@@ -22,7 +22,7 @@ import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
 import './index.scss'
 import { useTranslation } from '../../providers/Translation/index.js'
-import { formatTimeToNow } from '../../utilities/formatDate.js'
+import { formatTimeToNow } from '../../utilities/formatDocTitle/formatDateTitle.js'
 import { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'
 import { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'
 

packages/ui/src/elements/DocumentControls/index.tsx

@@ -16,7 +16,7 @@ import { useFormInitializing, useFormProcessing } from '../../forms/Form/context
 import { useConfig } from '../../providers/Config/index.js'
 import { useEditDepth } from '../../providers/EditDepth/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
-import { formatDate } from '../../utilities/formatDate.js'
+import { formatDate } from '../../utilities/formatDocTitle/formatDateTitle.js'
 import { Autosave } from '../Autosave/index.js'
 import { Button } from '../Button/index.js'
 import { CopyLocaleData } from '../CopyLocaleData/index.js'

packages/ui/src/elements/PublishButton/ScheduleDrawer/buildUpcomingColumns.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 
 import type { UpcomingEvent } from './types.js'
 
-import { formatDate } from '../../../utilities/formatDate.js'
+import { formatDate } from '../../../utilities/formatDocTitle/formatDateTitle.js'
 import { Button } from '../../Button/index.js'
 import { Pill } from '../../Pill/index.js'
 

packages/ui/src/elements/Table/DefaultCell/fields/Date/index.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 
 import { useConfig } from '../../../../../providers/Config/index.js'
 import { useTranslation } from '../../../../../providers/Translation/index.js'
-import { formatDate } from '../../../../../utilities/formatDate.js'
+import { formatDate } from '../../../../../utilities/formatDocTitle/formatDateTitle.js'
 
 export const DateCell: React.FC<DefaultCellComponentProps<DateFieldClient>> = ({
   cellData,

packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx

@@ -13,7 +13,7 @@ import { useIntersect } from '../../../../../hooks/useIntersect.js'
 import { useConfig } from '../../../../../providers/Config/index.js'
 import { useTranslation } from '../../../../../providers/Translation/index.js'
 import { canUseDOM } from '../../../../../utilities/canUseDOM.js'
-import { formatDocTitle } from '../../../../../utilities/formatDocTitle.js'
+import { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js'
 import { useListRelationships } from '../../../RelationshipProvider/index.js'
 import { FileCell } from '../File/index.js'
 import './index.scss'

packages/ui/src/elements/ThumbnailCard/index.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 
 import { useConfig } from '../../providers/Config/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
-import { formatDocTitle } from '../../utilities/formatDocTitle.js'
+import { formatDocTitle } from '../../utilities/formatDocTitle/index.js'
 import './index.scss'
 
 export type ThumbnailCardProps = {

packages/ui/src/exports/shared/index.ts

@@ -12,8 +12,8 @@ export { abortAndIgnore, handleAbortRef } from '../../utilities/abortAndIgnore.j
 export { requests } from '../../utilities/api.js'
 export { findLocaleFromCode } from '../../utilities/findLocaleFromCode.js'
 export { formatAdminURL } from '../../utilities/formatAdminURL.js'
-export { formatDate } from '../../utilities/formatDate.js'
-export { formatDocTitle } from '../../utilities/formatDocTitle.js'
+export { formatDate } from '../../utilities/formatDocTitle/formatDateTitle.js'
+export { formatDocTitle } from '../../utilities/formatDocTitle/index.js'
 export {
   type EntityToGroup,
   EntityType,

packages/ui/src/fields/Relationship/optionsReducer.ts

@@ -3,7 +3,7 @@ import { getTranslation } from '@payloadcms/translations'
 
 import type { Action, Option, OptionGroup } from './types.js'
 
-import { formatDocTitle } from '../../utilities/formatDocTitle.js'
+import { formatDocTitle } from '../../utilities/formatDocTitle/index.js'
 
 const reduceToIDs = (options) =>
   options.reduce((ids, option) => {

packages/ui/src/providers/DocumentInfo/index.tsx

@@ -2,21 +2,13 @@
 import type { ClientUser, DocumentPreferences, SanitizedDocumentPermissions } from 'payload'
 
 import * as qs from 'qs-esm'
-import React, {
-  createContext,
-  use,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import type { DocumentInfoContext, DocumentInfoProps } from './types.js'
 
 import { useAuth } from '../../providers/Auth/index.js'
 import { requests } from '../../utilities/api.js'
-import { formatDocTitle } from '../../utilities/formatDocTitle.js'
+import { formatDocTitle } from '../../utilities/formatDocTitle/index.js'
 import { useConfig } from '../Config/index.js'
 import { useLocale, useLocaleLoading } from '../Locale/index.js'
 import { usePreferences } from '../Preferences/index.js'

packages/ui/src/utilities/formatDate.ts packages/ui/src/utilities/formatDocTitle/formatDateTitle.ts

@@ -0,0 +1,28 @@
+type SerializedLexicalEditor = {
+  root: {
+    children: Array<{ children?: Array<{ type: string }>; type: string }>
+  }
+}
+
+export function isSerializedLexicalEditor(value: unknown): value is SerializedLexicalEditor {
+  return typeof value === 'object' && 'root' in value
+}
+
+export function formatLexicalDocTitle(
+  editorState: Array<{ children?: Array<{ type: string }>; type: string }>,
+  textContent: string,
+): string {
+  for (const node of editorState) {
+    if ('text' in node && node.text) {
+      textContent += node.text as string
+    } else {
+      if (!('children' in node)) {
+        textContent += `[${node.type}]`
+      }
+    }
+    if ('children' in node && node.children) {
+      textContent += formatLexicalDocTitle(node.children as Array<{ type: string }>, textContent)
+    }
+  }
+  return textContent
+}

packages/ui/src/utilities/formatDocTitle/formatLexicalDocTitle.ts

@@ -8,7 +8,8 @@ import type {
 
 import { getTranslation } from '@payloadcms/translations'
 
-import { formatDate } from '../utilities/formatDate.js'
+import { formatDate } from './formatDateTitle.js'
+import { formatLexicalDocTitle, isSerializedLexicalEditor } from './formatLexicalDocTitle.js'
 
 export const formatDocTitle = ({
   collectionConfig,
@@ -21,7 +22,7 @@ export const formatDocTitle = ({
   collectionConfig?: ClientCollectionConfig
   data: TypeWithID
   dateFormat: SanitizedConfig['admin']['dateFormat']
-  fallback?: string
+  fallback?: object | string
   globalConfig?: ClientGlobalConfig
   i18n: I18n<any, any>
 }): string => {
@@ -54,8 +55,16 @@ export const formatDocTitle = ({
     title = getTranslation(globalConfig?.label, i18n) || globalConfig?.slug
   }
 
+  // richtext lexical case. We convert the first child of root to plain text
+  if (isSerializedLexicalEditor(title)) {
+    title = formatLexicalDocTitle(title.root.children?.[0]?.children || [], '')
+  }
+  if (!title && isSerializedLexicalEditor(fallback)) {
+    title = formatLexicalDocTitle(fallback.root.children?.[0]?.children || [], '')
+  }
+
   if (!title) {
-    title = fallback || `[${i18n.t('general:untitled')}]`
+    title = typeof fallback === 'string' ? fallback : `[${i18n.t('general:untitled')}]`
   }
 
   return title

packages/ui/src/utilities/formatDocTitle.ts packages/ui/src/utilities/formatDocTitle/index.ts

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react'
 import { useFormFields } from '../../../forms/Form/context.js'
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'
 import { useTranslation } from '../../../providers/Translation/index.js'
-import { formatDocTitle } from '../../../utilities/formatDocTitle.js'
+import { formatDocTitle } from '../../../utilities/formatDocTitle/index.js'
 
 export const SetDocumentTitle: React.FC<{
   collectionConfig?: ClientCollectionConfig