Writing Flow: Improve emulated caret positioning

editor/components/writing-flow/index.js

@@ -240,11 +240,20 @@ class WritingFlow extends Component {
 			return;
 		}
 
-		// Emulate a rect at which caret should be placed using mouse event.
-		const rect = target.getBoundingClientRect();
-		const targetRect = new DOMRect( event.clientX, rect.top, 0, rect.height );
+		// To generate a caret rect (where its height determines buffer offset
+		// for caret target point), the element must first be focused.
+		target.focus();
+		const rect = computeCaretRect( target );
+
+		// `computeCaretRect` may return undefined if it's unable to find a
+		// collapsed range.
+		if ( ! rect ) {
+			return;
+		}
 
-		placeCaretAtVerticalEdge( target, false, targetRect );
+		// Emulate a rect at which caret should be placed using mouse event.
+		const targetRect = new DOMRect( event.clientX, 0, 0, rect.height );
+		placeCaretAtVerticalEdge( target, true, targetRect );
 	}
 
 	render() {

utils/dom.js

@@ -271,6 +271,12 @@ export function placeCaretAtVerticalEdge( container, isReverse, rect, mayUseScro
 		return;
 	}
 
+	// Offset by a buffer half the height of the caret rect. This is needed
+	// because caretRangeFromPoint may default to the end of the selection if
+	// offset is too close to the edge. It's unclear how to precisely calculate
+	// this threshold; it may be the padded area of some combination of line
+	// height, caret height, and font size. The buffer offset is effectively
+	// equivalent to a point at half the height of a line of text.
 	const buffer = rect.height / 2;
 	const editableRect = container.getBoundingClientRect();
 	const x = rect.left + ( rect.width / 2 );