Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: unify word breaking in ContextMenuItem for Android mweb and Android native #31116

Merged
merged 8 commits into from
Dec 8, 2023
2 changes: 1 addition & 1 deletion src/components/ContextMenuItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
wrapperStyle={styles.pr9}
success={!isThrottledButtonActive}
description={description}
descriptionTextStyle={styles.breakAll}
descriptionTextStyle={styles.breakWord}
style={StyleUtils.getContextMenuItemStyles(windowWidth)}
isAnonymousAction={isAnonymousAction}
focused={isFocused}
Expand Down
30 changes: 30 additions & 0 deletions src/libs/EmailUtils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* Trims the `mailto:` part from mail link.
* @param mailLink - The `mailto:` link to be trimmed
* @returns The email address
*/
function trimMailTo(mailLink: string) {
return mailLink.replace('mailto:', '');
}

/**
* Prepends a zero-width space (U+200B) character before all `.` and `@` characters
* in the email address to provide explicit line break opportunities for consistent
* breaking across platforms.
*
* Note: as explained [here](https://github.com/Expensify/App/issues/30985#issuecomment-1815379835),
* this only provides opportunities for line breaking (rather than forcing line breaks) that shall
* be used by the platform implementation when there are no other customary rules applicable
* and the text would otherwise overflow.
* @param email - The email address to be sanitized
* @returns The email with inserted line break opportunities
*/
function prefixMailSeparatorsWithBreakOpportunities(email: string) {
return email.replace(
/([.@])/g,
// below: zero-width space (U+200B) character
'​$1',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a zero-width space to email caused it issue when email is copied by user and pasted in other places, especially login page - #34437

);
}

export default {trimMailTo, prefixMailSeparatorsWithBreakOpportunities};
5 changes: 3 additions & 2 deletions src/pages/home/report/ContextMenu/ContextMenuActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import MiniQuickEmojiReactions from '@components/Reactions/MiniQuickEmojiReactio
import QuickEmojiReactions from '@components/Reactions/QuickEmojiReactions';
import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
import Clipboard from '@libs/Clipboard';
import EmailUtils from '@libs/EmailUtils';
import * as Environment from '@libs/Environment/Environment';
import fileDownload from '@libs/fileDownload';
import getAttachmentDetails from '@libs/fileDownload/getAttachmentDetails';
Expand Down Expand Up @@ -243,10 +244,10 @@ export default [
successIcon: Expensicons.Checkmark,
shouldShow: (type) => type === CONTEXT_MENU_TYPES.EMAIL,
onPress: (closePopover, {selection}) => {
Clipboard.setString(selection.replace('mailto:', ''));
Clipboard.setString(EmailUtils.trimMailTo(selection));
hideContextMenu(true, ReportActionComposeFocusManager.focus);
},
getDescription: (selection) => selection.replace('mailto:', ''),
getDescription: (selection) => EmailUtils.prefixMailSeparatorsWithBreakOpportunities(EmailUtils.trimMailTo(selection)),
},
{
isAnonymousAction: true,
Expand Down
Loading