From 8883de7880f40f890bf82dbdde849364d418e712 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 8 Jun 2023 12:26:13 +0800
Subject: [PATCH 1/2] fix link is shown in a separate line

---
 .../BaseAnchorForCommentsOnly.js              | 68 +++++++++----------
 src/components/AnchorForCommentsOnly/index.js | 20 +++---
 2 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 21c1ea618841..5588e173aeae 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -51,41 +51,39 @@ const BaseAnchorForCommentsOnly = (props) => {
     const isEmail = Str.isValidEmailMarkdown(props.href.replace(/mailto:/i, ''));
 
     return (
-        <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>
+        <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>
     );
 };
 
diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js
index fd670809e2cf..1de4ea56b3aa 100644
--- a/src/components/AnchorForCommentsOnly/index.js
+++ b/src/components/AnchorForCommentsOnly/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import {View} from 'react-native';
 import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
 import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
@@ -6,17 +7,14 @@ 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]}
-    />
+    <View style={styles.dInline}>
+        <BaseAnchorForCommentsOnly
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={() => ControlSelection.unblock()}
+        />
+    </View>
 );
 
 AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes;

From e37a362c3112fc5bb49a31edafedac71ed779e03 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 8 Jun 2023 12:43:36 +0800
Subject: [PATCH 2/2] remove unused import

---
 .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 5588e173aeae..4a002ef49cf1 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';