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

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open app
2. Send few long lines of code in chat

- name: Decrypt Botify GPG key
        run: cd .github/workflows && gpg --quiet --batch --yes --decrypt --passphrase="$LARGE_SECRET_PASSPHRASE" --output OSBotify-private-key.asc OSBotify-private-key.asc.gpg
        env:
          LARGE_SECRET_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }}

Expected Result:

Long lines in code blocks should not wrap

Actual Result:

Long lines in code blocks wrap

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.1.33-3
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @roryabraham
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1643397896087709

View all open jobs on GitHub

view this job

[MelvinBot]

Triggered auto assignment to @tylerkaraszewski (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[sobitneupane]

Hello, Is this the expected result?

If yes, I will post a proposal.

[parasharrajat]

@sobitneupane May be you can wait till issue is triaged.

[MelvinBot]

Triggered auto assignment to @jboniface (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[tylerkaraszewski]

Seems fine, probably straightforward.

[jboniface]

posted here: https://www.upwork.com/jobs/~016dd77f2c8c2b27d0

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (Exported)

[MelvinBot]

Triggered auto assignment to @NikkiWines (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rushatgabhane]

Hello, Is this the expected result?

@sobitneupane
Yes that's the expected result. Rory mentions on slack that it should behave like github.
Excited for your proposal!

[Viacheslav80]

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,

Screen.Recording.2022-02-05.at.22.42.51.mov

[rushatgabhane]

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

[parasharrajat]

Taking over from @rushatgabhane as C+.

@sobitneupane I am interested to hear your proposal.

[jboniface]

bump -- any updates on this? it looks like we have a proposal without definitive response. cc @parasharrajat / @NikkiWines

[parasharrajat]

Oh, I see. I am not assigned to it. That's why. @jboniface Please assign me as C+. Thanks.

I like @Viacheslav80 's proposal. Please use the Class component. we don't use hooks.

cc: @NikkiWines

🎀 👀 🎀 C+ reviewed

[parasharrajat]

Thank you @orkunkarakus for the detailed post.

Long Press context (No need in desktop and web versions)

Correct. But it should open on right-click.

Sounds like you have fixed all the issues. Do you mind sharing the technical details?

[orkunkarakus]

Thank you @orkunkarakus for the detailed post.

@parasharrajat You're welcome.

Long Press context (No need in desktop and web versions)

Correct. But it should open on right-click.

Right click still works. Only long press is disabled on hoverable platforms.
Right click video.

web-right-click-expensify.mov

Sounds like you have fixed all the issues. Do you mind sharing the technical details?

Sure, The "react-native-render-html" library has a feature that allows us to render html tags with custom components.
( Explained in this page [Library documentation] https://meliorence.github.io/react-native-render-html/docs/guides/custom-renderers )

I wrote a custom render component for our code block tag using this feature. This custom render component includes the ScrollView component of the "react-native-gesture-handler" library. At the same time i used to "onStartShouldSetResponder" prop provided by the Gesture Responder System in the scrollview. This prop determine the responder is scrollview while scrolling, not the long press.

[parasharrajat]

If the solution to the problem is ok for you, I can send my proposal to here.

Should I consider the above post as a proposal or do you want to share something else? It seems that you are still waiting on that.

[orkunkarakus]

If the solution to the problem is ok for you, I can send my proposal to here.

Should I consider the above post as a proposal or do you want to share something else? It seems that you are still waiting on that.

if it is ok for you, you can consider it is a proposal.

[parasharrajat]

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

[NikkiWines]

Yep, I agree - this proposal looks good. @jboniface could you hire @orkunkarakus for this role, please?

[melvin-bot]

📣 @orkunkarakus 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 📖

[orkunkarakus]

PR is created. @parasharrajat

cc: @NikkiWines

[parasharrajat]

@orkunkarakus I just noticed one thing that I forgot to mention during the PR review.
when we are scrolling the chat list via wheel and mouse comes over the code block, the scroll is blocked.

As the regression period is still active, could you please submit a PR to fix that? It should be a small fix.

The expected behavior would be when the user is scrolling horizontally, only then code block should scroll and scrolling chat should not be blocked via code block while scrolling vertically.

Steps:

1. Open any chat.
2. Send a message would code block as per the issue or use an old message in the history.
3. Send a few more messages.
4. Use a touchpad or mouse wheel to scroll the chat message list.
5. As soon as the cursor comes over the code block, the scroll is blocked.

[orkunkarakus]

@orkunkarakus I just noticed one thing that I forgot to mention during the PR review. when we are scrolling the chat list via wheel and mouse comes over the code block, the scroll is blocked.

As the regression period is still active, could you please submit a PR to fix that? It should be a small fix.

The expected behavior would be when the user is scrolling horizontally, only then code block should scroll and scrolling chat should not be blocked via code block while scrolling vertically.

Steps:

1. Open any chat.
2. Send a message would code block as per the issue or use an old message in the history.
3. Send a few more messages.
4. Use a touchpad or mouse wheel to scroll the chat message list.
5. As soon as the cursor comes over the code block, the scroll is blocked.

@parasharrajat Since the update is currently in staging, should I create a new branch from staging or through the old merged branch (orkunkarakus:fix/7497-LongLinesInCode) ?
or is it enough for you to update the old branch and open pr again?

[parasharrajat]

I think you can start from the main branch otherwise, just start from your old PR and merge the main into it. Thanks for considering the request.

[orkunkarakus]

I think you can start from the main branch otherwise, just start from your old PR and merge the main into it. Thanks for considering the request.

@parasharrajat You're welcome. I opened the PR #9026

[kadiealexander]

Issued payment to @orkunkarakus after email bump.

[parasharrajat]

This is ready for payout.

[mallenexpensify]

Paid @parasharrajat $4k for C+ on a different job than @orkunkarakus (in case anyone is auditing later on).
Closing, thanks for the help!