From f8a59e10dd347e9187aa4414a0ece04eff3b9bc3 Mon Sep 17 00:00:00 2001 From: Hailey Date: Mon, 8 Jul 2024 10:06:00 -0700 Subject: [PATCH] Fix RTL text rendering for display names (#4747) * header display name rtl support * highlighted post rtl * move `NON_BREAKING_SPACE` to an external constant * rtl support in search dropdown * profile card rtl * old profile card rtl * hover card * wizard list card * new chat * account card * chat header * clean up notifications * just force LTR on meta display name --- src/components/ProfileCard.tsx | 4 +++- src/components/ProfileHoverCard/index.web.tsx | 3 ++- .../StarterPack/Wizard/WizardListCard.tsx | 8 +++++++- src/components/dms/MessagesListHeader.tsx | 7 ++++++- .../dms/dialogs/SearchablePeopleList.tsx | 2 +- src/lib/strings/constants.ts | 1 + src/screens/Profile/Header/DisplayName.tsx | 2 +- src/view/com/notifications/FeedItem.tsx | 9 ++++++--- src/view/com/post-thread/PostThreadItem.tsx | 2 +- src/view/com/profile/ProfileCard.tsx | 2 +- src/view/com/util/PostMeta.tsx | 18 ++++++++---------- src/view/screens/Settings/index.tsx | 3 ++- src/view/shell/desktop/Search.tsx | 3 ++- 13 files changed, 41 insertions(+), 23 deletions(-) create mode 100644 src/lib/strings/constants.ts diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx index 79f1108c..8bc9376e 100644 --- a/src/components/ProfileCard.tsx +++ b/src/components/ProfileCard.tsx @@ -166,7 +166,9 @@ export function NameAndHandle({ return ( - + {name} - + {sanitizeDisplayName( profile.displayName || sanitizeHandle(profile.handle), moderation.ui('displayName'), diff --git a/src/components/StarterPack/Wizard/WizardListCard.tsx b/src/components/StarterPack/Wizard/WizardListCard.tsx index aa1b2cf9..55cf0f02 100644 --- a/src/components/StarterPack/Wizard/WizardListCard.tsx +++ b/src/components/StarterPack/Wizard/WizardListCard.tsx @@ -78,7 +78,13 @@ function WizardListCard({ /> {displayName} diff --git a/src/components/dms/MessagesListHeader.tsx b/src/components/dms/MessagesListHeader.tsx index 8bf673d3..7b9f1a3a 100644 --- a/src/components/dms/MessagesListHeader.tsx +++ b/src/components/dms/MessagesListHeader.tsx @@ -168,7 +168,12 @@ function HeaderReady({ {displayName} diff --git a/src/components/dms/dialogs/SearchablePeopleList.tsx b/src/components/dms/dialogs/SearchablePeopleList.tsx index d92ea683..a13dfe50 100644 --- a/src/components/dms/dialogs/SearchablePeopleList.tsx +++ b/src/components/dms/dialogs/SearchablePeopleList.tsx @@ -395,7 +395,7 @@ function ProfileCard({ /> {displayName} diff --git a/src/lib/strings/constants.ts b/src/lib/strings/constants.ts new file mode 100644 index 00000000..4bce3ac6 --- /dev/null +++ b/src/lib/strings/constants.ts @@ -0,0 +1 @@ +export const NON_BREAKING_SPACE = '\u00A0' diff --git a/src/screens/Profile/Header/DisplayName.tsx b/src/screens/Profile/Header/DisplayName.tsx index c63658a4..955e3d72 100644 --- a/src/screens/Profile/Header/DisplayName.tsx +++ b/src/screens/Profile/Header/DisplayName.tsx @@ -20,7 +20,7 @@ export function ProfileHeaderDisplayName({ + style={[t.atoms.text, a.text_4xl, a.self_start, {fontWeight: '500'}]}> {sanitizeDisplayName( profile.displayName || sanitizeHandle(profile.handle), moderation.ui('displayName'), diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index 1932efbd..d31962ff 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -58,6 +58,7 @@ import {useNavigation} from '@react-navigation/native' import {parseTenorGif} from '#/lib/strings/embed-player' import {logger} from '#/logger' import {NavigationProp} from 'lib/routes/types' +import {forceLTR} from 'lib/strings/bidi' import {DM_SERVICE_HEADERS} from 'state/queries/messages/const' import {useAgent} from 'state/session' import {Button, ButtonText} from '#/components/Button' @@ -274,13 +275,15 @@ let FeedItem = ({ showDmButton={item.type === 'starterpack-joined' || isFollowBack} /> - + diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 0f5350e7..4e6ed27b 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -281,7 +281,7 @@ let PostThreadItemLoaded = ({ {sanitizeDisplayName( diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index 7332d452..d18103f3 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -97,7 +97,7 @@ export function ProfileCard({ {sanitizeDisplayName( diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index aec787e4..95168e8b 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -6,6 +6,8 @@ import {useQueryClient} from '@tanstack/react-query' 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' @@ -32,8 +34,6 @@ interface PostMetaOpts { style?: StyleProp } -const NON_BREAKING_SPACE = '\u00A0' - let PostMeta = (opts: PostMetaOpts): React.ReactNode => { const pal = usePalette('default') const displayName = opts.author.displayName || opts.author.handle @@ -70,14 +70,12 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => { style={[pal.text]} lineHeight={1.2} disableMismatchWarning - text={ - <> - {sanitizeDisplayName( - displayName, - opts.moderation?.ui('displayName'), - )} - - } + text={forceLTR( + sanitizeDisplayName( + displayName, + opts.moderation?.ui('displayName'), + ), + )} href={profileLink} onBeforePress={onBeforePressAuthor} /> diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index 1d8199b0..f59bfb18 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -68,6 +68,7 @@ import {navigate, resetToTab} from '#/Navigation' import {Email2FAToggle} from './Email2FAToggle' import {ExportCarDialog} from './ExportCarDialog' import hairlineWidth = StyleSheet.hairlineWidth +import {atoms as a} from '#/alf' function SettingsAccountCard({ account, @@ -104,7 +105,7 @@ function SettingsAccountCard({ /> - + {profile?.displayName || account.handle} diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index 3829a6c0..d8aa5189 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -30,6 +30,7 @@ import {precacheProfile} from 'state/queries/profile' import {Link} from '#/view/com/util/Link' import {UserAvatar} from '#/view/com/util/UserAvatar' import {Text} from 'view/com/util/text/Text' +import {atoms as a} from '#/alf' let SearchLinkCard = ({ label, @@ -127,7 +128,7 @@ let SearchProfileCard = ({ {sanitizeDisplayName(