diff --git a/package-lock.json b/package-lock.json index e81077acda62..fd07dd1c7a14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,7 @@ "date-fns-tz": "^2.0.0", "dom-serializer": "^0.2.2", "domhandler": "^4.3.0", - "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#45d3b61bb38b4f9a19ddf573ce1e212369b242db", + "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#a8ed0f8e1be3a1e09016e07a74cfd13c85bbc167", "expo": "^50.0.3", "expo-av": "~13.10.4", "expo-image": "1.10.1", @@ -30745,8 +30745,8 @@ }, "node_modules/expensify-common": { "version": "1.0.0", - "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#45d3b61bb38b4f9a19ddf573ce1e212369b242db", - "integrity": "sha512-R1ykTwH3Pdp2sFqE6AL3ihmo4OjLMDEc8mEqQwD9W+yoIDIScT6Wi5ewO5vZUNsyCiKnD+xvNU7I1d9VNRJkXw==", + "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#a8ed0f8e1be3a1e09016e07a74cfd13c85bbc167", + "integrity": "sha512-3d/JHWgeS+LFPRahCAXdLwnBYQk4XUYybtgCm7VsdmMDtCeGUTksLsEY7F1Zqm+ULqZjmCtYwAi8IPKy0fsSOw==", "license": "MIT", "dependencies": { "classnames": "2.5.0", diff --git a/package.json b/package.json index ffb8a80d6837..c3d7bcbced1d 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "date-fns-tz": "^2.0.0", "dom-serializer": "^0.2.2", "domhandler": "^4.3.0", - "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#45d3b61bb38b4f9a19ddf573ce1e212369b242db", + "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#a8ed0f8e1be3a1e09016e07a74cfd13c85bbc167", "expo": "^50.0.3", "expo-av": "~13.10.4", "expo-image": "1.10.1", diff --git a/src/components/EmojiWithTooltip/index.native.tsx b/src/components/EmojiWithTooltip/index.native.tsx deleted file mode 100644 index f6e9ee17fff8..000000000000 --- a/src/components/EmojiWithTooltip/index.native.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import Text from '@components/Text'; -import type EmojiWithTooltipProps from './types'; - -function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) { - return {emojiCode}; -} - -EmojiWithTooltip.displayName = 'EmojiWithTooltip'; - -export default EmojiWithTooltip; diff --git a/src/components/EmojiWithTooltip/index.tsx b/src/components/EmojiWithTooltip/index.tsx deleted file mode 100644 index 594af418cf21..000000000000 --- a/src/components/EmojiWithTooltip/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, {useCallback} from 'react'; -import {View} from 'react-native'; -import Text from '@components/Text'; -import Tooltip from '@components/Tooltip'; -import useThemeStyles from '@hooks/useThemeStyles'; -import * as EmojiUtils from '@libs/EmojiUtils'; -import type EmojiWithTooltipProps from './types'; - -function EmojiWithTooltip({emojiCode, style = {}}: EmojiWithTooltipProps) { - const styles = useThemeStyles(); - const emoji = EmojiUtils.findEmojiByCode(emojiCode); - const emojiName = EmojiUtils.getEmojiName(emoji); - - const emojiTooltipContent = useCallback( - () => ( - - - - {emojiCode} - - - {`:${emojiName}:`} - - ), - [emojiCode, emojiName, styles.alignItemsCenter, styles.ph2, styles.flexRow, styles.emojiTooltipWrapper, styles.fontColorReactionLabel, styles.onlyEmojisText, styles.textMicro], - ); - - return ( - - {emojiCode} - - ); -} - -EmojiWithTooltip.displayName = 'EmojiWithTooltip'; - -export default EmojiWithTooltip; diff --git a/src/components/EmojiWithTooltip/types.ts b/src/components/EmojiWithTooltip/types.ts deleted file mode 100644 index d13c389c0568..000000000000 --- a/src/components/EmojiWithTooltip/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type {StyleProp, TextStyle} from 'react-native'; - -type EmojiWithTooltipProps = { - emojiCode: string; - style?: StyleProp; -}; - -export default EmojiWithTooltipProps; diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx index af04c11de41e..bd4f72c63ec3 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx @@ -70,7 +70,6 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim mixedUAStyles: {whiteSpace: 'pre'}, contentModel: HTMLContentModel.block, }), - emoji: HTMLElementModel.fromCustomModel({tagName: 'emoji', contentModel: HTMLContentModel.textual}), }), [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting, styles.lh16], ); diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx deleted file mode 100644 index 6582e99477a8..000000000000 --- a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx +++ /dev/null @@ -1,19 +0,0 @@ -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) { - const styles = useThemeStyles(); - const style = 'islarge' in tnode.attributes ? styles.onlyEmojisText : {}; - return ( - - ); -} - -EmojiRenderer.displayName = 'EmojiRenderer'; - -export default EmojiRenderer; diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/index.ts b/src/components/HTMLEngineProvider/HTMLRenderers/index.ts index fdd0c89ec5a0..1914bcf4b5ff 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/index.ts +++ b/src/components/HTMLEngineProvider/HTMLRenderers/index.ts @@ -2,7 +2,6 @@ import type {CustomTagRendererRecord} from 'react-native-render-html'; import AnchorRenderer from './AnchorRenderer'; import CodeRenderer from './CodeRenderer'; import EditedRenderer from './EditedRenderer'; -import EmojiRenderer from './EmojiRenderer'; import ImageRenderer from './ImageRenderer'; import MentionHereRenderer from './MentionHereRenderer'; import MentionUserRenderer from './MentionUserRenderer'; @@ -26,7 +25,6 @@ const HTMLEngineProviderComponentList: CustomTagRendererRecord = { /* eslint-disable @typescript-eslint/naming-convention */ 'mention-user': MentionUserRenderer, 'mention-here': MentionHereRenderer, - emoji: EmojiRenderer, 'next-step-email': NextStepEmailRenderer, /* eslint-enable @typescript-eslint/naming-convention */ }; diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts index d8be94735bae..cab0f48d75fd 100644 --- a/src/libs/EmojiUtils.ts +++ b/src/libs/EmojiUtils.ts @@ -38,9 +38,6 @@ const findEmojiByName = (name: string): Emoji => Emojis.emojiNameTable[name]; const findEmojiByCode = (code: string): Emoji => Emojis.emojiCodeTableWithSkinTones[code]; const getEmojiName = (emoji: Emoji, lang: 'en' | 'es' = CONST.LOCALES.DEFAULT): string => { - if (!emoji) { - return ''; - } if (lang === CONST.LOCALES.DEFAULT) { return emoji.name; } diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 70141f241000..998ed9f6616f 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -16,7 +16,6 @@ import CONST from '@src/CONST'; import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage'; import type {Message} from '@src/types/onyx/ReportAction'; import RenderCommentHTML from './RenderCommentHTML'; -import shouldRenderAsText from './shouldRenderAsText'; type TextCommentFragmentProps = { /** The reportAction's source */ @@ -45,15 +44,15 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs const {translate} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); - // If the only difference between fragment.text and fragment.html is
tags and emoji tag - // on native, we render it as text, not as html - // on other device, only render it as text if the only difference is
tag - const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text); - if (!shouldRenderAsText(html, text) && !(containsOnlyEmojis && styleAsDeleted)) { - const editedTag = fragment.isEdited ? `` : ''; - const htmlWithDeletedTag = styleAsDeleted ? `${html}` : html; + // If the only difference between fragment.text and fragment.html is
tags + // we render it as text, not as html. + // This is done to render emojis with line breaks between them as text. + const differByLineBreaksOnly = Str.replaceAll(html, '
', '\n') === text; - const htmlContent = containsOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '', '') : htmlWithDeletedTag; + // Only render HTML if we have html in the fragment + if (!differByLineBreaksOnly) { + const editedTag = fragment.isEdited ? `` : ''; + const htmlContent = styleAsDeleted ? `${html}` : html; const htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent; @@ -65,6 +64,7 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs ); } + const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text); const message = isEmpty(iouMessage) ? text : iouMessage; return ( diff --git a/src/pages/home/report/comment/shouldRenderAsText/index.native.ts b/src/pages/home/report/comment/shouldRenderAsText/index.native.ts deleted file mode 100644 index 7c5758f8720d..000000000000 --- a/src/pages/home/report/comment/shouldRenderAsText/index.native.ts +++ /dev/null @@ -1,12 +0,0 @@ -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, '
', '\n'); - const htmlWithoutEmojiOpenTag = Str.replaceAll(htmlWithoutLineBreak, '', ''); - return Str.replaceAll(htmlWithoutEmojiOpenTag, '', '') === text; -} diff --git a/src/pages/home/report/comment/shouldRenderAsText/index.ts b/src/pages/home/report/comment/shouldRenderAsText/index.ts deleted file mode 100644 index f26f43c528eb..000000000000 --- a/src/pages/home/report/comment/shouldRenderAsText/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -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, '
', '\n') === text; -} diff --git a/src/styles/index.ts b/src/styles/index.ts index bf2e205cf068..405a05cfce78 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -286,10 +286,6 @@ const styles = (theme: ThemeColors) => ...wordBreak.breakWord, ...spacing.pr4, }, - emojiTooltipWrapper: { - ...spacing.p2, - borderRadius: 8, - }, mentionSuggestionsAvatarContainer: { width: 24,