Fix URL rendering

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js

@@ -32,16 +32,17 @@ const BaseAnchorForCommentsOnly = (props) => {
             )
             : (
                 <PressableWithSecondaryInteraction
+                    inline
                     onSecondaryInteraction={
-                            (event) => {
-                                showContextMenu(
-                                    CONTEXT_MENU_TYPES.LINK,
-                                    event,
-                                    props.href,
-                                    lodashGet(linkRef, 'current'),
-                                );
-                            }
+                        (event) => {
+                            showContextMenu(
+                                CONTEXT_MENU_TYPES.LINK,
+                                event,
+                                props.href,
+                                lodashGet(linkRef, 'current'),
+                            );
                         }
+                    }
                 >
                     <Text
                         ref={el => linkRef = el}

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js

@@ -35,16 +35,17 @@ const BaseAnchorForCommentsOnly = (props) => {
             )
             : (
                 <PressableWithSecondaryInteraction
+                    inline
                     onSecondaryInteraction={
-                (event) => {
-                    showContextMenu(
-                        CONTEXT_MENU_TYPES.LINK,
-                        event,
-                        props.href,
-                        lodashGet(linkRef, 'current'),
-                    );
-                }
-            }
+                        (event) => {
+                            showContextMenu(
+                                CONTEXT_MENU_TYPES.LINK,
+                                event,
+                                props.href,
+                                lodashGet(linkRef, 'current'),
+                            );
+                        }
+                    }
                     onPress={() => Linking.openURL(props.href)}
                 >
                     <Text

src/components/PressableWithSecondaryInteraction/index.android.js

@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import {Pressable, Platform} from 'react-native';
+import {Pressable, Platform, Text as RNText} from 'react-native';
 import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes';
 
 /**
@@ -31,19 +31,22 @@ function handleLongPress(event, props) {
  * @param {Object} props
  * @returns {React.Component}
  */
-const PressableWithSecondaryInteraction = props => (
-    <Pressable
-        ref={props.forwardedRef}
-        onPress={props.onPress}
-        onPressIn={props.onPressIn}
-        onLongPress={event => handleLongPress(event, props)}
-        onPressOut={props.onPressOut}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...(_.omit(props, 'onLongPress'))}
-    >
-        {props.children}
-    </Pressable>
-);
+const PressableWithSecondaryInteraction = (props) => {
+    const Node = props.inline ? RNText : Pressable;
+    return (
+        <Node
+            ref={props.forwardedRef}
+            onPress={props.onPress}
+            onPressIn={props.onPressIn}
+            onLongPress={event => handleLongPress(event, props)}
+            onPressOut={props.onPressOut}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...(_.omit(props, 'onLongPress'))}
+        >
+            {props.children}
+        </Node>
+    );
+};
 
 PressableWithSecondaryInteraction.propTypes = propTypes;
 PressableWithSecondaryInteraction.defaultProps = defaultProps;

src/components/PressableWithSecondaryInteraction/index.ios.js

@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import {Pressable} from 'react-native';
+import {Pressable, Text as RNText} from 'react-native';
 import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes';
 
 /**
@@ -10,25 +10,28 @@ import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTy
  * @param {Object} props
  * @returns {React.Component}
  */
-const PressableWithSecondaryInteraction = props => (
-    <Pressable
-        ref={props.forwardedRef}
-        onPress={props.onPress}
-        onPressIn={props.onPressIn}
-        onLongPress={(e) => {
-            e.preventDefault();
-            ReactNativeHapticFeedback.trigger('selection', {
-                enableVibrateFallback: true,
-            });
-            props.onSecondaryInteraction(e);
-        }}
-        onPressOut={props.onPressOut}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...(_.omit(props, 'onLongPress'))}
-    >
-        {props.children}
-    </Pressable>
-);
+const PressableWithSecondaryInteraction = (props) => {
+    const Node = props.inline ? RNText : Pressable;
+    return (
+        <Node
+            ref={props.forwardedRef}
+            onPress={props.onPress}
+            onPressIn={props.onPressIn}
+            onLongPress={(e) => {
+                e.preventDefault();
+                ReactNativeHapticFeedback.trigger('selection', {
+                    enableVibrateFallback: true,
+                });
+                props.onSecondaryInteraction(e);
+            }}
+            onPressOut={props.onPressOut}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...(_.omit(props, 'onLongPress'))}
+        >
+            {props.children}
+        </Node>
+    );
+};
 
 PressableWithSecondaryInteraction.propTypes = propTypes;
 PressableWithSecondaryInteraction.defaultProps = defaultProps;

src/components/PressableWithSecondaryInteraction/index.js

@@ -2,6 +2,7 @@ import _ from 'underscore';
 import React, {Component} from 'react';
 import {Pressable} from 'react-native';
 import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes';
+import styles from '../../styles/styles';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked.
@@ -39,10 +40,12 @@ class PressableWithSecondaryInteraction extends Component {
 
     render() {
         const defaultPressableProps = _.omit(this.props, ['onSecondaryInteraction', 'children', 'onLongPress']);
+
+        // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
         return (
             <Pressable
+                style={this.props.inline && styles.dInline}
                 onPressIn={this.props.onPressIn}
-                delayLongPress={200}
                 onLongPress={this.props.onSecondaryInteraction}
                 onPressOut={this.props.onPressOut}
                 onPress={this.props.onPress}

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -21,13 +21,22 @@ const propTypes = {
 
     /** Prevent the default ContextMenu on web/Desktop */
     preventDefaultContentMenu: PropTypes.bool,
+
+    /** Use Text instead of Presable to create inline layout.
+     * It has few limitations in comparison to Pressable.
+     *
+     * - No support for delayLongPress.
+     * - No support for pressIn and pressOut events.
+     */
+    inline: PropTypes.bool,
 };
 
 const defaultProps = {
     forwardedRef: () => {},
     onPressIn: () => {},
     onPressOut: () => {},
     preventDefaultContentMenu: true,
+    inline: false,
 };
 
 export {propTypes, defaultProps};