-
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
Handle emoji tooltip and fix regression #37814
Merged
Merged
Changes from 11 commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
d0b8b86
Handle emoji tooltip and fix regression
dukenv0307 e1d3a12
Merge branch 'main' into fix/34307
dukenv0307 1e83a69
Merge branch 'main' into fix/34307
dukenv0307 8b7bb83
Merge branch 'main' into fix/34307
dukenv0307 8ae4e2f
keep the old logic
dukenv0307 f927dc3
merge main
dukenv0307 05b73c6
fix the case emoji inside codeblock
dukenv0307 38f03c9
fix lint
dukenv0307 5ae1ce0
Merge branch 'main' into fix/34307
dukenv0307 877594c
merge main
dukenv0307 ce74d6d
fix new line
dukenv0307 b5498c6
Merge branch 'main' into fix/34307
dukenv0307 ac27db5
rename function
dukenv0307 01b4764
hash commit expensify-common
dukenv0307 89e222f
merge main
dukenv0307 23ec0f0
resolve conflict
dukenv0307 95e6de7
Merge branch 'main' into fix/34307
dukenv0307 c147061
bump new version
dukenv0307 ba37e26
edit the version
dukenv0307 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import Text from '@components/Text'; | ||
import type EmojiWithTooltipProps from './types'; | ||
|
||
function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) { | ||
return <Text style={style}>{emojiCode}</Text>; | ||
} | ||
|
||
EmojiWithTooltip.displayName = 'EmojiWithTooltip'; | ||
|
||
export default EmojiWithTooltip; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import React, {useCallback} from 'react'; | ||
import {View} from 'react-native'; | ||
import Text from '@components/Text'; | ||
import Tooltip from '@components/Tooltip'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
import * as EmojiUtils from '@libs/EmojiUtils'; | ||
import type EmojiWithTooltipProps from './types'; | ||
|
||
function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) { | ||
const {preferredLocale} = useLocalize(); | ||
const styles = useThemeStyles(); | ||
const emoji = EmojiUtils.findEmojiByCode(emojiCode); | ||
const emojiName = EmojiUtils.getEmojiName(emoji, preferredLocale); | ||
|
||
const emojiTooltipContent = useCallback( | ||
() => ( | ||
<View style={[styles.alignItemsCenter, styles.ph2]}> | ||
<View style={[styles.flexRow, styles.emojiTooltipWrapper]}> | ||
<Text | ||
key={emojiCode} | ||
style={styles.onlyEmojisText} | ||
> | ||
{emojiCode} | ||
</Text> | ||
</View> | ||
<Text style={[styles.textMicro, styles.fontColorReactionLabel]}>{`:${emojiName}:`}</Text> | ||
</View> | ||
), | ||
[emojiCode, emojiName, styles.alignItemsCenter, styles.ph2, styles.flexRow, styles.emojiTooltipWrapper, styles.fontColorReactionLabel, styles.onlyEmojisText, styles.textMicro], | ||
); | ||
|
||
return ( | ||
<Tooltip renderTooltipContent={emojiTooltipContent}> | ||
<Text style={[style, styles.cursorDefault]}>{emojiCode}</Text> | ||
</Tooltip> | ||
); | ||
} | ||
|
||
EmojiWithTooltip.displayName = 'EmojiWithTooltip'; | ||
|
||
export default EmojiWithTooltip; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import type {StyleProp, TextStyle} from 'react-native'; | ||
|
||
type EmojiWithTooltipProps = { | ||
emojiCode: string; | ||
style?: StyleProp<TextStyle>; | ||
}; | ||
|
||
export default EmojiWithTooltipProps; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import React from 'react'; | ||
import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html'; | ||
import EmojiWithTooltip from '@components/EmojiWithTooltip'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
|
||
function EmojiRenderer({tnode}: CustomRendererProps<TText | TPhrasing>) { | ||
const styles = useThemeStyles(); | ||
const style = 'islarge' in tnode.attributes ? styles.onlyEmojisText : {}; | ||
return ( | ||
<EmojiWithTooltip | ||
style={[style, styles.cursorDefault]} | ||
emojiCode={'data' in tnode ? tnode.data : ''} | ||
/> | ||
); | ||
} | ||
|
||
EmojiRenderer.displayName = 'EmojiRenderer'; | ||
|
||
export default EmojiRenderer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import type {TDefaultRendererProps} from 'react-native-render-html'; | ||
import type {TTextOrTPhrasing} from './types'; | ||
|
||
// Create a temporary solution to display when there are emojis in the inline code block | ||
// We can remove this after https://github.com/Expensify/App/issues/14676 is fixed | ||
export default function removeEmojiTag(defaultRendererProps: TDefaultRendererProps<TTextOrTPhrasing>): string { | ||
if ('data' in defaultRendererProps.tnode) { | ||
return defaultRendererProps.tnode.data; | ||
} | ||
return defaultRendererProps.tnode.children.map((child) => ('data' in child ? child.data : '')).join(''); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
src/pages/home/report/comment/shouldRenderAsText/index.native.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import Str from 'expensify-common/lib/str'; | ||
|
||
/** | ||
* Whether to render the report action as text | ||
*/ | ||
export default function shouldRenderAsText(html: string, text: string): boolean { | ||
// On native, we render emoji as text to prevent the large emoji is cut off when the action is edited. | ||
// More info: https://github.com/Expensify/App/pull/35838#issuecomment-1964839350 | ||
const htmlWithoutLineBreak = Str.replaceAll(html, '<br />', '\n'); | ||
const htmlWithoutEmojiOpenTag = Str.replaceAll(htmlWithoutLineBreak, '<emoji>', ''); | ||
return Str.replaceAll(htmlWithoutEmojiOpenTag, '</emoji>', '') === text; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import Str from 'expensify-common/lib/str'; | ||
|
||
/** | ||
* Whether to render the report action as text | ||
*/ | ||
export default function shouldRenderAsText(html: string, text: string): boolean { | ||
return Str.replaceAll(html, '<br />', '\n') === text; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
How does this remove the emoji tag?
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.
@fedirjh If
data
field oftnode
isundefined
, it means we have emoji tag inside inline codeblock and the text is divided into children data. So we can get the current text by merging the children data, this is correct because other tags will not appear inside inline codeblock except emoji tag.I think we can rename this function to
getCurrentData
orgetCurrentText
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.
Yes, it makes sense to rename it.
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 updated the name of function.