Word wrap on left side

[diddiman]

Hi!

So i am using the monaco diff editor and it works fine. However when i use word wrap i can't seem to get it working for the left side of the side-by-side view. It only wraps on the right side. When the text is too long on the left side it just gives a scrollbar instead. Any idea what it could be?

[ryexley]

I'm seeing the same issue as well. Anyone else seen this and have any idea how to fix it?

[ryexley]

@diddiman you don't happen to be using the Monaco Editor via the @monaco-editor/react wrapper do you? I'm asking because I am, and I'd like to try to identify whether or not it might have anything to do with that.

[diddiman]

I am! I am pretty sure I saw someone using it without the wrapper and it had the same issue. Can't swear on that though

[ryexley]

I did not previously have the monaco-editor package installed as a direct dependency in my project, so I was depending on whatever version that parent package was pulling in. I think I might possibly the issue solved, but only by adding it as a dependency, and rolling back to run version 0.43.0, and by doing so, I am no longer seeing the issue. Haven't dug in yet to try to see what might be causing it, but this will do for now for our needs.

[ryexley]

From what I can tell, this issue actually exists in VS Code as well. Here's a screenshot of a side-by-side diff where you can fairly clearly see that my code is word-wrapped on the right side, but it is NOT wrapped, and horizontally scrollable on the left.

[ryexley]

This is becoming more and more of a mystery to me honestly. For a lack of activity on this conversation, I was going to link to this conversation from a new Bug report in Issues, but as I was going through the process of doing that, I attempted to create a reproduction of the issue in the Monaco Editor playground, but was unable to do so. It seems to work for me over there just fine. Sssoooo yeah ... I'm not exactly sure what's up with this to be honest.

[diddiman]

Hmm, very interesting. That indeed seems to work for me as well...

[tsx-ell]

i was facing the exact same issue and setting options.useInlineViewWhenSpaceIsLimited: false helped me

(property) editor.IDiffEditorBaseOptions.useInlineViewWhenSpaceIsLimited?: boolean | undefined
When renderSideBySide is enabled, useInlineViewWhenSpaceIsLimited is set, and the diff editor has a width less than renderSideBySideInlineBreakpoint, the inline view is used.