From 59935f37797c90f3af2e9e688bdcbd3d8e88f52a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EA=B7=9C=EC=9A=B0/FE=EA=B0=9C=EB=B0=9C=EB=9E=A9/?=
 =?UTF-8?q?NE?= <kyuwoo.choi@nhnent.com>
Date: Wed, 9 Aug 2017 11:17:55 +0900
Subject: [PATCH] fix: scroll follow on paste (fix #970)

pr #995
---
 apps/editor/src/js/wysiwygEditor.js    | 17 +++++++++++++----
 apps/editor/test/wysiwygEditor.spec.js | 10 ++++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/apps/editor/src/js/wysiwygEditor.js b/apps/editor/src/js/wysiwygEditor.js
index 31c34b97fe..afa89c73a2 100644
--- a/apps/editor/src/js/wysiwygEditor.js
+++ b/apps/editor/src/js/wysiwygEditor.js
@@ -118,6 +118,7 @@ class WysiwygEditor {
     _initEvent() {
         this.eventManager.listen('wysiwygSetValueBefore', html => this._preprocessForInlineElement(html));
         this.eventManager.listen('wysiwygKeyEvent', ev => this._runKeyEventHandlers(ev.data, ev.keyMap));
+        this.eventManager.listen('wysiwygRangeChangeAfter', () => this._scrollToRangeIfNeed());
     }
 
     /**
@@ -517,11 +518,16 @@ class WysiwygEditor {
      * @private
      */
     _scrollToRangeIfNeed() {
+        const $editorContainerEl = this.$editorContainerEl;
         const range = this.getRange();
-        const cursorTop = this.getEditor().getCursorPosition(range).top - this.$editorContainerEl.offset().top;
+        const cursorTop = this.getEditor().getCursorPosition(range).top - $editorContainerEl.offset().top;
 
-        if (cursorTop >= this.get$Body().height()) {
-            range.endContainer.scrollIntoView();
+        if (cursorTop >= $editorContainerEl.height()) {
+            let target = range.endContainer;
+            if (!(target instanceof Element)) {
+                target = target.parentNode;
+            }
+            target.scrollIntoView(false);
         }
     }
 
@@ -973,7 +979,10 @@ class WysiwygEditor {
      */
     moveCursorToEnd() {
         this.getEditor().moveCursorToEnd();
-        this.scrollTop(this.$editorContainerEl.height());
+        const contentNodes = this.get$Body().get(0).childNodes;
+        if (contentNodes.length > 0) {
+            contentNodes[contentNodes.length - 1].scrollIntoView(false);
+        }
         this._correctRangeAfterMoveCursor('end');
     }
 
diff --git a/apps/editor/test/wysiwygEditor.spec.js b/apps/editor/test/wysiwygEditor.spec.js
index 0bbdcababe..20700e7004 100644
--- a/apps/editor/test/wysiwygEditor.spec.js
+++ b/apps/editor/test/wysiwygEditor.spec.js
@@ -457,6 +457,16 @@ describe('WysiwygEditor', () => {
         });
     });
 
+    it('scroll if needed on wysiwygRangeChangeAfter', () => {
+        wwe.setHeight(30);
+        wwe.setValue('a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>');
+        wwe.scrollTop(0);
+
+        em.emit('wysiwygRangeChangeAfter');
+
+        expect(wwe.scrollTop()).not.toEqual(0);
+    });
+
     describe('get current range', () => {
         it('get range', () => {
             const range = wwe.getEditor().getSelection();