From 98d239442bb0e6dd20b320b92c9b9c123f18a636 Mon Sep 17 00:00:00 2001 From: Ryan McCarvill Date: Tue, 21 Mar 2017 01:12:12 +1300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9C=20=20Bulk=20selecting=20(#594)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closes: https://github.com/TryGhost/Ghost/issues/8153 Previously when selecting text in the editor the screen will jump as it tries to scroll so that the cursor is always on it. This update means it will no longer happen when selecting the text with either the mouse or in a mobile browser. Unfortunately when selecting text with the keyboard the editor will no longer scroll with the cursor. --- lib/gh-koenig/addon/components/gh-koenig.js | 23 ++++++++++++--------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/lib/gh-koenig/addon/components/gh-koenig.js b/lib/gh-koenig/addon/components/gh-koenig.js index 122c122bac..faa6f483f2 100644 --- a/lib/gh-koenig/addon/components/gh-koenig.js +++ b/lib/gh-koenig/addon/components/gh-koenig.js @@ -130,17 +130,20 @@ export default Component.extend({ } }, - // makes sure the cursor is on screen. + // makes sure the cursor is on screen except when selection is happening in which case the browser mostly ensures it. + // there is an issue with keyboard selection on some browsers though so the next step will be to record mouse and touch events. cursorMoved() { - let scrollBuffer = 33; // the extra buffer to scroll. - let range = window.getSelection().getRangeAt(0); // get the actual range within the DOM. - let position = range.getBoundingClientRect(); - let windowHeight = window.innerHeight; - - if (position.bottom > windowHeight) { - this.domContainer.scrollTop += position.bottom - windowHeight + scrollBuffer; - } else if (position.top < 0) { - this.domContainer.scrollTop += position.top - scrollBuffer; + if (this.get('editor').range.isCollapsed) { + let scrollBuffer = 33; // the extra buffer to scroll. + let range = window.getSelection().getRangeAt(0); // get the actual range within the DOM. + let position = range.getBoundingClientRect(); + let windowHeight = window.innerHeight; + + if (position.bottom > windowHeight) { + this.domContainer.scrollTop += position.bottom - windowHeight + scrollBuffer; + } else if (position.top < 0) { + this.domContainer.scrollTop += position.top - scrollBuffer; + } } },