-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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
inserted zero width character for emoji selection prevention #29686
Changes from 3 commits
b259693
8ad8f96
49144c1
2ad6677
2f8dd62
816fa87
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,6 +18,7 @@ import CONST from '../../../CONST'; | |
import editedLabelStyles from '../../../styles/editedLabelStyles'; | ||
import UserDetailsTooltip from '../../../components/UserDetailsTooltip'; | ||
import avatarPropTypes from '../../../components/avatarPropTypes'; | ||
import * as Browser from '../../../libs/Browser'; | ||
|
||
const propTypes = { | ||
/** Users accountID */ | ||
|
@@ -66,6 +67,9 @@ const propTypes = { | |
|
||
/** localization props */ | ||
...withLocalizePropTypes, | ||
|
||
/** Should the comment have the appearance of being grouped with the previous comment? */ | ||
displayAsGroup: PropTypes.bool, | ||
}; | ||
|
||
const defaultProps = { | ||
|
@@ -82,9 +86,28 @@ const defaultProps = { | |
delegateAccountID: 0, | ||
actorIcon: {}, | ||
isThreadParentMessage: false, | ||
displayAsGroup: false, | ||
}; | ||
|
||
function ReportActionItemFragment(props) { | ||
/** | ||
* Checks text element for presence of emoji as first characyter | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. typo in character word 'characyter' |
||
* and insert Zero-Width character to avoid selection issue | ||
* mentioned here https://github.com/Expensify/App/issues/29021 | ||
* | ||
* @param {String} text | ||
* @param {Boolean} displayAsGroup | ||
* @returns {ReactNode | null} Text component with zero width character | ||
*/ | ||
|
||
function checkForEmojiForSelection(text, displayAsGroup) { | ||
const firstLetterIsEmoji = EmojiUtils.firstLetterIsEmoji(text); | ||
if (firstLetterIsEmoji && !displayAsGroup && !Browser.isMobile()) { | ||
return <Text>​</Text>; | ||
} | ||
return null; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would prefer this as an arrow function There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done, please check. |
||
|
||
switch (props.fragment.type) { | ||
case 'COMMENT': { | ||
const {html, text} = props.fragment; | ||
|
@@ -116,6 +139,7 @@ function ReportActionItemFragment(props) { | |
|
||
return ( | ||
<Text style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}> | ||
{checkForEmojiForSelection(text, props.displayAsGroup)} | ||
<Text | ||
selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth} | ||
style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style, isPendingDelete ? styles.offlineFeedback.deleted : undefined]} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would prefer this as
isFirstLetterEmoji
orisFirstCharacterEmoji
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done, please check.