merge-conflict.txt

function ReportActionItemFragment(props) {
<<<<<<< HEAD
    const fragment = props.fragment;

    switch (fragment.type) {
=======
    /**
     * Checks text element for presence of emoji as first character
     * and insert Zero-Width character to avoid selection issue
     * mentioned here https://github.com/Expensify/App/issues/29021
     *
     * @param {String} text
     * @param {Boolean} displayAsGroup
     * @returns {ReactNode | null} Text component with zero width character
     */

    const checkForEmojiForSelection = (text, displayAsGroup) => {
        const firstLetterIsEmoji = EmojiUtils.isFirstLetterEmoji(text);
        if (firstLetterIsEmoji && !displayAsGroup && !Browser.isMobile()) {
            return <Text>&#x200b;</Text>;
        }
        return null;
    };

    switch (props.fragment.type) {
>>>>>>> upstream/main
        case 'COMMENT': {
            const isPendingDelete = props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;

            // Threaded messages display "[Deleted message]" instead of being hidden altogether.
            // While offline we display the previous message with a strikethrough style. Once online we want to
            // immediately display "[Deleted message]" while the delete action is pending.

            if ((!props.network.isOffline && props.isThreadParentMessage && isPendingDelete) || props.fragment.isDeletedParentAction) {
                return <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedMessage')}</comment>`} />;
            }

            // Does the fragment content represent an attachment?
            const isFragmentAttachment = ReportUtils.isReportMessageAttachment(fragment);

            if (isFragmentAttachment) {
                return (
                    <AttachmentCommentFragment
                        source={props.source}
                        html={fragment.html}
                        addExtraMargin={!props.displayAsGroup}
                    />
                );
            }

            return (
<<<<<<< HEAD
                <TextCommentFragment
                    source={props.source}
                    fragment={fragment}
                    styleAsDeleted={isPendingDelete && props.network.isOffline}
                    iouMessage={props.iouMessage}
                    style={props.style}
                />
=======
                <Text style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}>
                    {checkForEmojiForSelection(text, props.displayAsGroup)}
                    <Text
                        selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
                        style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style, isPendingDelete ? styles.offlineFeedback.deleted : undefined]}
                    >
                        {convertToLTR(props.iouMessage || text)}
                    </Text>
                    {Boolean(props.fragment.isEdited) && (
                        <>
                            <Text
                                selectable={false}
                                style={[containsOnlyEmojis ? styles.onlyEmojisTextLineHeight : undefined, styles.userSelectNone]}
                                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                            >
                                {' '}
                            </Text>
                            <Text
                                fontSize={variables.fontSizeSmall}
                                color={themeColors.textSupporting}
                                style={[editedLabelStyles, isPendingDelete ? styles.offlineFeedback.deleted : undefined, ...props.style]}
                            >
                                {props.translate('reportActionCompose.edited')}
                            </Text>
                        </>
                    )}
                </Text>
>>>>>>> upstream/main

// ...rest of the file