diff options
| -rw-r--r-- | src/components/RichText.tsx | 20 | ||||
| -rw-r--r-- | src/components/dms/MessageItem.tsx | 44 |
2 files changed, 36 insertions, 28 deletions
diff --git a/src/components/RichText.tsx b/src/components/RichText.tsx index ed69c199a..9ba44eabe 100644 --- a/src/components/RichText.tsx +++ b/src/components/RichText.tsx @@ -28,6 +28,7 @@ export function RichText({ authorHandle, onLinkPress, interactiveStyle, + emojiMultiplier = 1.85, }: TextStyleProp & Pick<TextProps, 'selectable'> & { value: RichTextAPI | string @@ -38,6 +39,7 @@ export function RichText({ authorHandle?: string onLinkPress?: LinkProps['onPress'] interactiveStyle?: TextStyle + emojiMultiplier?: number }) { const richText = React.useMemo( () => @@ -57,17 +59,14 @@ export function RichText({ const {text, facets} = richText 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 ( <Text selectable={selectable} testID={testID} - style={[ - { - fontSize: 26, - lineHeight: 30, - }, - ]} + style={[plainStyles, {fontSize}]} // @ts-ignore web only -prf dataSet={WORD_WRAP}> {text} @@ -247,3 +246,10 @@ function RichTextTag({ </React.Fragment> ) } + +export function isOnlyEmoji(text: string) { + return ( + text.length <= 15 && + /^[\p{Emoji_Presentation}\p{Extended_Pictographic}]+$/u.test(text) + ) +} diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index 772fcb1b1..61358c989 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -21,7 +21,7 @@ import {atoms as a, useTheme} from '#/alf' import {ActionsWrapper} from '#/components/dms/ActionsWrapper' import {InlineLinkText} from '#/components/Link' import {Text} from '#/components/Typography' -import {RichText} from '../RichText' +import {isOnlyEmoji, RichText} from '../RichText' import {MessageItemEmbed} from './MessageItemEmbed' let MessageItem = ({ @@ -87,36 +87,38 @@ let MessageItem = ({ )} {rt.text.length > 0 && ( <View - style={[ - a.py_sm, - a.my_2xs, - a.rounded_md, - { - paddingLeft: 14, - paddingRight: 14, - backgroundColor: isFromSelf - ? isPending - ? pendingColor - : t.palette.primary_500 - : t.palette.contrast_50, - borderRadius: 17, - }, - isFromSelf ? a.self_end : a.self_start, - isFromSelf - ? {borderBottomRightRadius: isLastInGroup ? 2 : 17} - : {borderBottomLeftRadius: isLastInGroup ? 2 : 17}, - ]}> + style={ + !isOnlyEmoji(message.text) && [ + a.py_sm, + a.my_2xs, + a.rounded_md, + { + paddingLeft: 14, + paddingRight: 14, + backgroundColor: isFromSelf + ? isPending + ? pendingColor + : t.palette.primary_500 + : t.palette.contrast_50, + borderRadius: 17, + }, + isFromSelf ? a.self_end : a.self_start, + isFromSelf + ? {borderBottomRightRadius: isLastInGroup ? 2 : 17} + : {borderBottomLeftRadius: isLastInGroup ? 2 : 17}, + ] + }> <RichText value={rt} style={[ a.text_md, - a.leading_snug, isFromSelf && {color: t.palette.white}, isPending && t.name !== 'light' && {color: t.palette.primary_300}, ]} interactiveStyle={a.underline} enableTags + emojiMultiplier={3} /> </View> )} |