fix(richtext-*): field errors and descriptions were not displayed (#9824)

Author: AlessioGr

packages/richtext-lexical/src/field/Field.tsx

@@ -2,18 +2,26 @@
 import type { EditorState, SerializedEditorState } from 'lexical'
 import type { Validate } from 'payload'
 
-import { FieldLabel, useEditDepth, useField, withCondition } from '@payloadcms/ui'
+import {
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  RenderCustomComponent,
+  useEditDepth,
+  useField,
+  withCondition,
+} from '@payloadcms/ui'
 import { mergeFieldStyles } from '@payloadcms/ui/shared'
 import React, { useCallback, useMemo } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
 import type { SanitizedClientEditorConfig } from '../lexical/config/types.js'
 import type { LexicalRichTextFieldProps } from '../types.js'
 
-import { LexicalProvider } from '../lexical/LexicalProvider.js'
 import '../lexical/theme/EditorTheme.scss'
 import './bundled.css'
 import './index.scss'
+import { LexicalProvider } from '../lexical/LexicalProvider.js'
 
 const baseClass = 'rich-text-lexical'
 
@@ -27,7 +35,7 @@ const RichTextComponent: React.FC<
     field,
     field: {
       name,
-      admin: { className, readOnly: readOnlyFromAdmin } = {},
+      admin: { className, description, readOnly: readOnlyFromAdmin } = {},
       label,
       localized,
       required,
@@ -95,7 +103,10 @@ const RichTextComponent: React.FC<
 
   return (
     <div className={classes} key={pathWithEditDepth} style={styles}>
-      {Error}
+      <RenderCustomComponent
+        CustomComponent={Error}
+        Fallback={<FieldError path={path} showError={showError} />}
+      />
       {Label || <FieldLabel label={label} localized={localized} required={required} />}
       <div className={`${baseClass}__wrap`}>
         <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>
@@ -112,6 +123,10 @@ const RichTextComponent: React.FC<
           {AfterInput}
         </ErrorBoundary>
         {Description}
+        <RenderCustomComponent
+          CustomComponent={Description}
+          Fallback={<FieldDescription description={description} path={path} />}
+        />
       </div>
     </div>
   )

packages/richtext-slate/src/field/RichText.tsx

@@ -6,7 +6,16 @@ import type { HistoryEditor } from 'slate-history'
 import type { ReactEditor } from 'slate-react'
 
 import { getTranslation } from '@payloadcms/translations'
-import { FieldLabel, useEditDepth, useField, useTranslation, withCondition } from '@payloadcms/ui'
+import {
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  RenderCustomComponent,
+  useEditDepth,
+  useField,
+  useTranslation,
+  withCondition,
+} from '@payloadcms/ui'
 import { mergeFieldStyles } from '@payloadcms/ui/shared'
 import { isHotkey } from 'is-hotkey'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
@@ -46,7 +55,7 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
     field,
     field: {
       name,
-      admin: { className, placeholder, readOnly: readOnlyFromAdmin } = {},
+      admin: { className, description, placeholder, readOnly: readOnlyFromAdmin } = {},
       label,
       required,
     },
@@ -307,7 +316,10 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
     <div className={classes} style={styles}>
       {Label || <FieldLabel label={label} required={required} />}
       <div className={`${baseClass}__wrap`}>
-        {Error}
+        <RenderCustomComponent
+          CustomComponent={Error}
+          Fallback={<FieldError path={path} showError={showError} />}
+        />
         <Slate
           editor={editor}
           key={JSON.stringify({ initialValue, path })} // makes sure slate is completely re-rendered when initialValue changes, bypassing the slate-internal value memoization. That way, external changes to the form will update the editor
@@ -438,7 +450,10 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
             </div>
           </div>
         </Slate>
-        {Description}
+        <RenderCustomComponent
+          CustomComponent={Description}
+          Fallback={<FieldDescription description={description} path={path} />}
+        />
       </div>
     </div>
   )