Add type casting for RichText data props with DefaultTypedEditorState

apps/backend/src/blocks/Banner/Component.tsx

@@ -3,6 +3,7 @@ import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
 import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
 
 type Props = {
   className?: string
@@ -19,7 +20,11 @@ export const BannerBlock: React.FC<Props> = ({ className, content, style }) => {
           'border-warning bg-warning/30': style === 'warning',
         })}
       >
-        <RichText data={content} enableGutter={false} enableProse={false} />
+        <RichText
+          data={content as DefaultTypedEditorState}
+          enableGutter={false}
+          enableProse={false}
+        />
       </div>
     </div>
   )

apps/backend/src/blocks/CallToAction/Component.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import type { CallToActionBlock as CTABlockProps } from '@/payload-types'
 
 import RichText from '@/components/RichText'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
 import { CMSLink } from '@/components/Link'
 
 export const CallToActionBlock: React.FC<CTABlockProps> = ({ links, richText }) => {
@@ -10,7 +11,13 @@ export const CallToActionBlock: React.FC<CTABlockProps> = ({ links, richText })
     <div className="container">
       <div className="bg-card rounded border-border border p-4 flex flex-col gap-8 md:flex-row md:justify-between md:items-center">
         <div className="max-w-[48rem] flex items-center">
-          {richText && <RichText className="mb-0" data={richText} enableGutter={false} />}
+          {richText && (
+            <RichText
+              className="mb-0"
+              data={richText as DefaultTypedEditorState}
+              enableGutter={false}
+            />
+          )}
         </div>
         <div className="flex flex-col gap-8">
           {(links || []).map(({ link }, i) => {

apps/backend/src/blocks/Content/Component.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
 
 import type { ContentBlock as ContentBlockProps } from '@/payload-types'
 
@@ -31,7 +32,9 @@ export const ContentBlock: React.FC<ContentBlockProps> = (props) => {
                 })}
                 key={index}
               >
-                {richText && <RichText data={richText} enableGutter={false} />}
+                {richText && (
+                  <RichText data={richText as DefaultTypedEditorState} enableGutter={false} />
+                )}
 
                 {enableLink && <CMSLink {...link} />}
               </div>

apps/backend/src/blocks/Form/Component.tsx

@@ -121,7 +121,7 @@ export const FormBlock: React.FC<
       <div className="p-4 lg:p-6 border border-border rounded-[0.8rem]">
         <FormProvider {...formMethods}>
           {!isLoading && hasSubmitted && confirmationType === 'message' && (
-            <RichText data={confirmationMessage} />
+            <RichText data={confirmationMessage as DefaultTypedEditorState} />
           )}
           {isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
           {error && <div>{`${error.status || '500'}: ${error.message || ''}`}</div>}

apps/backend/src/blocks/MediaBlock/Component.tsx

@@ -3,6 +3,7 @@ import type { StaticImageData } from 'next/image'
 import { cn } from '@/utilities/ui'
 import React from 'react'
 import RichText from '@/components/RichText'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
 
 import type { MediaBlock as MediaBlockProps } from '@/payload-types'
 
@@ -59,7 +60,7 @@ export const MediaBlock: React.FC<Props> = (props) => {
             captionClassName,
           )}
         >
-          <RichText data={caption} enableGutter={false} />
+          <RichText data={caption as DefaultTypedEditorState} enableGutter={false} />
         </div>
       )}
     </div>

apps/backend/src/heros/HighImpact/index.tsx

@@ -7,6 +7,7 @@ import type { Page } from '@/payload-types'
 import { CMSLink } from '@/components/Link'
 import { Media } from '@/components/Media'
 import RichText from '@/components/RichText'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
 
 export const HighImpactHero: React.FC<Page['hero']> = ({ links, media, richText }) => {
   const { setHeaderTheme } = useHeaderTheme()
@@ -22,7 +23,13 @@ export const HighImpactHero: React.FC<Page['hero']> = ({ links, media, richText
     >
       <div className="container mb-8 z-10 relative flex items-center justify-center">
         <div className="max-w-[36.5rem] md:text-center">
-          {richText && <RichText className="mb-6" data={richText} enableGutter={false} />}
+          {richText && (
+            <RichText
+              className="mb-6"
+              data={richText as DefaultTypedEditorState}
+              enableGutter={false}
+            />
+          )}
           {Array.isArray(links) && links.length > 0 && (
             <ul className="flex md:justify-center gap-4">
               {links.map(({ link }, i) => {

apps/backend/src/heros/LowImpact/index.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import type { Page } from '@/payload-types'
 
 import RichText from '@/components/RichText'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
 
 type LowImpactHeroType =
   | {
@@ -18,7 +19,10 @@ export const LowImpactHero: React.FC<LowImpactHeroType> = ({ children, richText
   return (
     <div className="container mt-16">
       <div className="max-w-[48rem]">
-        {children || (richText && <RichText data={richText} enableGutter={false} />)}
+        {children ||
+          (richText && (
+            <RichText data={richText as DefaultTypedEditorState} enableGutter={false} />
+          ))}
       </div>
     </div>
   )

apps/backend/src/heros/MediumImpact/index.tsx

@@ -5,12 +5,19 @@ import type { Page } from '@/payload-types'
 import { CMSLink } from '@/components/Link'
 import { Media } from '@/components/Media'
 import RichText from '@/components/RichText'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
 
 export const MediumImpactHero: React.FC<Page['hero']> = ({ links, media, richText }) => {
   return (
     <div className="">
       <div className="container mb-8">
-        {richText && <RichText className="mb-6" data={richText} enableGutter={false} />}
+        {richText && (
+          <RichText
+            className="mb-6"
+            data={richText as DefaultTypedEditorState}
+            enableGutter={false}
+          />
+        )}
 
         {Array.isArray(links) && links.length > 0 && (
           <ul className="flex gap-4">
@@ -35,7 +42,7 @@ export const MediumImpactHero: React.FC<Page['hero']> = ({ links, media, richTex
             />
             {media?.caption && (
               <div className="mt-3">
-                <RichText data={media.caption} enableGutter={false} />
+                <RichText data={media.caption as DefaultTypedEditorState} enableGutter={false} />
               </div>
             )}
           </div>