diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index e753218e8406..1137b3913f77 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -29,6 +29,9 @@ function useMarkdownStyle(): MarkdownStyle { color: theme.text, backgroundColor: 'transparent', }, + emoji: { + fontSize: 19, + }, pre: { fontFamily: FontUtils.fontFamily.platform.MONOSPACE, color: theme.text, diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts index 987208f52711..79cf9861a86e 100644 --- a/src/libs/EmojiUtils.ts +++ b/src/libs/EmojiUtils.ts @@ -125,31 +125,14 @@ function isFirstLetterEmoji(message: string): boolean { * Validates that this message contains only emojis */ function containsOnlyEmojis(message: string): boolean { - const trimmedMessage = Str.replaceAll(message.replace(/ /g, ''), '\n', ''); - const match = trimmedMessage.match(CONST.REGEX.EMOJIS); - - if (!match) { + if (!message) { return false; } + const splittedMessage = message.split(' '); + // @ts-expect-error -- comments contain only BMP characters and emojis so codePointAt will return number + const messageWithoutEmojis = splittedMessage.filter((char: string) => char && char.codePointAt(0) <= 0xffff); - const codes = []; - match.map((emoji) => - getEmojiUnicode(emoji) - .split(' ') - .map((code) => { - if (!(CONST.INVISIBLE_CODEPOINTS as readonly string[]).includes(code)) { - codes.push(code); - } - return code; - }), - ); - - // Emojis are stored as multiple characters, so we're using spread operator - // to iterate over the actual emojis, not just characters that compose them - const messageCodes = [...trimmedMessage] - .map((char) => getEmojiUnicode(char)) - .filter((string) => string.length > 0 && !(CONST.INVISIBLE_CODEPOINTS as readonly string[]).includes(string)); - return codes.length === messageCodes.length; + return messageWithoutEmojis.length === 0; } /** @@ -665,7 +648,7 @@ const splitTextWithEmojis = (text: string): string[] => { // eslint-disable-next-line no-continue -- skip rest of the checks in current iteration continue; } - // @ts-expect-error -- ensured in 1st 'if' that object won't be undefined + // @ts-expect-error -- comments contain only BMP characters and emojis so codePointAt will return number if (tmpResult[j].codePointAt(0) <= 0xffff) { // is BMP character tmpString += tmpResult[j]; diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 5015ec899210..21ff2b99d208 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -82,22 +82,23 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so {CONST.REGEX.EMOJIS.test(message) ? ( ) : ( <> {message} @@ -106,7 +107,7 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so {fragment.isEdited && ( <> {' '} diff --git a/src/pages/home/report/comment/TextWithEmojiFragment.tsx b/src/pages/home/report/comment/TextWithEmojiFragment.tsx index 34909f65c8ba..eb716569076b 100644 --- a/src/pages/home/report/comment/TextWithEmojiFragment.tsx +++ b/src/pages/home/report/comment/TextWithEmojiFragment.tsx @@ -1,6 +1,5 @@ import React from 'react'; import type {StyleProp, TextStyle} from 'react-native'; -import {View} from 'react-native'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; @@ -12,24 +11,24 @@ import CONST from '@src/CONST'; type ComponentProps = { text: string; - textContainsOnlyEmojis: boolean; passedStyles: StyleProp; styleAsDeleted?: boolean; styleAsMuted?: boolean; isSmallScreenWidth?: boolean; isEdited?: boolean; + emojisOnly?: boolean; }; -function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited}: ComponentProps) { +function TextWithEmojiFragment({text, passedStyles, styleAsDeleted, styleAsMuted, isSmallScreenWidth, isEdited, emojisOnly}: ComponentProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const theme = useTheme(); const processedTextArray = splitTextWithEmojis(text); return ( - + <> {processedTextArray.map((word: string) => CONST.REGEX.EMOJIS.test(word) ? ( - {word} + {word} ) : ( {word} @@ -48,7 +48,7 @@ function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styl {isEdited && ( <> {' '} @@ -62,7 +62,7 @@ function TextWithEmojiFragment({text, textContainsOnlyEmojis, passedStyles, styl )} - + ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index f924bedfd4e8..f4a41cc366ce 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1574,8 +1574,6 @@ const styles = (theme: ThemeColors) => emojisAndTextWrapper: { flexDirection: 'row', alignItems: 'center', - flexWrap: 'wrap', - width: '100%', }, onlyEmojisText: { @@ -1591,6 +1589,10 @@ const styles = (theme: ThemeColors) => lineHeight: variables.fontSizeOnlyEmojisHeight, }, + enhancedLineHeight: { + lineHeight: 23, + }, + createMenuPositionSidebar: (windowHeight: number) => ({ horizontal: 18,