From 5eb294488f08534abac3335acfa366cffea9259e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 23 Sep 2024 10:40:37 -0500 Subject: [Neue] Handle emoji within custom font (#5449) * Support emoji in text with custom font * Add emoji support to elements that need it * Remove unused file causing lint failure * Fix a few more emoji locations * Couple more * No throw --- package.json | 1 + src/components/FeedCard.tsx | 13 ++- src/components/KnownFollowers.tsx | 14 +-- src/components/LabelingServiceCard/index.tsx | 11 ++- src/components/ListCard.tsx | 24 ++--- src/components/Pills.tsx | 1 + src/components/ProfileCard.tsx | 12 ++- src/components/ReportDialog/SubmitView.tsx | 1 + src/components/RichText.tsx | 9 +- src/components/StarterPack/StarterPackCard.tsx | 27 +++--- .../StarterPack/Wizard/WizardListCard.tsx | 11 ++- src/components/Typography.tsx | 108 ++++++++++++++++++++- src/components/dms/MessagesListHeader.tsx | 17 ++-- src/components/moderation/LabelsOnMeDialog.tsx | 6 +- .../moderation/ModerationDetailsDialog.tsx | 8 +- src/screens/Messages/List/ChatListItem.tsx | 10 +- src/screens/Profile/Header/DisplayName.tsx | 1 + src/screens/Profile/Header/Handle.tsx | 11 ++- src/view/com/composer/text-input/TextInput.tsx | 19 ++-- .../com/composer/text-input/web/Autocomplete.tsx | 15 +-- src/view/com/feeds/FeedSourceCard.tsx | 12 +-- src/view/com/modals/UserAddRemoveLists.tsx | 32 +++--- src/view/com/notifications/FeedItem.tsx | 23 +++-- src/view/com/pager/TabBar.tsx | 1 + src/view/com/post-thread/PostThreadItem.tsx | 31 +++--- src/view/com/posts/FeedItem.tsx | 26 +++-- src/view/com/profile/ProfileCard.tsx | 19 ++-- src/view/com/util/PostMeta.tsx | 44 ++++++--- src/view/com/util/UserInfoText.tsx | 31 +++--- .../com/util/post-embeds/ExternalLinkEmbed.tsx | 27 +++--- src/view/com/util/text/Text.tsx | 50 +++++++--- src/view/com/util/text/ThemedText.tsx | 80 --------------- src/view/screens/Search/Search.tsx | 1 + src/view/shell/desktop/Search.tsx | 11 ++- yarn.lock | 5 + 35 files changed, 423 insertions(+), 289 deletions(-) delete mode 100644 src/view/com/util/text/ThemedText.tsx diff --git a/package.json b/package.json index bb9706c39..245c095f1 100644 --- a/package.json +++ b/package.json @@ -116,6 +116,7 @@ "deprecated-react-native-prop-types": "^5.0.0", "email-validator": "^2.0.4", "emoji-mart": "^5.5.2", + "emoji-regex": "^10.4.0", "eventemitter3": "^5.0.1", "expo": "^51.0.8", "expo-application": "^5.9.1", diff --git a/src/components/FeedCard.tsx b/src/components/FeedCard.tsx index e6d664cfd..b28f66f83 100644 --- a/src/components/FeedCard.tsx +++ b/src/components/FeedCard.tsx @@ -11,17 +11,17 @@ import {msg, plural, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' +import {sanitizeHandle} from '#/lib/strings/handles' import {logger} from '#/logger' +import {precacheFeedFromGeneratorView} from '#/state/queries/feed' import { useAddSavedFeedsMutation, usePreferencesQuery, useRemoveFeedMutation, } from '#/state/queries/preferences' -import {sanitizeHandle} from 'lib/strings/handles' -import {precacheFeedFromGeneratorView} from 'state/queries/feed' -import {useSession} from 'state/session' +import {useSession} from '#/state/session' +import * as Toast from '#/view/com/util/Toast' import {UserAvatar} from '#/view/com/util/UserAvatar' -import * as Toast from 'view/com/util/Toast' import {useTheme} from '#/alf' import {atoms as a} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' @@ -121,7 +121,10 @@ export function TitleAndByline({ return ( - + {title} {creator && ( diff --git a/src/components/KnownFollowers.tsx b/src/components/KnownFollowers.tsx index 4017a7b0b..35a346c3a 100644 --- a/src/components/KnownFollowers.tsx +++ b/src/components/KnownFollowers.tsx @@ -5,7 +5,7 @@ import {msg, Plural, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {makeProfileLink} from '#/lib/routes/links' -import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeDisplayName} from '#/lib/strings/display-names' import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useTheme} from '#/alf' import {Link, LinkProps} from '#/components/Link' @@ -185,11 +185,11 @@ function KnownFollowersInner({ serverCount > 2 ? ( Followed by{' '} - + {slice[0].profile.displayName} ,{' '} - + {slice[1].profile.displayName} , and{' '} @@ -203,11 +203,11 @@ function KnownFollowersInner({ // only 2 Followed by{' '} - + {slice[0].profile.displayName} {' '} and{' '} - + {slice[1].profile.displayName} @@ -216,7 +216,7 @@ function KnownFollowersInner({ // 1-n followers, including blocks Followed by{' '} - + {slice[0].profile.displayName} {' '} and{' '} @@ -230,7 +230,7 @@ function KnownFollowersInner({ // only 1 Followed by{' '} - + {slice[0].profile.displayName} diff --git a/src/components/LabelingServiceCard/index.tsx b/src/components/LabelingServiceCard/index.tsx index 851645a48..03b8ece6b 100644 --- a/src/components/LabelingServiceCard/index.tsx +++ b/src/components/LabelingServiceCard/index.tsx @@ -44,17 +44,22 @@ export function Avatar({avatar}: {avatar?: string}) { } export function Title({value}: {value: string}) { - return {value} + return ( + + {value} + + ) } export function Description({value, handle}: {value?: string; handle: string}) { + const {_} = useLingui() return value ? ( ) : ( - - By {sanitizeHandle(handle, '@')} + + {_(msg`By ${sanitizeHandle(handle, '@')}`)} ) } diff --git a/src/components/ListCard.tsx b/src/components/ListCard.tsx index 829f36d47..ed5838fb0 100644 --- a/src/components/ListCard.tsx +++ b/src/components/ListCard.tsx @@ -7,13 +7,14 @@ import { moderateUserList, ModerationUI, } from '@atproto/api' -import {Trans} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' -import {sanitizeHandle} from 'lib/strings/handles' -import {useModerationOpts} from 'state/preferences/moderation-opts' -import {precacheList} from 'state/queries/feed' -import {useSession} from 'state/session' +import {sanitizeHandle} from '#/lib/strings/handles' +import {useModerationOpts} from '#/state/preferences/moderation-opts' +import {precacheList} from '#/state/queries/feed' +import {useSession} from '#/state/session' import {atoms as a, useTheme} from '#/alf' import { Avatar, @@ -111,6 +112,7 @@ export function TitleAndByline({ modUi?: ModerationUI }) { const t = useTheme() + const {_} = useLingui() const {currentAccount} = useSession() return ( @@ -130,6 +132,7 @@ export function TitleAndByline({ {title} @@ -139,15 +142,12 @@ export function TitleAndByline({ {creator && ( - {purpose === MODLIST ? ( - - Moderation list by {sanitizeHandle(creator.handle, '@')} - - ) : ( - List by {sanitizeHandle(creator.handle, '@')} - )} + {purpose === MODLIST + ? _(msg`Moderation list by ${sanitizeHandle(creator.handle, '@')}`) + : _(msg`List by ${sanitizeHandle(creator.handle, '@')}`)} )} diff --git a/src/components/Pills.tsx b/src/components/Pills.tsx index 6c8084743..974d83593 100644 --- a/src/components/Pills.tsx +++ b/src/components/Pills.tsx @@ -130,6 +130,7 @@ export function Label({ )} {name} {handle} diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx index 2def0fa4b..e323d1504 100644 --- a/src/components/ReportDialog/SubmitView.tsx +++ b/src/components/ReportDialog/SubmitView.tsx @@ -256,6 +256,7 @@ function LabelerToggle({title}: {title: string}) { a.z_10, ]}> , ) } else { - els.push(segment.text) + els.push( + + {segment.text} + , + ) } key++ } @@ -213,6 +219,7 @@ function RichTextTag({ {!noIcon ? : null} - + {record.name} - - - Starter pack by{' '} - {creator?.did === currentAccount?.did - ? _(msg`you`) - : `@${sanitizeHandle(creator.handle)}`} - + + {creator?.did === currentAccount?.did + ? _(msg`Starter pack by you`) + : _(msg`Starter pack by ${sanitizeHandle(creator.handle, '@')}`)} {!noDescription && record.description ? ( - + {record.description} ) : null} diff --git a/src/components/StarterPack/Wizard/WizardListCard.tsx b/src/components/StarterPack/Wizard/WizardListCard.tsx index ad02cdc30..44f01a154 100644 --- a/src/components/StarterPack/Wizard/WizardListCard.tsx +++ b/src/components/StarterPack/Wizard/WizardListCard.tsx @@ -12,11 +12,11 @@ import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {DISCOVER_FEED_URI, STARTER_PACK_MAX_SIZE} from 'lib/constants' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {useSession} from 'state/session' -import {UserAvatar} from 'view/com/util/UserAvatar' +import {DISCOVER_FEED_URI, STARTER_PACK_MAX_SIZE} from '#/lib/constants' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {useSession} from '#/state/session' +import {UserAvatar} from '#/view/com/util/UserAvatar' import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' @@ -78,6 +78,7 @@ function WizardListCard({ /> & { /** * Lets the user select text, to use the native copy and paste functionality. */ selectable?: boolean + /** + * Provides `data-*` attributes to the underlying `UITextView` component on + * web only. + */ + dataSet?: Record + /** + * Appears as a small tooltip on web hover. + */ + title?: string +} & ( + | { + emoji: true + children: StringChild + } + | { + emoji?: false + children: RNTextProps['children'] + } + ) + +const EMOJI = createEmojiRegex() + +export function childHasEmoji(children: React.ReactNode) { + return (Array.isArray(children) ? children : [children]).some( + child => typeof child === 'string' && createEmojiRegex().test(child), + ) +} + +export function childIsString( + children: React.ReactNode, +): children is StringChild { + return ( + typeof children === 'string' || + (Array.isArray(children) && + children.every(child => typeof child === 'string' || child === null)) + ) +} + +export function renderChildrenWithEmoji(children: StringChild) { + const normalized = Array.isArray(children) ? children : [children] + + return ( + + {normalized.map(child => { + if (typeof child !== 'string') return child + + const emojis = child.match(EMOJI) + + if (emojis === null) { + return child + } + + return child.split(EMOJI).map((stringPart, index) => ( + + {stringPart} + {emojis[index] ? ( + + {emojis[index]} + + ) : null} + + )) + })} + + ) } /** @@ -64,7 +134,15 @@ export function normalizeTextStyles( /** * Our main text component. Use this most of the time. */ -export function Text({style, selectable, ...rest}: TextProps) { +export function Text({ + children, + emoji, + style, + selectable, + title, + dataSet, + ...rest +}: TextProps) { const {fonts, flags} = useAlf() const t = useTheme() const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)], { @@ -73,7 +151,29 @@ export function Text({style, selectable, ...rest}: TextProps) { flags, }) - return + if (IS_DEV) { + if (!emoji && childHasEmoji(children)) { + logger.warn( + `Text: emoji detected but emoji not enabled: "${children}"\n\nPlease add '`, + ) + } + + if (emoji && !childIsString(children)) { + logger.error('Text: when , children can only be strings.') + } + } + + return ( + + {isIOS && emoji ? renderChildrenWithEmoji(children) : children} + + ) } export function createHeadingElement({level}: {level: number}) { diff --git a/src/components/dms/MessagesListHeader.tsx b/src/components/dms/MessagesListHeader.tsx index 1a6bbbe60..ab9ec16e4 100644 --- a/src/components/dms/MessagesListHeader.tsx +++ b/src/components/dms/MessagesListHeader.tsx @@ -10,14 +10,14 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' -import {BACK_HITSLOP} from 'lib/constants' -import {makeProfileLink} from 'lib/routes/links' -import {NavigationProp} from 'lib/routes/types' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {isWeb} from 'platform/detection' -import {useProfileShadow} from 'state/cache/profile-shadow' -import {isConvoActive, useConvo} from 'state/messages/convo' -import {PreviewableUserAvatar} from 'view/com/util/UserAvatar' +import {BACK_HITSLOP} from '#/lib/constants' +import {makeProfileLink} from '#/lib/routes/links' +import {NavigationProp} from '#/lib/routes/types' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {isWeb} from '#/platform/detection' +import {useProfileShadow} from '#/state/cache/profile-shadow' +import {isConvoActive, useConvo} from '#/state/messages/convo' +import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' import {ConvoMenu} from '#/components/dms/ConvoMenu' import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2' @@ -170,6 +170,7 @@ function HeaderReady({ - {strings.name} - + + {strings.name} + + {strings.description} diff --git a/src/components/moderation/ModerationDetailsDialog.tsx b/src/components/moderation/ModerationDetailsDialog.tsx index d95717cf4..225917853 100644 --- a/src/components/moderation/ModerationDetailsDialog.tsx +++ b/src/components/moderation/ModerationDetailsDialog.tsx @@ -118,7 +118,11 @@ function ModerationDetailsDialogInner({ : _(msg`The author of this thread has hidden this reply.`) } else if (modcause.type === 'label') { name = desc.name - description = desc.description + description = ( + + {desc.description} + + ) } else { // should never happen name = '' @@ -127,7 +131,7 @@ function ModerationDetailsDialogInner({ return ( - + {name} diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/List/ChatListItem.tsx index c45cc28d7..e9668b4e1 100644 --- a/src/screens/Messages/List/ChatListItem.tsx +++ b/src/screens/Messages/List/ChatListItem.tsx @@ -10,6 +10,10 @@ import { import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useHaptics} from '#/lib/haptics' +import {decrementBadgeCount} from '#/lib/notifications/notifications' +import {logEvent} from '#/lib/statsig/statsig' +import {sanitizeDisplayName} from '#/lib/strings/display-names' import { postUriToRelativePath, toBskyAppUrl, @@ -19,10 +23,6 @@ import {isNative} from '#/platform/detection' import {useProfileShadow} from '#/state/cache/profile-shadow' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useSession} from '#/state/session' -import {useHaptics} from 'lib/haptics' -import {decrementBadgeCount} from 'lib/notifications/notifications' -import {logEvent} from 'lib/statsig/statsig' -import {sanitizeDisplayName} from 'lib/strings/display-names' import {TimeElapsed} from '#/view/com/util/TimeElapsed' import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' @@ -248,6 +248,7 @@ function ChatListItemReady({ numberOfLines={1} style={[{maxWidth: '85%'}, web([a.leading_normal])]}> {sanitizeDisplayName( diff --git a/src/screens/Profile/Header/Handle.tsx b/src/screens/Profile/Header/Handle.tsx index 0344f1a23..ba869b662 100644 --- a/src/screens/Profile/Header/Handle.tsx +++ b/src/screens/Profile/Header/Handle.tsx @@ -1,11 +1,12 @@ import React from 'react' import {View} from 'react-native' import {AppBskyActorDefs} from '@atproto/api' -import {Trans} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {isInvalidHandle} from '#/lib/strings/handles' +import {isIOS} from '#/platform/detection' import {Shadow} from '#/state/cache/types' -import {isInvalidHandle} from 'lib/strings/handles' -import {isIOS} from 'platform/detection' import {atoms as a, useTheme, web} from '#/alf' import {NewskieDialog} from '#/components/NewskieDialog' import {Text} from '#/components/Typography' @@ -18,6 +19,7 @@ export function ProfileHeaderHandle({ disableTaps?: boolean }) { const t = useTheme() + const {_} = useLingui() const invalidHandle = isInvalidHandle(profile.handle) const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy return ( @@ -33,6 +35,7 @@ export function ProfileHeaderHandle({ ) : undefined} - {invalidHandle ? ⚠Invalid Handle : `@${profile.handle}`} + {invalidHandle ? _(msg`⚠Invalid Handle`) : `@${profile.handle}`} ) diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx index 778439259..95c57ad89 100644 --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -19,19 +19,19 @@ import PasteInput, { PasteInputRef, } from '@mattermost/react-native-paste-input' +import {POST_IMG_MAX} from '#/lib/constants' +import {usePalette} from '#/lib/hooks/usePalette' +import {downloadAndResize} from '#/lib/media/manip' +import {isUriImage} from '#/lib/media/util' +import {cleanError} from '#/lib/strings/errors' +import {getMentionAt, insertMentionAt} from '#/lib/strings/mention-manip' +import {useTheme} from '#/lib/ThemeContext' import {isAndroid} from '#/platform/detection' -import {POST_IMG_MAX} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {downloadAndResize} from 'lib/media/manip' -import {isUriImage} from 'lib/media/util' -import {cleanError} from 'lib/strings/errors' -import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip' -import {useTheme} from 'lib/ThemeContext' import { LinkFacetMatch, suggestLinkCardUri, -} from 'view/com/composer/text-input/text-input-util' -import {Text} from 'view/com/util/text/Text' +} from '#/view/com/composer/text-input/text-input-util' +import {Text} from '#/view/com/util/text/Text' import {atoms as a, useAlf} from '#/alf' import {normalizeTextStyles} from '#/components/Typography' import {Autocomplete} from './mobile/Autocomplete' @@ -216,6 +216,7 @@ export const TextInput = forwardRef(function TextInputImpl( return Array.from(richtext.segments()).map(segment => { return ( {segment.text} diff --git a/src/view/com/composer/text-input/web/Autocomplete.tsx b/src/view/com/composer/text-input/web/Autocomplete.tsx index 29b8f0bc6..a43e67c04 100644 --- a/src/view/com/composer/text-input/web/Autocomplete.tsx +++ b/src/view/com/composer/text-input/web/Autocomplete.tsx @@ -5,19 +5,20 @@ import React, { useState, } from 'react' import {Pressable, StyleSheet, View} from 'react-native' +import {Trans} from '@lingui/macro' import {ReactRenderer} from '@tiptap/react' -import tippy, {Instance as TippyInstance} from 'tippy.js' import { + SuggestionKeyDownProps, SuggestionOptions, SuggestionProps, - SuggestionKeyDownProps, } from '@tiptap/suggestion' +import tippy, {Instance as TippyInstance} from 'tippy.js' + +import {usePalette} from '#/lib/hooks/usePalette' import {ActorAutocompleteFn} from '#/state/queries/actor-autocomplete' -import {usePalette} from 'lib/hooks/usePalette' -import {Text} from 'view/com/util/text/Text' -import {UserAvatar} from 'view/com/util/UserAvatar' +import {Text} from '#/view/com/util/text/Text' +import {UserAvatar} from '#/view/com/util/UserAvatar' import {useGrapheme} from '../hooks/useGrapheme' -import {Trans} from '@lingui/macro' interface MentionListRef { onKeyDown: (props: SuggestionKeyDownProps) => boolean @@ -180,7 +181,7 @@ const MentionList = forwardRef( size={26} type={item.associated?.labeler ? 'labeler' : 'user'} /> - + {displayName} diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx index 68437c37a..3276cf882 100644 --- a/src/view/com/feeds/FeedSourceCard.tsx +++ b/src/view/com/feeds/FeedSourceCard.tsx @@ -12,6 +12,10 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Plural, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped' +import {usePalette} from '#/lib/hooks/usePalette' +import {sanitizeHandle} from '#/lib/strings/handles' +import {s} from '#/lib/styles' import {logger} from '#/logger' import {shouldClickOpenNewTab} from '#/platform/urls' import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed' @@ -21,12 +25,8 @@ import { UsePreferencesQueryResponse, useRemoveFeedMutation, } from '#/state/queries/preferences' -import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' -import {usePalette} from 'lib/hooks/usePalette' -import {sanitizeHandle} from 'lib/strings/handles' -import {s} from 'lib/styles' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' -import * as Toast from 'view/com/util/Toast' +import * as Toast from '#/view/com/util/Toast' import {useTheme} from '#/alf' import {atoms as a} from '#/alf' import * as Prompt from '#/components/Prompt' @@ -242,7 +242,7 @@ export function FeedSourceCardLoaded({ - + {feed.displayName} diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx index 29caf4660..b0b76644f 100644 --- a/src/view/com/modals/UserAddRemoveLists.tsx +++ b/src/view/com/modals/UserAddRemoveLists.tsx @@ -65,21 +65,27 @@ export function Component({ return [pal.border, {flex: 1, borderTopWidth: StyleSheet.hairlineWidth}] }, [pal.border, screenHeight]) + const headerStyles = [ + { + textAlign: 'center', + fontWeight: '600', + fontSize: 20, + marginBottom: 12, + paddingHorizontal: 12, + } as const, + pal.text, + ] + return ( - - Update {displayName} in Lists + + + Update{' '} + + {displayName} + {' '} + in Lists + + {forceLTR(firstAuthorName)} + + } disableMismatchWarning /> {authors.length > 1 ? ( @@ -570,12 +574,13 @@ function ExpandedAuthorsList({ numberOfLines={1} style={pal.text} lineHeight={1.2}> - {sanitizeDisplayName( - author.profile.displayName || author.profile.handle, - )} -   + + {sanitizeDisplayName( + author.profile.displayName || author.profile.handle, + )} + {' '} - {sanitizeHandle(author.profile.handle)} + {sanitizeHandle(author.profile.handle, '@')} @@ -592,7 +597,11 @@ function AdditionalPostText({post}: {post?: AppBskyFeedDefs.PostView}) { return ( <> - {text?.length > 0 && {text}} + {text?.length > 0 && ( + + {text} + + )} onPressItem(i)}> - + {sanitizeHandle(post.author.handle, '@')} diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 7537a4644..b1509b271 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -316,11 +316,19 @@ let FeedItemInner = ({ style={pal.textLight} lineHeight={1.2} numberOfLines={1} - text={sanitizeDisplayName( - reason.by.displayName || - sanitizeHandle(reason.by.handle), - moderation.ui('displayName'), - )} + text={ + + {sanitizeDisplayName( + reason.by.displayName || + sanitizeHandle(reason.by.handle), + moderation.ui('displayName'), + )} + + } href={makeProfileLink(reason.by)} onBeforePress={onOpenReposter} /> @@ -527,9 +535,11 @@ function ReplyToLabel({ numberOfLines={1} href={makeProfileLink(profile)} text={ - profile.displayName - ? sanitizeDisplayName(profile.displayName) - : sanitizeHandle(profile.handle) + + {profile.displayName + ? sanitizeDisplayName(profile.displayName) + : sanitizeHandle(profile.handle)} + } /> diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index fd32e37a4..eab8611dd 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -7,17 +7,17 @@ import { } from '@atproto/api' import {useQueryClient} from '@tanstack/react-query' +import {usePalette} from '#/lib/hooks/usePalette' +import {getModerationCauseKey, isJustAMute} from '#/lib/moderation' +import {makeProfileLink} from '#/lib/routes/links' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {s} from '#/lib/styles' import {useProfileShadow} from '#/state/cache/profile-shadow' import {Shadow} from '#/state/cache/types' import {useModerationOpts} from '#/state/preferences/moderation-opts' +import {precacheProfile} from '#/state/queries/profile' import {useSession} from '#/state/session' -import {usePalette} from 'lib/hooks/usePalette' -import {getModerationCauseKey, isJustAMute} from 'lib/moderation' -import {makeProfileLink} from 'lib/routes/links' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {s} from 'lib/styles' -import {precacheProfile} from 'state/queries/profile' import {atoms as a} from '#/alf' import { KnownFollowers, @@ -103,6 +103,7 @@ export function ProfileCard({ - + {sanitizeHandle(profile.handle, '@')} {profile.description ? ( - + {profile.description as string} ) : null} diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index 3bd350bf3..f2d717e96 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -4,16 +4,16 @@ import {AppBskyActorDefs, ModerationDecision, ModerationUI} from '@atproto/api' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' +import {usePalette} from '#/lib/hooks/usePalette' +import {makeProfileLink} from '#/lib/routes/links' +import {forceLTR} from '#/lib/strings/bidi' +import {NON_BREAKING_SPACE} from '#/lib/strings/constants' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {niceDate} from '#/lib/strings/time' +import {TypographyVariant} from '#/lib/ThemeContext' +import {isAndroid} from '#/platform/detection' import {precacheProfile} from '#/state/queries/profile' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' -import {forceLTR} from 'lib/strings/bidi' -import {NON_BREAKING_SPACE} from 'lib/strings/constants' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {niceDate} from 'lib/strings/time' -import {TypographyVariant} from 'lib/ThemeContext' -import {isAndroid} from 'platform/detection' import {ProfileHoverCard} from '#/components/ProfileHoverCard' import {TextLinkOnWebOnly} from './Link' import {Text} from './text/Text' @@ -73,12 +73,20 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => { style={[pal.text]} lineHeight={1.2} disableMismatchWarning - text={forceLTR( - sanitizeDisplayName( - displayName, - opts.moderation?.ui('displayName'), - ), - )} + text={ + + {forceLTR( + sanitizeDisplayName( + displayName, + opts.moderation?.ui('displayName'), + ), + )} + + } href={profileLink} onBeforePress={onBeforePressAuthor} /> @@ -86,7 +94,11 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => { type="md" disableMismatchWarning style={[pal.textLight, {flexShrink: 4}]} - text={NON_BREAKING_SPACE + sanitizeHandle(handle, '@')} + text={ + + {NON_BREAKING_SPACE + sanitizeHandle(handle, '@')} + + } href={profileLink} onBeforePress={onBeforePressAuthor} anchorNoUnderline diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx index 9cb9997f6..8a444d590 100644 --- a/src/view/com/util/UserInfoText.tsx +++ b/src/view/com/util/UserInfoText.tsx @@ -1,15 +1,16 @@ import React from 'react' -import {AppBskyActorGetProfile as GetProfile} from '@atproto/api' import {StyleProp, StyleSheet, TextStyle} from 'react-native' +import {AppBskyActorGetProfile as GetProfile} from '@atproto/api' + +import {makeProfileLink} from '#/lib/routes/links' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {TypographyVariant} from '#/lib/ThemeContext' +import {STALE} from '#/state/queries' +import {useProfileQuery} from '#/state/queries/profile' import {TextLinkOnWebOnly} from './Link' -import {Text} from './text/Text' import {LoadingPlaceholder} from './LoadingPlaceholder' -import {TypographyVariant} from 'lib/ThemeContext' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {makeProfileLink} from 'lib/routes/links' -import {useProfileQuery} from '#/state/queries/profile' -import {STALE} from '#/state/queries' +import {Text} from './text/Text' export function UserInfoText({ type = 'md', @@ -50,11 +51,15 @@ export function UserInfoText({ lineHeight={1.2} numberOfLines={1} href={makeProfileLink(profile)} - text={`${prefix || ''}${sanitizeDisplayName( - typeof profile[attr] === 'string' && profile[attr] - ? (profile[attr] as string) - : sanitizeHandle(profile.handle), - )}`} + text={ + + {`${prefix || ''}${sanitizeDisplayName( + typeof profile[attr] === 'string' && profile[attr] + ? (profile[attr] as string) + : sanitizeHandle(profile.handle), + )}`} + + } /> ) } else { diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index 54e1eb4d5..98332c33b 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -5,21 +5,21 @@ import {AppBskyEmbedExternal} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {shareUrl} from 'lib/sharing' -import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player' +import {usePalette} from '#/lib/hooks/usePalette' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {shareUrl} from '#/lib/sharing' +import {parseEmbedPlayerFromUrl} from '#/lib/strings/embed-player' import { getStarterPackOgCard, parseStarterPackUri, -} from 'lib/strings/starter-pack' -import {toNiceDomain} from 'lib/strings/url-helpers' -import {isNative} from 'platform/detection' -import {useExternalEmbedsPrefs} from 'state/preferences' -import {Link} from 'view/com/util/Link' -import {ExternalGifEmbed} from 'view/com/util/post-embeds/ExternalGifEmbed' -import {ExternalPlayer} from 'view/com/util/post-embeds/ExternalPlayerEmbed' -import {GifEmbed} from 'view/com/util/post-embeds/GifEmbed' +} from '#/lib/strings/starter-pack' +import {toNiceDomain} from '#/lib/strings/url-helpers' +import {isNative} from '#/platform/detection' +import {useExternalEmbedsPrefs} from '#/state/preferences' +import {Link} from '#/view/com/util/Link' +import {ExternalGifEmbed} from '#/view/com/util/post-embeds/ExternalGifEmbed' +import {ExternalPlayer} from '#/view/com/util/post-embeds/ExternalPlayerEmbed' +import {GifEmbed} from '#/view/com/util/post-embeds/GifEmbed' import {atoms as a, useTheme} from '#/alf' import {MediaInsetBorder} from '#/components/MediaInsetBorder' import {Text} from '../text/Text' @@ -115,12 +115,13 @@ export const ExternalLinkEmbed = ({ {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && ( - + {link.title || link.uri} )} {link.description ? ( diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx index 52a45b0e2..3d885480c 100644 --- a/src/view/com/util/text/Text.tsx +++ b/src/view/com/util/text/Text.tsx @@ -2,27 +2,40 @@ import React from 'react' import {StyleSheet, Text as RNText, TextProps} from 'react-native' import {UITextView} from 'react-native-uitextview' -import {lh, s} from 'lib/styles' -import {TypographyVariant, useTheme} from 'lib/ThemeContext' -import {isIOS, isWeb} from 'platform/detection' +import {lh, s} from '#/lib/styles' +import {TypographyVariant, useTheme} from '#/lib/ThemeContext' +import {logger} from '#/logger' +import {isIOS} from '#/platform/detection' import {applyFonts, useAlf} from '#/alf' +import { + childHasEmoji, + childIsString, + renderChildrenWithEmoji, + StringChild, +} from '#/components/Typography' +import {IS_DEV} from '#/env' -export type CustomTextProps = TextProps & { +export type CustomTextProps = Omit & { type?: TypographyVariant lineHeight?: number title?: string dataSet?: Record selectable?: boolean -} - -const fontFamilyStyle = { - fontFamily: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif', -} +} & ( + | { + emoji: true + children: StringChild + } + | { + emoji?: false + children: TextProps['children'] + } + ) export function Text({ type = 'md', children, + emoji, lineHeight, style, title, @@ -35,6 +48,18 @@ export function Text({ const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined const {fonts} = useAlf() + if (IS_DEV) { + if (!emoji && childHasEmoji(children)) { + logger.warn( + `Text: emoji detected but emoji not enabled: "${children}"\n\nPlease add '`, + ) + } + + if (emoji && !childIsString(children)) { + logger.error('Text: when , children can only be strings.') + } + } + if (selectable && isIOS) { const flattened = StyleSheet.flatten([ s.black, @@ -58,7 +83,7 @@ export function Text({ selectable={selectable} uiTextView {...props}> - {children} + {isIOS && emoji ? renderChildrenWithEmoji(children) : children} ) } @@ -66,7 +91,6 @@ export function Text({ const flattened = StyleSheet.flatten([ s.black, typography, - isWeb && fontFamilyStyle, lineHeightStyle, style, ]) @@ -87,7 +111,7 @@ export function Text({ dataSet={Object.assign({tooltip: title}, dataSet || {})} selectable={selectable} {...props}> - {children} + {isIOS && emoji ? renderChildrenWithEmoji(children) : children} ) } diff --git a/src/view/com/util/text/ThemedText.tsx b/src/view/com/util/text/ThemedText.tsx deleted file mode 100644 index 2844d273c..000000000 --- a/src/view/com/util/text/ThemedText.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react' -import {CustomTextProps, Text} from './Text' -import {usePalette} from 'lib/hooks/usePalette' -import {addStyle} from 'lib/styles' - -export type ThemedTextProps = CustomTextProps & { - fg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light' - bg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light' - border?: 'default' | 'dark' | 'error' | 'inverted' | 'inverted-dark' - lineHeight?: number -} - -export function ThemedText({ - fg, - bg, - border, - style, - children, - ...props -}: React.PropsWithChildren) { - const pal = usePalette('default') - const palInverted = usePalette('inverted') - const palError = usePalette('error') - switch (fg) { - case 'default': - style = addStyle(style, pal.text) - break - case 'light': - style = addStyle(style, pal.textLight) - break - case 'error': - style = addStyle(style, {color: palError.colors.background}) - break - case 'inverted': - style = addStyle(style, palInverted.text) - break - case 'inverted-light': - style = addStyle(style, palInverted.textLight) - break - } - switch (bg) { - case 'default': - style = addStyle(style, pal.view) - break - case 'light': - style = addStyle(style, pal.viewLight) - break - case 'error': - style = addStyle(style, palError.view) - break - case 'inverted': - style = addStyle(style, palInverted.view) - break - case 'inverted-light': - style = addStyle(style, palInverted.viewLight) - break - } - switch (border) { - case 'default': - style = addStyle(style, pal.border) - break - case 'dark': - style = addStyle(style, pal.borderDark) - break - case 'error': - style = addStyle(style, palError.border) - break - case 'inverted': - style = addStyle(style, palInverted.border) - break - case 'inverted-dark': - style = addStyle(style, palInverted.borderDark) - break - } - return ( - - {children} - - ) -} diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index e1e412648..07d762c0f 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -959,6 +959,7 @@ function SearchHistory({ accessibilityIgnoresInvertColors /> {profile.displayName || profile.handle} diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index 1ba2d3f3d..b43dbcce3 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -16,19 +16,19 @@ import {useLingui} from '@lingui/react' import {StackActions, useNavigation} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' +import {usePalette} from '#/lib/hooks/usePalette' import {makeProfileLink} from '#/lib/routes/links' +import {NavigationProp} from '#/lib/routes/types' import {sanitizeDisplayName} from '#/lib/strings/display-names' import {sanitizeHandle} from '#/lib/strings/handles' import {s} from '#/lib/styles' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' -import {usePalette} from 'lib/hooks/usePalette' -import {NavigationProp} from 'lib/routes/types' -import {precacheProfile} from 'state/queries/profile' +import {precacheProfile} from '#/state/queries/profile' +import {SearchInput} from '#/view/com/util/forms/SearchInput' import {Link} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' import {UserAvatar} from '#/view/com/util/UserAvatar' -import {SearchInput} from 'view/com/util/forms/SearchInput' -import {Text} from 'view/com/util/text/Text' import {atoms as a} from '#/alf' let SearchLinkCard = ({ @@ -126,6 +126,7 @@ let SearchProfileCard = ({ />