properly shorten links in quote embeds (#2570)
* properly shorten links in quote embeds * lintzio/stable
parent
920d48849e
commit
eb07b983bd
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue