Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix emoji’s are cut in half when in Edit message mode #42615

Merged
merged 7 commits into from
May 29, 2024
Merged

Fix emoji’s are cut in half when in Edit message mode #42615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4c5a96b
apply the emoji only line height to composer component
bernhardoj May 25, 2024
40d9bfb
fix lint
bernhardoj May 25, 2024
d38a589
fix lint
bernhardoj May 25, 2024
f043870
Merge branch 'main' into fix/42530-emoji-cut-in-edit-composer
bernhardoj May 28, 2024
855ee82
Merge branch 'main' into fix/42530-emoji-cut-in-edit-composer
bernhardoj May 29, 2024
8f83493
refactor the code
bernhardoj May 29, 2024
2b25e7f
remove unused import
bernhardoj May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/Composer/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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();
Expand Down Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion src/components/Composer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 (
Expand Down
8 changes: 1 addition & 7 deletions ...pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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]}>
Expand All @@ -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}
Expand Down
Loading