Fix links in profiles (#2178)

* Resolve links in profile bios

* Improve solution

* On mobile, dont disable pointer events on the bio richtext

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

2 files changed, 35 insertions, 11 deletions

diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 6975e3964..7d52216b0 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -51,7 +51,7 @@ import {sanitizeHandle} from 'lib/strings/handles'
 import {shareUrl} from 'lib/sharing'
 import {s, colors} from 'lib/styles'
 import {logger} from '#/logger'
-import {useSession} from '#/state/session'
+import {useSession, getAgent} from '#/state/session'
 import {Shadow} from '#/state/cache/types'
 import {useRequireAuth} from '#/state/session'
 import {LabelInfo} from '../util/moderation/LabelInfo'
@@ -127,18 +127,42 @@ let ProfileHeaderLoaded = ({
   const invalidHandle = isInvalidHandle(profile.handle)
   const {isDesktop} = useWebMediaQueries()
   const [showSuggestedFollows, setShowSuggestedFollows] = React.useState(false)
-  const descriptionRT = React.useMemo(
-    () =>
-      profile.description
-        ? new RichTextAPI({text: profile.description})
-        : undefined,
-    [profile],
-  )
   const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(profile)
   const [queueMute, queueUnmute] = useProfileMuteMutationQueue(profile)
   const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
   const queryClient = useQueryClient()
 
+  /*
+   * BEGIN handle bio facet resolution
+   */
+  // should be undefined on first render to trigger a resolution
+  const prevProfileDescription = React.useRef<string | undefined>()
+  const [descriptionRT, setDescriptionRT] = React.useState<
+    RichTextAPI | undefined
+  >(
+    profile.description
+      ? new RichTextAPI({text: profile.description})
+      : undefined,
+  )
+  React.useEffect(() => {
+    async function resolveRTFacets() {
+      // new each time
+      const rt = new RichTextAPI({text: profile.description || ''})
+      await rt.detectFacets(getAgent())
+      // replace existing RT instance
+      setDescriptionRT(rt)
+    }
+
+    if (profile.description !== prevProfileDescription.current) {
+      // update prev immediately
+      prevProfileDescription.current = profile.description
+      resolveRTFacets()
+    }
+  }, [profile.description, setDescriptionRT])
+  /*
+   * END handle bio facet resolution
+   */
+
   const invalidateProfileQuery = React.useCallback(() => {
     queryClient.invalidateQueries({
       queryKey: profileQueryKey(profile.did),
@@ -608,7 +632,7 @@ let ProfileHeaderLoaded = ({
               </Text>
             </View>
             {descriptionRT && !moderation.profile.blur ? (
-              <View pointerEvents="none">
+              <View pointerEvents={isNative ? 'auto' : 'none'}>
                 <RichText
                   testID="profileHeaderDescription"
                   style={[styles.description, pal.text]}
diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx
index b414baed9..99062e848 100644
--- a/src/view/com/util/text/RichText.tsx
+++ b/src/view/com/util/text/RichText.tsx
@@ -77,7 +77,7 @@ export function RichText({
           type={type}
           text={segment.text}
           href={`/profile/${mention.did}`}
-          style={[style, lineHeightStyle, pal.link]}
+          style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
           dataSet={WORD_WRAP}
         />,
       )
@@ -88,7 +88,7 @@ export function RichText({
           type={type}
           text={toShortUrl(segment.text)}
           href={link.uri}
-          style={[style, lineHeightStyle, pal.link]}
+          style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
           dataSet={WORD_WRAP}
           warnOnMismatchingLabel
         />,