Workaround RTE Button focus bug on IOS

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();

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() {