fix: scroll follow on paste (fix #970)

pr #995
nhn · Jan 6, 2020 · 59935f3 · 59935f3
1 parent bfaf470
commit 59935f3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git 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
@@ -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();