Reattempt to fix multiline comment link show pointer cursor in the empty space line

src/components/AnchorForAttachmentsOnly/index.native.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
 import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
-import * as StyleUtils from '../../styles/StyleUtils';
 import styles from '../../styles/styles';
 
 const AnchorForAttachmentsOnly = (props) => (
     <BaseAnchorForAttachmentsOnly
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
-        style={[...StyleUtils.parseStyleAsArray(props.style), styles.mw100]}
+        style={styles.mw100}
     />
 );
 

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {StyleSheet} from 'react-native';
+import {View, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
@@ -11,6 +11,7 @@ import * as ContextMenuActions from '../../pages/home/report/ContextMenu/Context
 import Tooltip from '../Tooltip';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import styles from '../../styles/styles';
+import stylePropTypes from '../../styles/stylePropTypes';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import {propTypes as anchorForCommentsOnlyPropTypes, defaultProps as anchorForCommentsOnlyDefaultProps} from './anchorForCommentsOnlyPropTypes';
 
@@ -21,13 +22,16 @@ const propTypes = {
     /** Press out handler for the link */
     onPressOut: PropTypes.func,
 
+    containerStyles: stylePropTypes,
+
     ...anchorForCommentsOnlyPropTypes,
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     onPressIn: undefined,
     onPressOut: undefined,
+    containerStyles: {},
     ...anchorForCommentsOnlyDefaultProps,
 };
 
@@ -47,39 +51,41 @@ const BaseAnchorForCommentsOnly = (props) => {
     const isEmail = Str.isValidEmailMarkdown(props.href.replace(/mailto:/i, ''));
 
     return (
-        <PressableWithSecondaryInteraction
-            inline
-            onSecondaryInteraction={(event) => {
-                ReportActionContextMenu.showContextMenu(
-                    isEmail ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
-                    event,
-                    props.href,
-                    lodashGet(linkRef, 'current'),
-                );
-            }}
-            onPress={linkProps.onPress}
-            onPressIn={props.onPressIn}
-            onPressOut={props.onPressOut}
-        >
-            <Tooltip text={props.href}>
-                <Text
-                    ref={(el) => (linkRef = el)}
-                    style={StyleSheet.flatten([props.style, defaultTextStyle])}
-                    accessibilityRole="link"
-                    hrefAttrs={{
-                        rel: props.rel,
-                        target: isEmail ? '_self' : props.target,
-                    }}
-                    href={linkProps.href}
-                    // Add testID so it gets selected as an anchor tag by SelectionScraper
-                    testID="a"
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...rest}
-                >
-                    {props.children}
-                </Text>
-            </Tooltip>
-        </PressableWithSecondaryInteraction>
+        <View style={props.containerStyles}>
+            <PressableWithSecondaryInteraction
+                inline
+                onSecondaryInteraction={(event) => {
+                    ReportActionContextMenu.showContextMenu(
+                        isEmail ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
+                        event,
+                        props.href,
+                        lodashGet(linkRef, 'current'),
+                    );
+                }}
+                onPress={linkProps.onPress}
+                onPressIn={props.onPressIn}
+                onPressOut={props.onPressOut}
+            >
+                <Tooltip text={props.href}>
+                    <Text
+                        ref={(el) => (linkRef = el)}
+                        style={StyleSheet.flatten([props.style, defaultTextStyle])}
+                        accessibilityRole="link"
+                        hrefAttrs={{
+                            rel: props.rel,
+                            target: isEmail ? '_self' : props.target,
+                        }}
+                        href={linkProps.href}
+                        // Add testID so it gets selected as an anchor tag by SelectionScraper
+                        testID="a"
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...rest}
+                    >
+                        {props.children}
+                    </Text>
+                </Tooltip>
+            </PressableWithSecondaryInteraction>
+        </View>
     );
 };
 

src/components/AnchorForCommentsOnly/index.js

@@ -3,13 +3,19 @@ import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropType
 import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import ControlSelection from '../../libs/ControlSelection';
+import styles from '../../styles/styles';
 
 const AnchorForCommentsOnly = (props) => (
     <BaseAnchorForCommentsOnly
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
         onPressOut={() => ControlSelection.unblock()}
+        // HTML renderer root view display is flex. Using flex will force all child elements
+        // to be block elements even when they have display inline added to them.
+        // This will affect elements like <a> which are inline by default.
+        // Setting display block to the container view will solve that.
+        containerStyles={styles.dBlock}
     />
 );
 

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -6,7 +6,6 @@ import htmlRenderers from './HTMLRenderers';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import styles from '../../styles/styles';
 import fontFamily from '../../styles/fontFamily';
-import defaultViewProps from './defaultViewProps';
 
 const propTypes = {
     /** Whether text elements should be selectable */
@@ -49,6 +48,8 @@ const customHTMLElementModels = {
     'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
 };
 
+const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
+
 // We are using the explicit composite architecture for performance gains.
 // Configuration for RenderHTML is handled in a top-level component providing
 // context to RenderHTMLSource components. See https://git.io/JRcZb

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

@@ -79,7 +79,6 @@ const AnchorRenderer = (props) => {
     if (isAttachment) {
         return (
             <AnchorForAttachmentsOnly
-                style={styles.alignItemsStart}
                 source={tryResolveUrlFromApiRoot(attrHref)}
                 displayName={displayName}
             />

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -60,7 +60,7 @@ const ImageRenderer = (props) => {
                 >
                     {({show}) => (
                         <PressableWithoutFocus
-                            styles={[styles.noOutline, styles.alignItemsStart]}
+                            style={styles.noOutline}
                             onPress={show}
                             onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
                         >