jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
properly shorten links in quote embeds (#2570)
* properly shorten links in quote embeds
* lint
+41
-20
+2
-1
src/state/shell/composer.tsx
+2
-1
src/state/shell/composer.tsx
···
1
1
import React from 'react'
2
-
import {AppBskyEmbedRecord} from '@atproto/api'
2
+
import {AppBskyEmbedRecord, AppBskyRichtextFacet} from '@atproto/api'
3
3
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
4
4
5
5
export interface ComposerOptsPostRef {
···
17
17
uri: string
18
18
cid: string
19
19
text: string
20
+
facets?: AppBskyRichtextFacet.Main[]
20
21
indexedAt: string
21
22
author: {
22
23
did: string
+17
-7
src/view/com/util/post-embeds/QuoteEmbed.tsx
+17
-7
src/view/com/util/post-embeds/QuoteEmbed.tsx
···
7
7
AppBskyEmbedRecordWithMedia,
8
8
ModerationUI,
9
9
AppBskyEmbedExternal,
10
+
RichText as RichTextAPI,
10
11
} from '@atproto/api'
11
12
import {AtUri} from '@atproto/api'
12
13
import {PostMeta} from '../PostMeta'
···
19
20
import {makeProfileLink} from 'lib/routes/links'
20
21
import {InfoCircleIcon} from 'lib/icons'
21
22
import {Trans} from '@lingui/macro'
23
+
import {RichText} from 'view/com/util/text/RichText'
22
24
23
25
export function MaybeQuoteEmbed({
24
26
embed,
···
43
45
uri: embed.record.uri,
44
46
indexedAt: embed.record.indexedAt,
45
47
text: embed.record.value.text,
48
+
facets: embed.record.value.facets,
46
49
embeds: embed.record.embeds,
47
50
}}
48
51
moderation={moderation}
···
84
87
const itemUrip = new AtUri(quote.uri)
85
88
const itemHref = makeProfileLink(quote.author, 'post', itemUrip.rkey)
86
89
const itemTitle = `Post by ${quote.author.handle}`
87
-
const isEmpty = React.useMemo(
88
-
() => quote.text.trim().length === 0,
89
-
[quote.text],
90
+
const richText = React.useMemo(
91
+
() =>
92
+
quote.text.trim()
93
+
? new RichTextAPI({text: quote.text, facets: quote.facets})
94
+
: undefined,
95
+
[quote.text, quote.facets],
90
96
)
91
97
const embed = React.useMemo(() => {
92
98
const e = quote.embeds?.[0]
···
117
123
{moderation ? (
118
124
<PostAlerts moderation={moderation} style={styles.alert} />
119
125
) : null}
120
-
{!isEmpty ? (
121
-
<Text type="post-text" style={pal.text} numberOfLines={20}>
122
-
{quote.text}
123
-
</Text>
126
+
{richText ? (
127
+
<RichText
128
+
richText={richText}
129
+
type="post-text"
130
+
style={pal.text}
131
+
numberOfLines={20}
132
+
noLinks
133
+
/>
124
134
) : null}
125
135
{embed && <PostEmbeds embed={embed} moderation={{}} />}
126
136
</Link>
+22
-12
src/view/com/util/text/RichText.tsx
+22
-12
src/view/com/util/text/RichText.tsx
···
17
17
lineHeight = 1.2,
18
18
style,
19
19
numberOfLines,
20
+
noLinks,
20
21
}: {
21
22
testID?: string
22
23
type?: TypographyVariant
···
24
25
lineHeight?: number
25
26
style?: StyleProp<TextStyle>
26
27
numberOfLines?: number
28
+
noLinks?: boolean
27
29
}) {
28
30
const theme = useTheme()
29
31
const pal = usePalette('default')
···
70
72
for (const segment of richText.segments()) {
71
73
const link = segment.link
72
74
const mention = segment.mention
73
-
if (mention && AppBskyRichtextFacet.validateMention(mention).success) {
75
+
if (
76
+
!noLinks &&
77
+
mention &&
78
+
AppBskyRichtextFacet.validateMention(mention).success
79
+
) {
74
80
els.push(
75
81
<TextLink
76
82
key={key}
···
82
88
/>,
83
89
)
84
90
} else if (link && AppBskyRichtextFacet.validateLink(link).success) {
85
-
els.push(
86
-
<TextLink
87
-
key={key}
88
-
type={type}
89
-
text={toShortUrl(segment.text)}
90
-
href={link.uri}
91
-
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
92
-
dataSet={WORD_WRAP}
93
-
warnOnMismatchingLabel
94
-
/>,
95
-
)
91
+
if (noLinks) {
92
+
els.push(toShortUrl(segment.text))
93
+
} else {
94
+
els.push(
95
+
<TextLink
96
+
key={key}
97
+
type={type}
98
+
text={toShortUrl(segment.text)}
99
+
href={link.uri}
100
+
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
101
+
dataSet={WORD_WRAP}
102
+
warnOnMismatchingLabel
103
+
/>,
104
+
)
105
+
}
96
106
} else {
97
107
els.push(segment.text)
98
108
}