Extra newline inserted when pressing space on the start of a wrapped line in Chrome

[neerajkanhere]

When a string value is long and has many spaces in the middle, the line-wrap behavior is correct on firefox, but on Chome the line gets split into a new line. The screenshot makes it clear.

[neerajkanhere]

[josdejong]

Thanks for reporting. Can you share the exact JSON document that you're using in your screenshots? I tried it out in Chrome and Firefox with a similar long string but it works fine in both browsers.

Is the issue still the case after refreshing the application in your browser with Ctrl+F5?

[neerajkanhere]

Refreshing did not help. The actual JSON document might not help because behavior is dependent on where the spaces are in a sentence with respect to the viewport width. I can reproduce it with something like: { "test" : "a b c d e f g h i j k" }

Difference in behavior can be observed if the number of spaces between the letters is large enough so that the line-wrap is triggered between those spaces. In Chrome, a line-break in introduced (hence incorrectly modifying the expected string value), while in Firefox the line-wrap happens correctly without introducing a line-break in the actual string value.

[neerajkanhere]

[josdejong]

Thanks for clarifying. I now tried to reproduce it with the following JSON:

{
  "test": "a        b        c        d        e        f        g        h        i        j        k"
}

When I open this on both Firefox and Chrome and make sure the line wraps, they both behave like your Firefox screenshots: the value is rendered as three lines, not four, and the value is green.

What is your Chrome version? Do you have specific plugins or so installed in Chrome? Does it also happen when opening the editor in incognito mode?

[neerajkanhere]

Using latest Chrome (version 107.0.5304.122 (Official Build) (64-bit)) on Windows 11 (with all updates). Tried it in private tab (with all extensions disabled). If you paste your sample document in Chrome, it shows green (with the correct wrap) as expected. But now if you click just before k (or the last letter) and start pressing the spacebar to introduce more spaces, eventually it turns gray (and introduces new line). This only happens once you start entering spaces (not on pasting). In Firefox this doesn't happen, no matter how many spaces you introduce (using keyboard input, not just pasting) it keeps those as spaces and keeps it showing green.

[josdejong]

Ahh, yes I can reproduce your issue, and indeed it only happens on Chrome.

So to reproduce:

1. open the editor on Chrome
2. open the following document:

   {
     "test": "a        b        c        d        e        f        g        h        i        j        k"
   }

3. Make sure the line wraps. Then, put the caret on the first position of the wrapped line, like in the following screenshot:
4. Press space once. That will insert a new line and a space, instead of just a space.

I'll do some debugging to see if I can figure out why CodeMirror does that (and help would be welcome)

[josdejong]

This turns out to be a Chrome bug: https://github.com/codemirror/dev/issues/968

The latest version of CodeMirror has a workaround fixing this in @codemirror/view@6.6.0.

[josdejong]

Hmm, it looks like the fix was published in @codemirror/view@6.4.0, so this should have been fixed already (since svelte-jsoneditor@0.9.1, about one month ago).

To be continued...

[josdejong]

I've verified the issue and reported it via https://github.com/codemirror/dev/issues/1038

[josdejong]

Turns out CodeMirror has a working workaround for the Chrome issue. In my case, the issue was triggered again by the LastPass Chrome extension (see https://github.com/codemirror/dev/issues/1038#issuecomment-1359362497).

I'll close this issue now, not much we can do.