Scrolling-Width is wrong.

[monsterLHZ]

I found the problem in the function lineLength. Chinese characters are twice as long as English characters, but this is not taken into account when calculating the longest line. So when there are more English characters than Chinese characters and Chinese characters are longer than English characters, some Chinese characters cannot be seen. Scrollbars can also be problematic. It's going to look something like this: The two images show the same text.

[monsterLHZ]

You can use this function to calculate the length of a string. function abslength( str ) { return str.replace(/[^\x00-\xff]/ig, '**').length; }

[marijnh]

Unfortunately, how wide characters are depends on the font, and computing the actual real length of every line when determining the longest one is too expensive.

But I agree this behavior is really bad—once the editor has drawn a line, it should at least notice that it's longer than it's current max width, and adjust that max width. Unfortunately, size handling is ridiculously complicated in the current codebase, I couldn't find a quick fix, and I don't have time to work on this right now, so it might be a while until this is fixed.

[adrianheine]

… however, this should be better in the demo for CodeMirror 6, right?

[marijnh]

That doesn't really help current users, though. And see also https://github.com/codemirror/codemirror.next/issues/39

[marijnh]

Attached patch adds a hack that should make this problem less noticeable—the width will still be off until the long line is scrolled into view, but as soon as it's rendered the editor should notice and resize itself.

[CandiceCaiYu]

editor.on('viewportChange', cm => { cm.refresh() })