add rich text facets to description (#4619)

src/screens/StarterPack/StarterPackScreen.tsx

@@ -7,6 +7,7 @@ import {
   AppBskyGraphStarterpack,
   AtUri,
   ModerationOpts,
+  RichText as RichTextAPI,
 } from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
@@ -52,6 +53,7 @@ import {Loader} from '#/components/Loader'
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
+import {RichText} from '#/components/RichText'
 import {FeedsList} from '#/components/StarterPack/Main/FeedsList'
 import {ProfilesList} from '#/components/StarterPack/Main/ProfilesList'
 import {QrCodeDialog} from '#/components/StarterPack/QrCodeDialog'
@@ -280,6 +282,13 @@ function Header({
     return null
   }
 
+  const richText = record.description
+    ? new RichTextAPI({
+        text: record.description,
+        facets: record.descriptionFacets,
+      })
+    : undefined
+
   return (
     <>
       <ProfileSubpageHeader
@@ -324,12 +333,10 @@ function Header({
           />
         </View>
       </ProfileSubpageHeader>
-      {record.description || joinedAllTimeCount >= 25 ? (
+      {richText || joinedAllTimeCount >= 25 ? (
         <View style={[a.px_lg, a.pt_md, a.pb_sm, a.gap_md]}>
-          {record.description ? (
+          {richText ? (
-            <Text style={[a.text_md, a.leading_snug]}>
+            <RichText value={richText} style={[a.text_md, a.leading_snug]} />
-              {record.description}
-            </Text>
           ) : null}
           {joinedAllTimeCount >= 25 ? (
             <View style={[a.flex_row, a.align_center, a.gap_sm]}>

src/screens/StarterPack/Wizard/index.tsx

@@ -245,7 +245,6 @@ function WizardInner({
       editStarterPack({
         name: state.name?.trim() || getDefaultName(),
         description: state.description?.trim(),
-        descriptionFacets: [],
         profiles: state.profiles,
         feeds: state.feeds,
         currentStarterPack: currentStarterPack,
@@ -255,7 +254,6 @@ function WizardInner({
       createStarterPack({
         name: state.name?.trim() || getDefaultName(),
         description: state.description?.trim(),
-        descriptionFacets: [],
         profiles: state.profiles,
         feeds: state.feeds,
       })

src/state/queries/starter-packs.ts

@@ -4,8 +4,10 @@ import {
   AppBskyGraphDefs,
   AppBskyGraphGetStarterPack,
   AppBskyGraphStarterpack,
+  AppBskyRichtextFacet,
   AtUri,
   BskyAgent,
+  RichText,
 } from '@atproto/api'
 import {StarterPackView} from '@atproto/api/dist/client/types/app/bsky/graph/defs'
 import {
@@ -80,7 +82,6 @@ export async function invalidateStarterPack({
 interface UseCreateStarterPackMutationParams {
   name: string
   description?: string
-  descriptionFacets: []
   profiles: AppBskyActorDefs.ProfileViewBasic[]
   feeds?: AppBskyFeedDefs.GeneratorView[]
 }
@@ -100,16 +101,33 @@ export function useCreateStarterPackMutation({
     Error,
     UseCreateStarterPackMutationParams
   >({
-    mutationFn: async params => {
+    mutationFn: async ({name, description, feeds, profiles}) => {
+      let descriptionFacets: AppBskyRichtextFacet.Main[] | undefined
+      if (description) {
+        const rt = new RichText({text: description})
+        await rt.detectFacets(agent)
+        descriptionFacets = rt.facets
+      }
+
       let listRes
-      listRes = await createStarterPackList({...params, agent})
+      listRes = await createStarterPackList({
+        name,
+        description,
+        profiles,
+        descriptionFacets,
+        agent,
+      })
+
       return await agent.app.bsky.graph.starterpack.create(
         {
           repo: agent.session?.did,
         },
         {
-          ...params,
+          name,
+          description,
+          descriptionFacets,
           list: listRes?.uri,
+          feeds,
           createdAt: new Date().toISOString(),
         },
       )
@@ -148,16 +166,20 @@ export function useEditStarterPackMutation({
       currentListItems: AppBskyGraphDefs.ListItemView[]
     }
   >({
-    mutationFn: async params => {
+    mutationFn: async ({
-      const {
+      name,
-        name,
+      description,
-        description,
+      feeds,
-        descriptionFacets,
+      profiles,
-        feeds,
+      currentStarterPack,
-        profiles,
+      currentListItems,
-        currentStarterPack,
+    }) => {
-        currentListItems,
+      let descriptionFacets: AppBskyRichtextFacet.Main[] | undefined
-      } = params
+      if (description) {
+        const rt = new RichText({text: description})
+        await rt.detectFacets(agent)
+        descriptionFacets = rt.facets
+      }
 
       if (!AppBskyGraphStarterpack.isRecord(currentStarterPack.record)) {
         throw new Error('Invalid starter pack')