From fc85901a46af3a37ca3c15ef4d78643a40ddc18c Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 11 Dec 2023 17:34:25 -0600 Subject: 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 --- src/view/com/profile/ProfileHeader.tsx | 42 ++++++++++++++++++++++++++-------- src/view/com/util/text/RichText.tsx | 4 ++-- 2 files changed, 35 insertions(+), 11 deletions(-) (limited to 'src') 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() + 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 = ({ {descriptionRT && !moderation.profile.blur ? ( - + , ) @@ -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 />, -- cgit 1.4.1