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,