From 6e75cd6efcc61315d84f6f90ebd71579853751d5 Mon Sep 17 00:00:00 2001 From: iseulde Date: Thu, 1 Feb 2018 17:21:13 +0100 Subject: [PATCH] Take into account caret position within Editable --- blocks/rich-text/index.js | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index 4215649ae0c1c..9fc05e99a9648 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -751,13 +751,23 @@ export default class RichText extends Component { // focussed editor into view. // Unfortunately we cannot detect virtual keyboards. if ( window.innerWidth < 784 ) { - const rootNode = this.editor.getBody(); - - scrollIntoView( rootNode, rootNode.closest( '.edit-post-layout__content' ), { - // Give enough room for toolbar. Must be top. - // Unfortunately we cannot scroll to bottom as the - // virtual keyboard overlaps the window. - offsetTop: 100, + setTimeout( () => { + if ( this.editor.removed ) { + return; + } + + const rootNode = this.editor.getBody(); + const rootRect = rootNode.getBoundingClientRect(); + const caretRect = this.editor.selection.getRng().getClientRects()[ 0 ]; + const offset = caretRect ? caretRect.top - rootRect.top : 0; + + scrollIntoView( rootNode, rootNode.closest( '.edit-post-layout__content' ), { + // Give enough room for toolbar. Must be top. + // Unfortunately we cannot scroll to bottom as the + // virtual keyboard overlaps the window. + offsetTop: 100 - offset, + alignWithTop: true, + } ); } ); } }