properly shorten links in quote embeds (#2570)

* properly shorten links in quote embeds

* lint
zio/stable
Hailey 2024-01-19 16:15:07 -08:00 committed by GitHub
parent 920d48849e
commit eb07b983bd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 41 additions and 20 deletions

View File

@ -1,5 +1,5 @@
import React from 'react'
import {AppBskyEmbedRecord} from '@atproto/api'
import {AppBskyEmbedRecord, AppBskyRichtextFacet} from '@atproto/api'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
export interface ComposerOptsPostRef {
@ -17,6 +17,7 @@ export interface ComposerOptsQuote {
uri: string
cid: string
text: string
facets?: AppBskyRichtextFacet.Main[]
indexedAt: string
author: {
did: string

View File

@ -7,6 +7,7 @@ import {
AppBskyEmbedRecordWithMedia,
ModerationUI,
AppBskyEmbedExternal,
RichText as RichTextAPI,
} from '@atproto/api'
import {AtUri} from '@atproto/api'
import {PostMeta} from '../PostMeta'
@ -19,6 +20,7 @@ import {PostAlerts} from '../moderation/PostAlerts'
import {makeProfileLink} from 'lib/routes/links'
import {InfoCircleIcon} from 'lib/icons'
import {Trans} from '@lingui/macro'
import {RichText} from 'view/com/util/text/RichText'
export function MaybeQuoteEmbed({
embed,
@ -43,6 +45,7 @@ export function MaybeQuoteEmbed({
uri: embed.record.uri,
indexedAt: embed.record.indexedAt,
text: embed.record.value.text,
facets: embed.record.value.facets,
embeds: embed.record.embeds,
}}
moderation={moderation}
@ -84,9 +87,12 @@ export function QuoteEmbed({
const itemUrip = new AtUri(quote.uri)
const itemHref = makeProfileLink(quote.author, 'post', itemUrip.rkey)
const itemTitle = `Post by ${quote.author.handle}`
const isEmpty = React.useMemo(
() => quote.text.trim().length === 0,
[quote.text],
const richText = React.useMemo(
() =>
quote.text.trim()
? new RichTextAPI({text: quote.text, facets: quote.facets})
: undefined,
[quote.text, quote.facets],
)
const embed = React.useMemo(() => {
const e = quote.embeds?.[0]
@ -117,10 +123,14 @@ export function QuoteEmbed({
{moderation ? (
<PostAlerts moderation={moderation} style={styles.alert} />
) : null}
{!isEmpty ? (
<Text type="post-text" style={pal.text} numberOfLines={20}>
{quote.text}
</Text>
{richText ? (
<RichText
richText={richText}
type="post-text"
style={pal.text}
numberOfLines={20}
noLinks
/>
) : null}
{embed && <PostEmbeds embed={embed} moderation={{}} />}
</Link>

View File

@ -17,6 +17,7 @@ export function RichText({
lineHeight = 1.2,
style,
numberOfLines,
noLinks,
}: {
testID?: string
type?: TypographyVariant
@ -24,6 +25,7 @@ export function RichText({
lineHeight?: number
style?: StyleProp<TextStyle>
numberOfLines?: number
noLinks?: boolean
}) {
const theme = useTheme()
const pal = usePalette('default')
@ -70,7 +72,11 @@ export function RichText({
for (const segment of richText.segments()) {
const link = segment.link
const mention = segment.mention
if (mention && AppBskyRichtextFacet.validateMention(mention).success) {
if (
!noLinks &&
mention &&
AppBskyRichtextFacet.validateMention(mention).success
) {
els.push(
<TextLink
key={key}
@ -82,17 +88,21 @@ export function RichText({
/>,
)
} else if (link && AppBskyRichtextFacet.validateLink(link).success) {
els.push(
<TextLink
key={key}
type={type}
text={toShortUrl(segment.text)}
href={link.uri}
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
dataSet={WORD_WRAP}
warnOnMismatchingLabel
/>,
)
if (noLinks) {
els.push(toShortUrl(segment.text))
} else {
els.push(
<TextLink
key={key}
type={type}
text={toShortUrl(segment.text)}
href={link.uri}
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
dataSet={WORD_WRAP}
warnOnMismatchingLabel
/>,
)
}
} else {
els.push(segment.text)
}