Merge pull request #42615 from bernhardoj/fix/42530-emoji-cut-in-edit…

…-composer Fix emoji’s are cut in half when in Edit message mode
Expensify · May 29, 2024 · e177a69 · e177a69
2 parents 76e416d + 2b25e7f
commit e177a69
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/src/components/Composer/index.native.tsx b/src/components/Composer/index.native.tsx
@@ -10,6 +10,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
+import * as EmojiUtils from '@libs/EmojiUtils';
 import type {ComposerProps} from './types';
 
 function Composer(
@@ -33,6 +34,7 @@ function Composer(
 ) {
  const textInput = useRef<AnimatedMarkdownTextInputRef | null>(null);
  const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
+ const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]);
  const theme = useTheme();
  const markdownStyle = useMarkdownStyle(value);
  const styles = useThemeStyles();
@@ -65,7 +67,7 @@ function Composer(
  }, [shouldClear, onClear]);
 
  const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]);
- const composerStyle = useMemo(() => StyleSheet.flatten(style), [style]);
+ const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]);
 
  return (
  <RNMarkdownTextInput

diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx
@@ -16,6 +16,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
+import * as EmojiUtils from '@libs/EmojiUtils';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
@@ -74,6 +75,7 @@ function Composer(
  }: ComposerProps,
  ref: ForwardedRef<TextInput | HTMLInputElement>,
 ) {
+ const textContainsOnlyEmojis = useMemo(() => EmojiUtils.containsOnlyEmojis(value ?? ''), [value]);
  const theme = useTheme();
  const styles = useThemeStyles();
  const markdownStyle = useMarkdownStyle(value);
@@ -313,9 +315,10 @@ function Composer(
  scrollStyleMemo,
  StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize),
  isComposerFullSize ? ({height: '100%', maxHeight: 'none' as DimensionValue} as TextStyle) : undefined,
+ textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {},
  ],
 
- [style, styles.rtlTextRenderForSafari, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize],
+ [style, styles.rtlTextRenderForSafari, styles.onlyEmojisTextLineHeight, scrollStyleMemo, StyleUtils, maxLines, isComposerFullSize, textContainsOnlyEmojis],
  );
 
  return (

diff --git a/...pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/...pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
@@ -44,7 +44,6 @@ import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutsi
 import type {ComposerRef, SuggestionsRef} from '@pages/home/report/ReportActionCompose/ReportActionCompose';
 import SilentCommentUpdater from '@pages/home/report/ReportActionCompose/SilentCommentUpdater';
 import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions';
-import variables from '@styles/variables';
 import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
 import * as Report from '@userActions/Report';
@@ -732,11 +731,6 @@ function ComposerWithSuggestions(
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
- const isOnlyEmojiLineHeight = useMemo(() => {
- const isOnlyEmoji = EmojiUtils.containsOnlyEmojis(value);
- return isOnlyEmoji ? {lineHeight: variables.fontSizeOnlyEmojisHeight} : {};
- }, [value]);
-
  return (
  <>
  <View style={[StyleUtils.getContainerComposeStyles(), styles.textInputComposeBorder]}>
@@ -750,7 +744,7 @@ function ComposerWithSuggestions(
  onChangeText={onChangeText}
  onKeyPress={triggerHotkeyActions}
  textAlignVertical="top"
- style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.textInputCollapseCompose, isOnlyEmojiLineHeight]}
+ style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.textInputCollapseCompose]}
  maxLines={maxComposerLines}
  onFocus={onFocus}
  onBlur={onBlur}