properly shorten links in quote embeds (#2570)

* properly shorten links in quote embeds

* lint

src/state/shell/composer.tsx

@@ -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

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -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(
+  const richText = React.useMemo(
-    () => quote.text.trim().length === 0,
+    () =>
-    [quote.text],
+      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 ? (
+      {richText ? (
-        <Text type="post-text" style={pal.text} numberOfLines={20}>
+        <RichText
-          {quote.text}
+          richText={richText}
-        </Text>
+          type="post-text"
+          style={pal.text}
+          numberOfLines={20}
+          noLinks
+        />
       ) : null}
       {embed && <PostEmbeds embed={embed} moderation={{}} />}
     </Link>

src/view/com/util/text/RichText.tsx

@@ -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(
+      if (noLinks) {
-        <TextLink
+        els.push(toShortUrl(segment.text))
-          key={key}
+      } else {
-          type={type}
+        els.push(
-          text={toShortUrl(segment.text)}
+          <TextLink
-          href={link.uri}
+            key={key}
-          style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
+            type={type}
-          dataSet={WORD_WRAP}
+            text={toShortUrl(segment.text)}
-          warnOnMismatchingLabel
+            href={link.uri}
-        />,
+            style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
-      )
+            dataSet={WORD_WRAP}
+            warnOnMismatchingLabel
+          />,
+        )
+      }
     } else {
       els.push(segment.text)
     }