zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[🐴] add emoji multiplier prop to RichText and bump it up for DMs (#4229)

Browse source 
* add emoji multiplier prop to RichText and bump it up for DMs

* remove background if only emoji

* Handle more emoji

* Adjust emoji regex and length

* Fix bad merge conflict res

* Fix logic

* Revert to emoji specific regex

---------

Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Samuel Newman 2024-05-31 22:57:42 +03:00 • committed by GitHub
parent 5cda807d9d
commit b51640fbc0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/RichText.tsx
View file

@ -28,6 +28,7 @@ export function RichText({
authorHandle, authorHandle,
onLinkPress, onLinkPress,
interactiveStyle, interactiveStyle,
emojiMultiplier = 1.85,
}: TextStyleProp & }: TextStyleProp &
Pick<TextProps, 'selectable'> & { Pick<TextProps, 'selectable'> & {
value: RichTextAPI | string value: RichTextAPI | string
@ -38,6 +39,7 @@ export function RichText({
authorHandle?: string authorHandle?: string
onLinkPress?: LinkProps['onPress'] onLinkPress?: LinkProps['onPress']
interactiveStyle?: TextStyle interactiveStyle?: TextStyle
emojiMultiplier?: number
}) { }) {
const richText = React.useMemo( const richText = React.useMemo(
() => () =>
@ -57,17 +59,14 @@ export function RichText({
const {text, facets} = richText const {text, facets} = richText
if (!facets?.length) { if (!facets?.length) {
if (text.length <= 5 && /^\p{Extended_Pictographic}+$/u.test(text)) { if (isOnlyEmoji(text)) {
const fontSize =
(flattenedStyle.fontSize ?? a.text_sm.fontSize) * emojiMultiplier
return ( return (
<Text <Text
selectable={selectable} selectable={selectable}
testID={testID} testID={testID}
style={[ style={[plainStyles, {fontSize}]}
{
fontSize: 26,
lineHeight: 30,
},
]}
// @ts-ignore web only -prf // @ts-ignore web only -prf
dataSet={WORD_WRAP}> dataSet={WORD_WRAP}>
{text} {text}
@ -247,3 +246,10 @@ function RichTextTag({
</React.Fragment> </React.Fragment>
) )
} }
export function isOnlyEmoji(text: string) {
return (
text.length <= 15 &&
/^[\p{Emoji_Presentation}\p{Extended_Pictographic}]+$/u.test(text)
)
}

44
src/components/dms/MessageItem.tsx
View file

@ -21,7 +21,7 @@ import {atoms as a, useTheme} from '#/alf'
import {ActionsWrapper} from '#/components/dms/ActionsWrapper' import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
import {InlineLinkText} from '#/components/Link' import {InlineLinkText} from '#/components/Link'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import {RichText} from '../RichText' import {isOnlyEmoji, RichText} from '../RichText'
import {MessageItemEmbed} from './MessageItemEmbed' import {MessageItemEmbed} from './MessageItemEmbed'
let MessageItem = ({ let MessageItem = ({
@ -87,36 +87,38 @@ let MessageItem = ({
)} )}
{rt.text.length > 0 && ( {rt.text.length > 0 && (
<View <View
style={[ style={
a.py_sm, !isOnlyEmoji(message.text) && [
a.my_2xs, a.py_sm,
a.rounded_md, a.my_2xs,
{ a.rounded_md,
paddingLeft: 14, {
paddingRight: 14, paddingLeft: 14,
backgroundColor: isFromSelf paddingRight: 14,
? isPending backgroundColor: isFromSelf
? pendingColor ? isPending
: t.palette.primary_500 ? pendingColor
: t.palette.contrast_50, : t.palette.primary_500
borderRadius: 17, : t.palette.contrast_50,
}, borderRadius: 17,
isFromSelf ? a.self_end : a.self_start, },
isFromSelf isFromSelf ? a.self_end : a.self_start,
? {borderBottomRightRadius: isLastInGroup ? 2 : 17} isFromSelf
: {borderBottomLeftRadius: isLastInGroup ? 2 : 17}, ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
]}> : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
]
}>
<RichText <RichText
value={rt} value={rt}
style={[ style={[
a.text_md, a.text_md,
a.leading_snug,
isFromSelf && {color: t.palette.white}, isFromSelf && {color: t.palette.white},
isPending && isPending &&
t.name !== 'light' && {color: t.palette.primary_300}, t.name !== 'light' && {color: t.palette.primary_300},
]} ]}
interactiveStyle={a.underline} interactiveStyle={a.underline}
enableTags enableTags
emojiMultiplier={3}
/> />
</View> </View>
)} )}