[🐴] Rich text in messages (#3926)

* add facets to message

* richtext messages

* undo richtexttag changes

* whoops, don't redetect facets

* dont set color directly

* shorten links and filter invalid facets

* fix link shortening

* pass in underline style
zio/stable
Samuel Newman 2024-05-09 21:08:56 +01:00 committed by GitHub
parent 03b2796976
commit becc708c61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 75 additions and 20 deletions

View File

@ -840,4 +840,22 @@ export const atoms = {
mr_auto: {
marginRight: 'auto',
},
/*
* Pointer events
*/
pointer_events_none: {
pointerEvents: 'none',
},
pointer_events_auto: {
pointerEvents: 'auto',
},
/*
* Text decoration
*/
underline: {
textDecorationLine: 'underline',
},
strike_through: {
textDecorationLine: 'line-through',
},
} as const

View File

@ -1,4 +1,5 @@
import React from 'react'
import {TextStyle} from 'react-native'
import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@ -26,6 +27,7 @@ export function RichText({
enableTags = false,
authorHandle,
onLinkPress,
interactiveStyle,
}: TextStyleProp &
Pick<TextProps, 'selectable'> & {
value: RichTextAPI | string
@ -35,13 +37,22 @@ export function RichText({
enableTags?: boolean
authorHandle?: string
onLinkPress?: LinkProps['onPress']
interactiveStyle?: TextStyle
}) {
const richText = React.useMemo(
() =>
value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),
[value],
)
const styles = [a.leading_snug, flatten(style)]
const flattenedStyle = flatten(style)
const plainStyles = [a.leading_snug, flattenedStyle]
const interactiveStyles = [
a.leading_snug,
a.pointer_events_auto,
flatten(interactiveStyle),
flattenedStyle,
]
const {text, facets} = richText
@ -67,7 +78,7 @@ export function RichText({
<Text
selectable={selectable}
testID={testID}
style={styles}
style={plainStyles}
numberOfLines={numberOfLines}
// @ts-ignore web only -prf
dataSet={WORD_WRAP}>
@ -93,7 +104,7 @@ export function RichText({
<InlineLinkText
selectable={selectable}
to={`/profile/${mention.did}`}
style={[...styles, {pointerEvents: 'auto'}]}
style={interactiveStyles}
// @ts-ignore TODO
dataSet={WORD_WRAP}
onPress={onLinkPress}>
@ -110,7 +121,7 @@ export function RichText({
selectable={selectable}
key={key}
to={link.uri}
style={[...styles, {pointerEvents: 'auto'}]}
style={interactiveStyles}
// @ts-ignore TODO
dataSet={WORD_WRAP}
shareOnLongPress
@ -130,7 +141,7 @@ export function RichText({
key={key}
text={segment.text}
tag={tag.tag}
style={styles}
style={interactiveStyles}
selectable={selectable}
authorHandle={authorHandle}
/>,
@ -145,7 +156,7 @@ export function RichText({
<Text
selectable={selectable}
testID={testID}
style={styles}
style={plainStyles}
numberOfLines={numberOfLines}
// @ts-ignore web only -prf
dataSet={WORD_WRAP}>
@ -219,19 +230,16 @@ function RichTextTag({
onFocus={onFocus}
onBlur={onBlur}
style={[
style,
{
pointerEvents: 'auto',
color: t.palette.primary_500,
},
web({
cursor: 'pointer',
}),
{color: t.palette.primary_500},
(hovered || focused || pressed) && {
...web({outline: 0}),
textDecorationLine: 'underline',
textDecorationColor: t.palette.primary_500,
},
style,
]}>
{text}
</Text>

View File

@ -1,5 +1,6 @@
import React, {useCallback, useMemo, useRef} from 'react'
import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native'
import {RichText as RichTextAPI} from '@atproto/api'
import {ChatBskyConvoDefs} from '@atproto-labs/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@ -9,8 +10,9 @@ import {TimeElapsed} from 'view/com/util/TimeElapsed'
import {atoms as a, useTheme} from '#/alf'
import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
import {Text} from '#/components/Typography'
import {RichText} from '../RichText'
export let MessageItem = ({
let MessageItem = ({
item,
next,
pending,
@ -65,6 +67,10 @@ export let MessageItem = ({
const pendingColor =
t.name === 'light' ? t.palette.primary_200 : t.palette.primary_800
const rt = useMemo(() => {
return new RichTextAPI({text: item.text, facets: item.facets})
}, [item.text, item.facets])
return (
<View>
<ActionsWrapper isFromSelf={isFromSelf} message={item}>
@ -87,15 +93,17 @@ export let MessageItem = ({
? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
: {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
]}>
<Text
<RichText
value={rt}
style={[
a.text_md,
a.leading_snug,
isFromSelf && {color: t.palette.white},
pending && t.name !== 'light' && {color: t.palette.primary_300},
]}>
{item.text}
</Text>
]}
interactiveStyle={a.underline}
enableTags
/>
</View>
</ActionsWrapper>
<MessageItemMetadata
@ -106,8 +114,8 @@ export let MessageItem = ({
</View>
)
}
MessageItem = React.memo(MessageItem)
export {MessageItem}
let MessageItemMetadata = ({
message,

View File

@ -1,4 +1,5 @@
import {RichText, UnicodeString} from '@atproto/api'
import {toShortUrl} from './url-helpers'
export function shortenLinks(rt: RichText): RichText {

View File

@ -7,12 +7,15 @@ import {
import {runOnJS, useSharedValue} from 'react-native-reanimated'
import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/reanimated2/hook/commonTypes'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {AppBskyRichtextFacet, RichText} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {shortenLinks} from '#/lib/strings/rich-text-manip'
import {isIOS} from '#/platform/detection'
import {useConvo} from '#/state/messages/convo'
import {ConvoItem, ConvoStatus} from '#/state/messages/convo/types'
import {useAgent} from '#/state/session'
import {ScrollProvider} from 'lib/ScrollContext'
import {isWeb} from 'platform/detection'
import {List} from 'view/com/util/List'
@ -87,6 +90,7 @@ function onScrollToIndexFailed() {
export function MessagesList() {
const convo = useConvo()
const {getAgent} = useAgent()
const flatListRef = useRef<FlatList>(null)
// We need to keep track of when the scroll offset is at the bottom of the list to know when to scroll as new items
@ -159,14 +163,30 @@ export function MessagesList() {
}, [convo, hasInitiallyScrolled])
const onSendMessage = useCallback(
(text: string) => {
async (text: string) => {
let rt = new RichText({text}, {cleanNewlines: true})
await rt.detectFacets(getAgent())
rt = shortenLinks(rt)
// filter out any mention facets that didn't map to a user
rt.facets = rt.facets?.filter(facet => {
const mention = facet.features.find(feature =>
AppBskyRichtextFacet.isMention(feature),
)
if (mention && !mention.did) {
return false
}
return true
})
if (convo.status === ConvoStatus.Ready) {
convo.sendMessage({
text,
text: rt.text,
facets: rt.facets,
})
}
},
[convo],
[convo, getAgent],
)
const onScroll = React.useCallback(