From d0aae8b4ccdf7870c11a8daa51b0b6386cd6fcd3 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Mon, 29 Jul 2024 10:28:51 +0200 Subject: [PATCH 1/4] Increase emoji size within text messages on web --- .../HTMLRenderers/EmojiRenderer.tsx | 15 +++++++++++++-- .../home/report/comment/TextCommentFragment.tsx | 12 ++++++++++-- src/styles/index.ts | 3 +++ 3 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx index 9ad138444b9c..74b4e433dbaa 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx @@ -1,11 +1,22 @@ -import React from 'react'; +import React, {useMemo} 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 : {}; + const style = useMemo(() => { + if ('islarge' in tnode.attributes) { + return styles.onlyEmojisText; + } + + if ('ismedium' in tnode.attributes) { + return [styles.emojisWithinText, styles.verticalAlignMiddle]; + } + + return null; + }, [tnode.attributes, styles]); + return ( tags and emoji tag // on native, we render it as text, not as html @@ -57,7 +59,14 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so const editedTag = fragment?.isEdited ? `` : ''; const htmlWithDeletedTag = styleAsDeleted ? `${html}` : html; - const htmlContent = doesTextContainOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '', '') : htmlWithDeletedTag; + let htmlContent = doesTextContainOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '', '') : htmlWithDeletedTag; + + if (doesTextContainOnlyEmojis) { + htmlContent = Str.replaceAll(htmlWithDeletedTag, '', ''); + } else if (doesTextContainEmojis) { + htmlContent = Str.replaceAll(htmlWithDeletedTag, '', ''); + } + let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent; if (styleAsMuted) { @@ -73,7 +82,6 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so } const message = isEmpty(iouMessage) ? text : iouMessage; - const emojisRegex = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g')); return ( diff --git a/src/styles/index.ts b/src/styles/index.ts index 3f0173ddf446..668bd51d0a91 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -364,6 +364,9 @@ const styles = (theme: ThemeColors) => verticalAlignTop: { verticalAlign: 'top', }, + verticalAlignMiddle: { + verticalAlign: 'middle', + }, lineHeightLarge: { lineHeight: variables.lineHeightLarge, }, From 5af5830e47496d1f0f8249ae6eb27dc7f09b38d8 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Mon, 29 Jul 2024 11:22:12 +0200 Subject: [PATCH 2/4] Minor improvement --- src/pages/home/report/comment/TextCommentFragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 87abc25f1730..600d45f6a6a2 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -59,7 +59,7 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so const editedTag = fragment?.isEdited ? `` : ''; const htmlWithDeletedTag = styleAsDeleted ? `${html}` : html; - let htmlContent = doesTextContainOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '', '') : htmlWithDeletedTag; + let htmlContent = htmlWithDeletedTag; if (doesTextContainOnlyEmojis) { htmlContent = Str.replaceAll(htmlWithDeletedTag, '', ''); From 1e27458b629ae83270916e7f3145d067021f9aba Mon Sep 17 00:00:00 2001 From: VickyStash Date: Mon, 29 Jul 2024 13:00:27 +0200 Subject: [PATCH 3/4] Use default line height --- .../HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx | 2 +- src/styles/index.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx index 74b4e433dbaa..8f96238573ee 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/EmojiRenderer.tsx @@ -11,7 +11,7 @@ function EmojiRenderer({tnode}: CustomRendererProps) { } if ('ismedium' in tnode.attributes) { - return [styles.emojisWithinText, styles.verticalAlignMiddle]; + return [styles.emojisWithinTextFontSize, styles.verticalAlignMiddle]; } return null; diff --git a/src/styles/index.ts b/src/styles/index.ts index 668bd51d0a91..c11192433be4 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1716,6 +1716,10 @@ const styles = (theme: ThemeColors) => lineHeight: variables.lineHeightEmojisWithTextComposer, }, + emojisWithinTextFontSize: { + fontSize: variables.fontSizeEmojisWithinText, + }, + emojisWithinText: { fontSize: variables.fontSizeEmojisWithinText, lineHeight: variables.lineHeightComment, From bd428bdc7d78acd1bd98257920893441f11d03d6 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Mon, 29 Jul 2024 18:22:26 +0200 Subject: [PATCH 4/4] Improve emojis display --- src/hooks/useMarkdownStyle.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index b3b2b33ae71a..ce6fdc97e0ea 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -35,6 +35,7 @@ function useMarkdownStyle(doesInputContainOnlyEmojis?: boolean, excludeStyles: A }, emoji: { fontSize: doesInputContainOnlyEmojis ? variables.fontSizeEmojisOnlyComposer : variables.fontSizeEmojisWithinText, + lineHeight: doesInputContainOnlyEmojis ? variables.lineHeightEmojisOnlyComposer : variables.fontSizeEmojisWithinText, }, blockquote: { borderColor: theme.border,