Merge pull request #8790 from orkunkarakus/fix/7497-LongLinesInCode

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

Author: NikkiWines

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

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

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

@@ -0,0 +1,55 @@
+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.scrollNode = this.scrollNode.bind(this);
+    }
+
+    componentDidMount() {
+        if (!this.ref) {
+            return;
+        }
+        this.ref.getScrollableNode()
+            .addEventListener('wheel', this.scrollNode);
+    }
+
+    componentWillUnmount() {
+        this.ref.getScrollableNode()
+            .removeEventListener('wheel', this.scrollNode);
+    }
+
+    /**
+     * Manually scrolls the code block if code block horizontal scrollable, then prevents the event from being passed up to the parent.
+     * @param {Object} event native event
+     */
+    scrollNode(event) {
+        const node = this.ref.getScrollableNode();
+        const horizontalOverflow = node.scrollWidth > node.offsetWidth;
+
+        if ((event.currentTarget === node) && horizontalOverflow) {
+            node.scrollLeft += event.deltaX;
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    render() {
+        return (
+            <BasePreRenderer
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+                ref={el => this.ref = el}
+            />
+        );
+    }
+}
+
+PreRenderer.propTypes = htmlRendererPropTypes;
+PreRenderer.displayName = 'PreRenderer';
+
+export default withLocalize(PreRenderer);

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import withLocalize from '../../../withLocalize';
+import htmlRendererPropTypes from '../htmlRendererPropTypes';
+import BasePreRenderer from './BasePreRenderer';
+
+const PreRenderer = props => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <BasePreRenderer {...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,