Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

🐛 Fixed editor cursor position on iOS when opening keyboard

Browse source 
closes https://github.com/TryGhost/Ghost/issues/9379
- detect iOS devices and start a requestAnimationFrame loop when inserting the markdown editor that watches `body.scrollTop` and translates the scroll that iOS applies to the body to the editor instead so that we keep the cursor on screen without the disconnected cursor proplems
This commit is contained in:
Kevin Ansfield 2018-01-08 19:10:29 +00:00
parent f65b07c589
commit eef41d2cd7
1 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ghost/admin/app/components/gh-markdown-editor.js
View file

@ -218,6 +218,47 @@ export default Component.extend(ShortcutsMixin, {
didInsertElement() {
this._super(...arguments);
this.registerShortcuts();
// HACK: iOS will scroll the body up when activating the keyboard, this
// causes problems in the CodeMirror based editor because iOS doesn't
// scroll the cursor and other measurement elements which results in
// rather unfriendly behaviour with text appearing in seemingly random
// places and an inability to select things properly
//
// To get around this we use a raf loop that constantly makes sure the
// body scrollTop is 0 when the editor is on screen
let iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS) {
this._preventBodyScroll();
}
},
willDestroyElement() {
this._super(...arguments);
if (this._preventBodyScrollId) {
window.cancelAnimationFrame(this._preventBodyScrollId);
}
},
_preventBodyScroll() {
this._preventBodyScrollId = window.requestAnimationFrame(() => {
let body = document.querySelector('body');
// only scroll the editor if the editor is active so that we don't
// clobber scroll-to-input behaviour in the PSM
if (document.activeElement.closest('.CodeMirror')) {
if (body.scrollTop !== 0) {
let editor = document.querySelector('.gh-markdown-editor');
// scroll the editor by the same amount the body has been scrolled,
// this should keep the cursor on screen when opening the keyboard
editor.scrollTop += body.scrollTop;
body.scrollTop = 0;
}
}
this._preventBodyScroll();
});
},
_insertImages(urls) {