Pressing end doesn't scroll all the way to the end of a line

[TheV360]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Details about the bug:

• Web browser and version: Firefox 63
• Operating System: Windows 10 1803
• Steps to reproduce this:

1. Make file with a very long line of code that doesn't fit on the screen.

function heck() {
  extremelyLongFunctionCall(helloWorld, xCoordinate, yCoordinate, otherVariableName, runningOutOfCreativeVariableNames, test, justRanOutOfVariableNames);
}

2. On the long line of code, press End.
3. You'll see that while the cursor moved to the end of the line correctly, the scrollbar didn't catch up to it, and you can't easily see what's at the end of the line without dragging the scrollbar.

[catarak]

thanks for reporting! i've changed the styling of CodeMirror a bunch, so I wonder if it has to do with that.

[bhawesh96]

As far as I could figure out, it has to do something related the margin-right attribute in the .CodeMirror-scroll class in _codemirror.scss.

[catarak]

@bhawesh96 thanks for looking into that!

[siddharthshah3030]

@catarak
I would like to solve this issue but can't figure out how to approach
I tried modifying the file mentioned by @bhawesh96
and tried changes in CSS attributes
but it didn't seem to work for me
I'm using chrome (Manjaro Linux)

[LakshSingla]

thanks for reporting! i've changed the styling of CodeMirror a bunch, so I wonder if it has to do with that.

Can you tell some key areas where you have modified the code so that I can take a look at it ?

[catarak]

if you look in https:/processing/p5.js-web-editor/blob/master/client/styles/vendors/_codemirror.scss, you can see the basic CodeMirror styles, and in https:/processing/p5.js-web-editor/blob/master/client/styles/components/_editor.scss, some of the custom styles.

[bmoren]

I'd also like to add that there is an issue while typing that I believe is related to this one where the scroll bar is not caught up to the overflowing text:

[catarak]

@bmoren that does look like the same issue!

[bmoren]

related, flexbox issue:

codemirror/codemirror5#4142

[catarak]

the CodeMirror editor is in a flexbox container, so it could the same issue that @bmoren linked to.

[shakti97]

I think we can close this issue as I can see we are now not using the horizontal scroll with the editor and vertical scroll is working fine

[aldrinjenson]

Yes, this issue is no more a problem. Now the code wraps down to the next line. Please close the issue.

[TheV360]

The previous two comments are saying that this is fixed, but I went into settings, disabled Word Wrap, and immediately got the issue to happen again.

[sagar-joshi]

The actual issue was with codemirror and now it has been fixed in codemirror.
codemirror/codemirror5#6436

[catarak]

The actual issue was with codemirror and now it has been fixed in codemirror.

Wow really?! That's exciting. I'll leave this open until there's a new Codemirror release and this can be updated!

[sagar-joshi]

Wow really?!

I had tested with 'fixedGutter : true' and scrolling was working perfect. The problem was with 'fixedGutter : false' (and currently fixedGutter is set to false in p5js web editor). Now it is fixed in codemirror. So it should work.

[sagar-joshi]

@catarak codemirror has released new v5.58.2

[catarak]

@sagar-joshi thank you! I'll make a PR that fixes this 😄