Scrolls to cursor if not visible after enter/deletion/paste, fixing i…

…ssue slab#433

src/core/editor.coffee

@@ -109,6 +109,19 @@ class Editor
       top: bounds.top - containerBounds.top
     }
 
+  scrollCursorIntoView: () ->
+    return unless @selection.range
+    startBounds = this.getBounds(@selection.range.start)
+    endBounds = this.getBounds(@selection.range.end)
+    containerBounds = @root.parentNode.getBoundingClientRect()
+    containerHeight = containerBounds.bottom - containerBounds.top
+    if containerHeight < endBounds.top + endBounds.height
+      [line, offset] = @doc.findLineAt(@selection.range.end)
+      line.node.scrollIntoView(false)
+    else if startBounds.top < 0
+      [line, offset] = @doc.findLineAt(@selection.range.start)
+      line.node.scrollIntoView()
+
   _deleteAt: (index, length) ->
     return if length <= 0
     @selection.shiftAfter(index, -1 * length, =>

src/modules/keyboard.coffee

@@ -60,6 +60,7 @@ class Keyboard
         @toolbar.setActive(format, value) if @toolbar?
         return
       )
+      @quill.editor.scrollCursorIntoView()
       return false
     )
 
@@ -78,6 +79,7 @@ class Keyboard
               @quill.deleteText(range.start - 1, range.start, Quill.sources.USER)
           else if range.start < @quill.getLength() - 1
             @quill.deleteText(range.start, range.start + 1, Quill.sources.USER)
+      @quill.editor.scrollCursorIntoView()
       return false
     )
 

src/modules/paste-manager.coffee

@@ -38,10 +38,7 @@ class PasteManager
         @quill.updateContents(delta, 'user')
       @quill.setSelection(range.start + lengthAdded, range.start + lengthAdded)
       # Make sure bottom of pasted content is visible
-      [line, offset] = @quill.editor.doc.findLineAt(range.start + lengthAdded)
-      lineBottom = line.node.getBoundingClientRect().bottom
-      windowBottom = document.documentElement.clientHeight
-      line.node.scrollIntoView(false) if lineBottom > windowBottom
+      @quill.editor.scrollCursorIntoView()
       @container.innerHTML = ""
     )
 

test/unit/core/editor.coffee

@@ -395,4 +395,45 @@ describe('Editor', ->
       )
     )
   )
+
+  describe('scrollCursorIntoView()', ->
+    beforeEach( ->
+      @editor.root.style.height = "50px"
+      @editor.root.style.overflow = "auto"
+      @editor.root.innerHTML = '<div><span style="font-size: 32px;">a<br>b<br>c<br>d</span></div>'
+    )
+
+    it('scrolls down when cursor too low', ->
+      bounds = @editor.getBounds(7)
+      expect(bounds.top).toBeGreaterThan(100)
+      @editor.selection.setRange(new Quill.Lib.Range(7, 7))
+      @editor.scrollCursorIntoView()
+      bounds = @editor.getBounds(7)
+      expect(bounds.top).not.toBeLessThan(0)
+      expect(bounds.top + bounds.height).not.toBeGreaterThan(100)
+    )
+
+    it('scrolls up when cursor too high', ->
+      @editor.root.scrollTop = 50
+      bounds = @editor.getBounds(1)
+      expect(bounds.top + bounds.height).toBeLessThan(0)
+      @editor.selection.setRange(new Quill.Lib.Range(1, 1))
+      @editor.scrollCursorIntoView()
+      bounds = @editor.getBounds(1)
+      expect(bounds.top).not.toBeLessThan(0)
+      expect(bounds.top + bounds.height).not.toBeGreaterThan(100)
+    )
+
+    it('does not scroll if cursor in view', ->
+      bounds = @editor.getBounds(1)
+      expect(bounds.top).not.toBeLessThan(0)
+      expect(bounds.top + bounds.height).not.toBeGreaterThan(100)
+      @editor.selection.setRange(new Quill.Lib.Range(1, 1))
+      @editor.scrollCursorIntoView()
+      newBounds = @editor.getBounds(1)
+      expect(bounds.top).toBe(newBounds.top)
+      expect(bounds.height).toBe(newBounds.height)
+      expect(bounds.left).toBe(newBounds.left)
+    )
+  )
 )