Inline quill editor with no internal scroll, and height is longer than window, pasting content makes scroll position jump

[sferoze]

On a page I have an inline quill editor (version 1.0-beta-11).

The editor itself has no scroll, only page window does. If the content in the editor goes to the end, the editor div just expands creating a scrollbar in the body.

When pasting in content anywhere in this editor, the scroll position jumps.

Here is my hack to fix the problem. I prevent pasting in content in the editor by taking over the paste event and do things manually. It seems to stop the scroll position from jumping around

# http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser/6804718#6804718
    handlePaste = (e) ->
      # scrollPos = $(window).scrollTop()
      # $(window).scrollTop(scrollPos)
      if e and e.clipboardData and e.clipboardData.types and e.clipboardData.getData
        # Check for 'text/html' in types list. See abligh's answer below for deatils on
        # why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
        # Safari/Edge don't advertise HTML data even if it is available
        types = e.clipboardData.types
        if types instanceof DOMStringList and types.contains('text/html') or types.indexOf and types.indexOf('text/html') != -1
          # Extract data and pass it to callback
          pastedDataHTML = e.clipboardData.getData('text/html')
          # Stop the data from actually being pasted
          e.stopPropagation()
          e.preventDefault()

        else if types instanceof DOMStringList and types.contains('text/plain') or types.indexOf and types.indexOf('text/plain') != -1

          pastedDataPlain = e.clipboardData.getData('text/plain')

          e.stopPropagation()
          e.preventDefault()

        range = t.editor.getSelection()
        if range
          t.editor.deleteText range.index, range.length, 'user'

          if pastedDataPlain?
            t.editor.insertText range.index, pastedDataPlain, 'user'
          else if pastedDataHTML?
            t.editor.pasteHTML range.index, pastedDataHTML, 'user'


    if t.find('.ql-editor').addEventListener
      t.find('.ql-editor').addEventListener('paste', handlePaste, true)

Platforms: Chrome on Mac

Version: Using Quill 1.0 Beta 11

[jhchen]

Does this work in mobile Safari?

[sferoze]

Just tested and it does work in mobile Safari. This method is working pretty robustly for me. No issues so far. Without it, pasting content is really frustrating for user.

[jhchen]

I've reverted using the Stackoverflow snippet for paste 0c903eb. The testing I did for this issue after revert did not show the pasting jumping issue or your other switch between editors jumping issue using this: http://codepen.io/quill/pen/YWBQAY. You'll have to change the source to point to a build with the revert commit to try. If you are seeing this paste jumping issue after the next RC (should be out by Tuesday) then please fork and update the codepen to demonstrate the issue and reopen.