App: [$4000] Long lines in code blocks should not wrap

Ok, considering that the @orkunkarakus mentioned that he fixed the scrolling issue without compromising other features, I am fine with @orkunkarakus 's proposal for the issue.

cc: @NikkiWines

🎀 👀 🎀 C+ reviewed

No worries. Thanks for proposing a solution. I know we have a different process but this is necessary for various reasons. If you want to know about the process, see CONTRIBUTING.md.

old post expired, new post here https://www.upwork.com/jobs/~0166d837401b37414a ; bounty raised to $500

Hi!

Proposal

Create new PreRenderer.js for HTMLRenderers. Inside:

const PreRenderer = ({TDefaultRenderer, ...props}) => {
    const scrollRef = useRef(null);
    
    function onScroll(e) {
        scrollRef.current.scrollLeft += e.deltaX;
    }

    useEffect(() => {
        scrollRef.current.addEventListener('wheel', onScroll)
        
        return function cleanup() {
            scrollRef.current.removeEventListener('wheel', onScroll);
        };
    }, []);

    return (
        <ScrollView ref={scrollRef} horizontal style={props.style}>
            <TDefaultRenderer
                {...props}
                style={{ flexGrow: 1, flexShrink: 1, padding: 10 }}
            />
        </ScrollView>
    );
};

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

 14    img: ImageRenderer,
+15    pre: PreRenderer,

https://user-images.githubusercontent.com/51112870/152656522-bbbcc63f-685a-4e00-b772-946eea641450.mov

Issued payment to @orkunkarakus after email bump.

PR is created. @parasharrajat

cc: @NikkiWines

@mateusbra Are you following the discussion above https://github.com/Expensify/App/issues/7497#issuecomment-1073273718 Do you think your proposal covers that issue?

Thanks for sharing the details @orkunkarakus. I will check it.

PROPOSAL

We must create a new Renderer to deal with <pre> tags: https://github.com/Expensify/App/blob/6c53be1ea7a022e8a5e788cc7e7efd62c4573474/src/components/HTMLEngineProvider/HTMLRenderers/index.js#L9-L13 add:

pre: PreRenderer

Create our component PreRenderer.js(I used CodeRenderer.js as a basis for comparison):

import React from 'react';
import _ from 'underscore';
import htmlRendererPropTypes from './htmlRendererPropTypes';
import CodeFence from '../../CodeFence';

const PreRenderer = (props) => {
    const defaultRendererProps = _.omit(props, ['TDefaultRenderer']);

    return (
        <CodeFence
            TDefaultRenderer={props.TDefaultRenderer}
            defaultRendererProps={defaultRendererProps}
            key={props.key}
        />
    );
};

PreRenderer.propTypes = htmlRendererPropTypes;
PreRenderer.displayName = 'PreRenderer';

export default PreRenderer;

Then create our component folder(CodeFence) with index.js:

import React from 'react';
import {ScrollView} from 'react-native';
import codeFencePropTypes from './codeFencePropTypes';

class CodeFence extends React.Component {
    constructor(props) {
        super(props);

        this.onScroll = this.onScroll.bind(this);
    }

    componentDidMount() {
        this.scrollViewRef.addEventListener('wheel', this.onScroll);
    }

    componentWillUnmount() {
        this.scrollViewRef.removeEventListener('wheel', this.onScroll);
    }

    onScroll(e) {
        this.scrollViewRef.scrollLeft += e.deltaX;
    }

    render() {
        const TDefaultRenderer = this.props.TDefaultRenderer;
        return (
            <ScrollView ref={el => this.scrollViewRef = el} horizontal>
                <TDefaultRenderer
                    // eslint-disable-next-line react/jsx-props-no-spreading
                    {...this.props.defaultRendererProps}
                />
            </ScrollView>
        );
    }
}
CodeFence.propTypes = codeFencePropTypes;
CodeFence.displayName = 'CodeFence';
export default CodeFence;

I’ll also create a index.native.js file to cover the applications natively based on this index.js file.

and codeFencePropTypes.js:

import PropTypes from 'prop-types';

const codeFencePropTypes = {
    TDefaultRenderer: PropTypes.func.isRequired,
    defaultRendererProps: PropTypes.object.isRequired,
};

export default codeFencePropTypes;

RESULTS

mWeb Chrome:

https://user-images.githubusercontent.com/56851391/163692566-565eb175-c70b-4437-ba22-7abcd44a9c4b.mp4

Web Chrome:

https://user-images.githubusercontent.com/56851391/163692519-91db879a-fb0b-449e-9e2d-91ae79a8f1bf.mov

📣 @parasharrajat You have been assigned to this job by @jboniface! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

Taking over from @rushatgabhane as C+.

@sobitneupane I am interested to hear your proposal.

@NikkiWines sorry, I can’t review this one. I’m not well 🤒