Copying and pasting text into Quill 1.1.3 makes the page scroll jump

[sferoze]

The quill container I am using auto expands as you add text. So the quill editor itself does not have scroll but the document does.

When I copy and paste text into the quill editor it makes the page jump scroll position.

I found the code in quill.js that is causing this issue. When I comment it out, the scroll position does not jump anymore

}, {
        key: 'onPaste',
        value: function onPaste(e) {
          // var _this3 = this;

          // if (e.defaultPrevented || !this.quill.isEnabled()) return;
          // var range = this.quill.getSelection();
          // var delta = new _quillDelta2.default().retain(range.index).delete(range.length);
          // var bodyTop = document.body.scrollTop;
          // this.container.focus();
          // setTimeout(function () {
          //   _this3.quill.selection.update(_quill2.default.sources.SILENT);
          //   delta = delta.concat(_this3.convert());
          //   _this3.quill.updateContents(delta, _quill2.default.sources.USER);
          //   // range.length contributes to delta.length()
          //   _this3.quill.setSelection(delta.length() - range.length, _quill2.default.sources.SILENT);
          //   document.body.scrollTop = bodyTop;
          //   _this3.quill.selection.scrollIntoView();
          // }, 1);
        }
      }]);

Expected behavior:

When copying and pasting any text, the scroll position of the document should not jump.

Actual behavior:

The scroll position of the page jumps when pasting in text.

Platforms:

Chrome Latest

Version:

Quill 1.1.3

[sferoze]

Whats the purpose of the code that is commented out above?

The editor pasting works so much better without it.

[jhchen]

I apologize scrollbar jumping has been a recurring issue. It is caused by the lines commented out, and I have tried to remove them in the paste and in some release, but they serve an important purpose. It essentially intercepts pasted content by switching focus to another contenteditable div and analyzing what is pasted there. A side effect of the focus switching is the scroll jumping.

Pasting directly into Quill would solve the jumping but it's important for the integrity of the Quill document to not allow uncontrolled content into it, so arbitrary paste is not allowed. Immediate problems are not always obvious but trying to paste into different browsers, pasting more obscure content, pasting from different applications, and long edit sessions after these scenarios and many issues start to crop up.

The current version of Quill will restore scroll position of the editor, but some users prefer for the scrollbar to appear in an ancestor element, which sounds like your use case, the restoration doesn't do anything because it was never targeting the right scroll container. A workaround is to do the scroll restoration yourself like this: http://codepen.io/quill/pen/XNJqav.

I'm not sure what the best official long term solution is and am open to ideas. The focus switching seems necessary until browsers standardize paste behavior. Quill could restore the scroll position for you but you'd have to pass in the element that does the scrolling which could be possible through a configuration option. This does not seem particularly cleanest nor elegant though.

[sferoze]

@jhchen

Ah I understand the issue.

I will try and think about a long term solution and post it here.

But...

Your codepen solution is works great as a temporary fix. I have uncommented the paste code in quill.js that was initially causing the issue, and am now using the extension of the clipboard module that you show in your codepen.

It works perfectly and I can paste and the scroll position does not jump.

[mramadhanrh]

Hi, this is still happen for horizontal scroll, and i'm using quill 1.3.7

[aaaandrea]

Just updating since I got a bit sidetracked as a result of this issue. Quill has fixed this with setting scrolling container: https://quilljs.com/docs/configuration/#scrollingcontainer