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

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>
   )