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'