🐛 fix editor cursor scrolling (#672)

no issue

When calculating if the editor should scroll to keep the cursor on screen upon selection change the editor would appear to scroll to random locations.

The issue stemmed from the fact that the getPositionFromRange method took into account the scroll offset when figuring out the pixel position of a range. So, if the editor was vertically scrolled the scrollTop was added to the cursor position which the editor would assume meant that the cursor was offscreen when it wasn't.

This fix creates a new method getPositionOnScreenFromRange which finds the position of an element on screen and ignores the scroll offset.

lib/gh-koenig/addon/components/gh-koenig.js

@@ -7,7 +7,7 @@ import {MOBILEDOC_VERSION} from 'mobiledoc-kit/renderers/mobiledoc';
 import createCardFactory from '../lib/card-factory';
 import defaultCommands from '../options/default-commands';
 import editorCards  from '../cards/index';
-import {getCardFromDoc, checkIfClickEventShouldCloseCard, getPositionFromRange} from '../lib/utils';
+import {getCardFromDoc, checkIfClickEventShouldCloseCard, getPositionOnScreenFromRange} from '../lib/utils';
 import $ from 'jquery';
 // import { VALID_MARKUP_SECTION_TAGNAMES } from 'mobiledoc-kit/models/markup-section'; //the block elements supported by mobile-doc
 
@@ -161,7 +161,7 @@ export default Component.extend({
         if (editor.range.isCollapsed) {
             let scrollBuffer = 33; // the extra buffer to scroll.
 
-            let position = getPositionFromRange(editor, $(this.get('containerSelector')));
+            let position = getPositionOnScreenFromRange(editor, $(this.get('containerSelector')));
 
             if (!position) {
                 return;

lib/gh-koenig/addon/lib/utils.js

@@ -34,11 +34,26 @@ export function checkIfClickEventShouldCloseCard(target, cardHolder) {
     return true;
 }
 
-// get a position based on the range.
+// get a position in the editor based on the range.
 // in Chrome, Firefox, and Edge range.getBoundingClientRect() works
 // in Safari if the range is collapsed you get nothing so we expand the range by 1
 // if that doesn't work then we fallback got the paragraph.
 export function getPositionFromRange(editor, holder, range) {
+    let position = getPositionOnScreenFromRange(editor, holder, range);
+    let scrollLeft = holder.scrollLeft();
+    let scrollTop = holder.scrollTop();
+    return {
+        left: position.left + scrollLeft,
+        right: position.right + scrollLeft,
+        top: position.top + scrollTop,
+        bottom: position.bottom + scrollTop,
+        width: position.width,
+        height: position.height
+    };
+}
+
+// get a position on the screen based on the range.
+export function getPositionOnScreenFromRange(editor, holder, range) {
     if (!editor.range || !editor.range.head || !editor.range.head.section) {
         return;
     }
@@ -86,10 +101,10 @@ export function getPositionFromRange(editor, holder, range) {
     }
 
     return {
-        left: position.left + holder.scrollLeft() - offset.left,
-        right: position.right + holder.scrollLeft() - offset.left,
-        top: position.top + holder.scrollTop() - offset.top,
-        bottom: position.bottom + holder.scrollTop() - offset.top,
+        left: position.left - offset.left,
+        right: position.right - offset.left,
+        top: position.top - offset.top,
+        bottom: position.bottom  - offset.top,
         width: position.right - position.left,
         height: position.bottom - position.top
     };