Use RichText for sp description (#4979)

* Use RichText for sp description

* `isRecord` above

---------

Co-authored-by: Hailey <me@haileyok.com>

1 files changed, 13 insertions, 8 deletions

diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx
index 643a72211..7dda45f96 100644
--- a/src/screens/StarterPack/StarterPackLandingScreen.tsx
+++ b/src/screens/StarterPack/StarterPackLandingScreen.tsx
@@ -31,10 +31,12 @@ import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import * as FeedCard from '#/components/FeedCard'
+import {useRichText} from '#/components/hooks/useRichText'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Default as ProfileCard} from '#/components/ProfileCard'
 import * as Prompt from '#/components/Prompt'
+import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
@@ -82,9 +84,15 @@ export function LandingScreen({
     return <ListMaybePlaceholder isLoading={true} />
   }
 
+  // Just for types, this cannot be hit
+  if (!AppBskyGraphStarterpack.isRecord(starterPack.record)) {
+    return null
+  }
+
   return (
     <LandingScreenLoaded
       starterPack={starterPack}
+      starterPackRecord={starterPack.record}
       setScreenState={setScreenState}
       moderationOpts={moderationOpts}
     />
@@ -93,22 +101,25 @@ export function LandingScreen({
 
 function LandingScreenLoaded({
   starterPack,
+  starterPackRecord: record,
   setScreenState,
   // TODO apply this to profile card
 
   moderationOpts,
 }: {
   starterPack: AppBskyGraphDefs.StarterPackView
+  starterPackRecord: AppBskyGraphStarterpack.Record
   setScreenState: (state: LoggedOutScreenState) => void
   moderationOpts: ModerationOpts
 }) {
-  const {record, creator, listItemsSample, feeds} = starterPack
+  const {creator, listItemsSample, feeds} = starterPack
   const {_} = useLingui()
   const t = useTheme()
   const activeStarterPack = useActiveStarterPack()
   const setActiveStarterPack = useSetActiveStarterPack()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const androidDialogControl = useDialogControl()
+  const [descriptionRt] = useRichText(record.description || '')
 
   const [appClipOverlayVisible, setAppClipOverlayVisible] =
     React.useState(false)
@@ -147,10 +158,6 @@ function LandingScreenLoaded({
     }
   }
 
-  if (!AppBskyGraphStarterpack.isRecord(record)) {
-    return null
-  }
-
   return (
     <CenteredView style={a.flex_1}>
       <ScrollView
@@ -192,9 +199,7 @@ function LandingScreenLoaded({
         </LinearGradientBackground>
         <View style={[a.gap_2xl, a.mx_lg, a.my_2xl]}>
           {record.description ? (
-            <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
-              {record.description}
-            </Text>
+            <RichText value={descriptionRt} style={[a.text_md]} />
           ) : null}
           <View style={[a.gap_sm]}>
             <Button