Search code examples
codemirror

Pasting text that triggers the scroll leaves cursor in visually the wrong location


See what I mean by going here: https://codemirror.net/demo/indentwrap.html

Paste in something large enough to trigger scrollbar, you may need to remove existing text first:

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

The cursor will appear not in the correct location until you type or move it. Has anyone seen this or know of a solution or workaround?


Edit:

If I put listeners for pasting and do a refresh() and scrollIntoView() it seems to work most of the time... but doesnt always seem effective if I'm posting between content for some reason.


Solution

  • Although it has the small side affect of always having a 17px padding on the right side... adding padding-right: 17px !important to .CodeMirror-sizer seems to fix the problem.

    The problem seems to have been caused by when the scrollbar appears, it makes the scrollbar visible, and also adds the 17px right padding to the sizer (so the text doesn't run under the scrollbar). The cursor appears to be positioned based on if that padding was never added until the user types or does something that would move the cursor. By always having that right padding, we don't run into this problem.

    The small side affect doesn't matter much to me so I'm happy with this workaround, however... if someone else finds a better solution I'd like to see it.