diff --git a/plugins/talk-plugin-rich-text/client/components/rte/factories/createToggle.js b/plugins/talk-plugin-rich-text/client/components/rte/factories/createToggle.js index 59b75fdf2..1fe8641f6 100644 --- a/plugins/talk-plugin-rich-text/client/components/rte/factories/createToggle.js +++ b/plugins/talk-plugin-rich-text/client/components/rte/factories/createToggle.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import Button from '../components/Button'; -import bowser from 'bowser'; /** * createToggle creates a button that can be active, inactive or disabled @@ -33,17 +32,7 @@ const createToggle = ( this.execCommand(); }; - // Detect whether there was focus on the RTE before the click. - hadFocusBeforeClick = false; - handleMouseDown = () => (this.hadFocusBeforeClick = this.props.api.focused); - handleClick = () => { - // Skip IOS when the focus was not there before. - // IOS fails to focus to the RTE correctly and scrolls to nirvana. - // See https://www.pivotaltracker.com/story/show/157607216 - if (!this.hadFocusBeforeClick && bowser.ios) { - return; - } this.props.api.focus(); this.formatToggle(); this.props.api.focus(); diff --git a/plugins/talk-plugin-rich-text/client/components/rte/lib/api.js b/plugins/talk-plugin-rich-text/client/components/rte/lib/api.js index 9e018f093..0c5fbcf2f 100644 --- a/plugins/talk-plugin-rich-text/client/components/rte/lib/api.js +++ b/plugins/talk-plugin-rich-text/client/components/rte/lib/api.js @@ -1,4 +1,4 @@ -import { isSelectionInside } from './dom'; +import { isSelectionInside, selectEndOfNode } from '../lib/dom'; /** * An instance of API is passed to all the buttons to @@ -26,6 +26,15 @@ function createAPI( return getContainer(); }, focus() { + // IOS workaround inspired by https://github.com/facebook/draft-js/issues/1075#issuecomment-369700275. + // Putting the selection inside the contentEditable before calling `focus` + // prevents an undesired scroll jump. + if (!isSelectionInside(this.container)) { + if (this.container.childNodes.length === 0) { + this.container.appendChild(document.createTextNode('')); + } + selectEndOfNode(this.container); + } this.container.focus(); }, isSelectionInside() {