RichText: Remove focusPosition state

editor/components/rich-text/format-toolbar/index.js

@@ -18,6 +18,7 @@ import { prependHTTP } from '@wordpress/url';
  * Internal dependencies
  */
 import './style.scss';
+import PositionedAtSelection from './positioned-at-selection';
 import UrlInput from '../../url-input';
 import { filterURLForDisplay } from '../../../utils/url';
 
@@ -175,7 +176,7 @@ class FormatToolbar extends Component {
 	}
 
 	render() {
-		const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [], selectedNodeId } = this.props;
+		const { formats, enabledControls = DEFAULT_CONTROLS, customControls = [], selectedNodeId } = this.props;
 		const { linkValue, settingsVisible, opensInNewWindow } = this.state;
 		const isAddingLink = formats.link && formats.link.isAdding;
 
@@ -216,7 +217,7 @@ class FormatToolbar extends Component {
 
 				{ ( isAddingLink || formats.link ) && (
 					<Fill name="RichText.Siblings">
-						<div className="editor-format-toolbar__link-container" style={ { ...focusPosition } }>
+						<PositionedAtSelection className="editor-format-toolbar__link-container">
 							<Popover
 								position="bottom center"
 								focusOnMount={ isAddingLink ? 'firstElement' : false }
@@ -275,7 +276,7 @@ class FormatToolbar extends Component {
 								/* eslint-enable jsx-a11y/no-static-element-interactions */
 								) }
 							</Popover>
-						</div>
+						</PositionedAtSelection>
 					</Fill>
 				) }
 			</div>

editor/components/rich-text/format-toolbar/positioned-at-selection.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { getOffsetParent, getRectangleFromRange } from '@wordpress/dom';
+
+/**
+ * Returns a style object for applying as `position: absolute` for an element
+ * relative to the bottom-center of the current selection. Includes `top` and
+ * `left` style properties.
+ *
+ * @return {Object} Style object.
+ */
+function getCurrentCaretPositionStyle() {
+	const selection = window.getSelection();
+
+	// Unlikely, but in the case there is no selection, return empty styles so
+	// as to avoid a thrown error by `Selection#getRangeAt` on invalid index.
+	if ( selection.rangeCount === 0 ) {
+		return {};
+	}
+
+	// Get position relative viewport.
+	const rect = getRectangleFromRange( selection.getRangeAt( 0 ) );
+	let top = rect.top + rect.height;
+	let left = rect.left + ( rect.width / 2 );
+
+	// Offset by positioned parent, if one exists.
+	const offsetParent = getOffsetParent( selection.anchorNode );
+	if ( offsetParent ) {
+		const parentRect = offsetParent.getBoundingClientRect();
+		top -= parentRect.top;
+		left -= parentRect.left;
+	}
+
+	return { top, left };
+}
+
+/**
+ * Component which renders itself positioned under the current caret selection.
+ * The position is calculated at the time of the component being mounted, so it
+ * should only be mounted after the desired selection has been made.
+ *
+ * @type {WPComponent}
+ */
+class PositionedAtSelection extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			style: getCurrentCaretPositionStyle(),
+		};
+	}
+
+	render() {
+		const { className, children } = this.props;
+		const { style } = this.state;
+
+		return (
+			<div className={ className } style={ style }>
+				{ children }
+			</div>
+		);
+	}
+}
+
+export default PositionedAtSelection;

editor/components/rich-text/index.js

@@ -430,27 +430,6 @@ export class RichText extends Component {
 		this.context.onCreateUndoLevel();
 	}
 
-	/**
-	 * Calculates the relative position where the link toolbar should be.
-	 *
-	 * Based on the selection of the text inside this element a position is
-	 * calculated where the toolbar should be. This can be used downstream to
-	 * absolutely position the toolbar.
-	 *
-	 * @param {DOMRect} position Caret range rectangle.
-	 *
-	 * @return {{top: number, left: number}} The desired position of the toolbar.
-	 */
-	getFocusPosition( position ) {
-		// The container is relatively positioned.
-		const containerPosition = this.containerRef.current.getBoundingClientRect();
-
-		return {
-			top: position.top - containerPosition.top + position.height,
-			left: position.left - containerPosition.left + ( position.width / 2 ),
-		};
-	}
-
 	/**
 	 * Handles a horizontal navigation key down event to handle the case where
 	 * TinyMCE attempts to preventDefault when on the outside edge of an inline
@@ -752,20 +731,19 @@ export class RichText extends Component {
 			return accFormats;
 		}, {} );
 
-		let rect;
-		const selectedAnchor = find( parents, ( node ) => node.tagName === 'A' );
-		if ( selectedAnchor ) {
-			// If we selected a link, position the Link UI below the link
-			rect = selectedAnchor.getBoundingClientRect();
-		} else {
-			// Otherwise, position the Link UI below the cursor or text selection
-			rect = getRectangleFromRange( this.editor.selection.getRng() );
-		}
-		const focusPosition = this.getFocusPosition( rect );
-
-		this.setState( { formats, focusPosition, selectedNodeId: this.state.selectedNodeId + 1 } );
+		this.setState( { formats, selectedNodeId: this.state.selectedNodeId + 1 } );
 
 		if ( this.props.isViewportSmall ) {
+			let rect;
+			const selectedAnchor = find( parents, ( node ) => node.tagName === 'A' );
+			if ( selectedAnchor ) {
+				// If we selected a link, position the Link UI below the link
+				rect = selectedAnchor.getBoundingClientRect();
+			} else {
+				// Otherwise, position the Link UI below the cursor or text selection
+				rect = getRectangleFromRange( this.editor.selection.getRng() );
+			}
+
 			// Originally called on `focusin`, that hook turned out to be
 			// premature. On `nodechange` we can work with the finalized TinyMCE
 			// instance and scroll to proper position.
@@ -940,7 +918,6 @@ export class RichText extends Component {
 		const formatToolbar = (
 			<FormatToolbar
 				selectedNodeId={ this.state.selectedNodeId }
-				focusPosition={ this.state.focusPosition }
 				formats={ this.state.formats }
 				onChange={ this.changeFormats }
 				enabledControls={ formattingControls }

packages/dom/src/dom.js

@@ -454,6 +454,40 @@ export function getScrollContainer( node ) {
 	return getScrollContainer( node.parentNode );
 }
 
+/**
+ * Returns the closest positioned element, or null under any of the conditions
+ * of the offsetParent specification. Unlike offsetParent, this function is not
+ * limited to HTMLElement and accepts any Node (e.g. Node.TEXT_NODE).
+ *
+ * @see https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetparent
+ *
+ * @param {Node} node Node from which to find offset parent.
+ *
+ * @return {?Node} Offset parent.
+ */
+export function getOffsetParent( node ) {
+	// Cannot retrieve computed style or offset parent only anything other than
+	// an element node, so find the closest element node.
+	let closestElement;
+	while ( ( closestElement = node.parentNode ) ) {
+		if ( closestElement.nodeType === ELEMENT_NODE ) {
+			break;
+		}
+	}
+
+	if ( ! closestElement ) {
+		return null;
+	}
+
+	// If the closest element is already positioned, return it, as offsetParent
+	// does not otherwise consider the node itself.
+	if ( getComputedStyle( closestElement ).position !== 'static' ) {
+		return closestElement;
+	}
+
+	return closestElement.offsetParent;
+}
+
 /**
  * Given two DOM nodes, replaces the former with the latter in the DOM.
  *