OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix editor cursor scrolling (#672)

Browse Source 
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.
This commit is contained in:
Ryan McCarvill 2017-04-25 22:29:45 +12:00 committed by Kevin Ansfield
parent 64661568d6
commit c6ed77a0fc
2 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ghost/admin/lib/gh-koenig/addon/components/gh-koenig.js
View File

@ -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;

25
ghost/admin/lib/gh-koenig/addon/lib/utils.js
View File

@ -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
};