Long lines in code blocks should not wrap issue (#7497) is fixed

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js

@@ -0,0 +1,29 @@
+import React, {forwardRef} from 'react';
+import {ScrollView} from 'react-native-gesture-handler';
+import {View} from 'react-native';
+import _ from 'underscore';
+import htmlRendererPropTypes from '../htmlRendererPropTypes';
+
+class BasePreRenderer extends React.Component {
+    render() {
+        const TDefaultRenderer = this.props.TDefaultRenderer;
+        const defaultRendererProps = _.omit(this.props, ['TDefaultRenderer']);
+        return (
+            <ScrollView ref={this.props.innerRef} horizontal>
+                <View onStartShouldSetResponder={() => true}>
+                    <TDefaultRenderer
+                     // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...defaultRendererProps}
+                    />
+                </View>
+            </ScrollView>
+        );
+    }
+}
+
+BasePreRenderer.propTypes = htmlRendererPropTypes;
+
+export default forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BasePreRenderer {...props} innerRef={ref} />
+));

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import withLocalize from '../../../withLocalize';
+import htmlRendererPropTypes from '../htmlRendererPropTypes';
+import BasePreRenderer from './BasePreRenderer';
+
+class PreRenderer extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.wheelEvent = this.wheelEvent.bind(this);
+        this.ref = React.createRef(null);
+    }
+
+    componentDidMount() {
+        this.ref.current
+            .getScrollableNode()
+            .addEventListener('wheel', this.wheelEvent);
+    }
+
+    componentWillUnmount() {
+        this.ref.getScrollableNode()
+            .removeEventListener('wheel', this.wheelEvent);
+    }
+
+    wheelEvent(event) {
+        const node = this.ref.current.getScrollableNode();
+        const checkOverflow = (node.scrollHeight / node.scrollWidth) !== (node.offsetHeight / node.offsetWidth);
+
+        if ((event.currentTarget === node) && checkOverflow) {
+            node.scrollLeft += event.deltaX;
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    render() {
+        return (
+            <BasePreRenderer
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+                ref={this.ref}
+            />
+        );
+    }
+}
+
+PreRenderer.propTypes = htmlRendererPropTypes;
+PreRenderer.displayName = 'PreRenderer';
+
+export default withLocalize(PreRenderer);

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.native.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import withLocalize from '../../../withLocalize';
+import htmlRendererPropTypes from '../htmlRendererPropTypes';
+import BasePreRenderer from './BasePreRenderer';
+
+const PreRenderer = props => (
+    <BasePreRenderer
+    // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    />
+);
+
+PreRenderer.propTypes = htmlRendererPropTypes;
+PreRenderer.displayName = 'PreRenderer';
+
+export default withLocalize(PreRenderer);

src/components/HTMLEngineProvider/HTMLRenderers/index.js

@@ -2,6 +2,7 @@ import AnchorRenderer from './AnchorRenderer';
 import CodeRenderer from './CodeRenderer';
 import EditedRenderer from './EditedRenderer';
 import ImageRenderer from './ImageRenderer';
+import PreRenderer from './PreRenderer';
 
 /**
  * This collection defines our custom renderers. It is a mapping from HTML tag type to the corresponding component.
@@ -14,4 +15,5 @@ export default {
 
     // Custom tag renderers
     edited: EditedRenderer,
+    pre: PreRenderer,
 };

src/components/PressableWithSecondaryInteraction/index.js

@@ -5,6 +5,7 @@ import {LongPressGestureHandler, State} from 'react-native-gesture-handler';
 import SelectionScraper from '../../libs/SelectionScraper';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import styles from '../../styles/styles';
+import hasHoverSupport from '../../libs/hasHoverSupport';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked.
@@ -31,7 +32,7 @@ class PressableWithSecondaryInteraction extends Component {
      * @param {Object} e
      */
     callSecondaryInteractionWithMappedEvent(e) {
-        if (e.nativeEvent.state !== State.ACTIVE) {
+        if ((e.nativeEvent.state !== State.ACTIVE) || hasHoverSupport()) {
             return;
         }
 
@@ -73,7 +74,7 @@ class PressableWithSecondaryInteraction extends Component {
                     onPressOut={this.props.onPressOut}
                     onPress={this.props.onPress}
                     ref={el => this.pressableRef = el}
-                // eslint-disable-next-line react/jsx-props-no-spreading
+                    // eslint-disable-next-line react/jsx-props-no-spreading
                     {...defaultPressableProps}
                 >
                     {this.props.children}

src/libs/hasHoverSupport/index.js

@@ -0,0 +1,12 @@
+/**
+ * Allows us to identify whether the platform is hoverable.
+ *
+ * @returns {Boolean}
+ */
+
+import * as Browser from '../Browser';
+
+const hasHoverSupport = () => !Browser.isMobile();
+
+export default hasHoverSupport;
+

src/libs/hasHoverSupport/index.native.js

@@ -0,0 +1,9 @@
+/**
+ * Allows us to identify whether the platform is hoverable.
+ *
+ * @returns {Boolean}
+ */
+
+const hasHoverSupport = () => false;
+
+export default hasHoverSupport;

src/styles/styles.js

@@ -100,8 +100,8 @@ const webViewStyles = {
 
         pre: {
             ...baseCodeTagStyles,
-            paddingTop: 4,
-            paddingBottom: 5,
+            paddingTop: 12,
+            paddingBottom: 12,
             paddingRight: 8,
             paddingLeft: 8,
             fontFamily: fontFamily.MONOSPACE,