Add type casting for RichText data props with DefaultTypedEditorState

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>