Writing flow: fix edge detection in Chrome (#31150)

* Writing flow: fix edge detection in Chrome

* Reduce loops

packages/dom/src/dom/get-rectangle-from-range.js

@@ -15,7 +15,45 @@ export default function getRectangleFromRange( range ) {
 	// range; this a rectangle enclosing the union of the bounding rectangles
 	// for all the elements in the range.
 	if ( ! range.collapsed ) {
-		return range.getBoundingClientRect();
+		const rects = Array.from( range.getClientRects() );
+
+		// If there's just a single rect, return it.
+		if ( rects.length === 1 ) {
+			return rects[ 0 ];
+		}
+
+		// Ignore tiny selection at the edge of a range.
+		const filteredRects = rects.filter( ( { width } ) => width > 1 );
+
+		// If it's full of tiny selections, return browser default.
+		if ( filteredRects.length === 0 ) {
+			return range.getBoundingClientRect();
+		}
+
+		if ( filteredRects.length === 1 ) {
+			return filteredRects[ 0 ];
+		}
+
+		let {
+			top: furthestTop,
+			bottom: furthestBottom,
+			left: furthestLeft,
+			right: furthestRight,
+		} = filteredRects[ 0 ];
+
+		for ( const { top, bottom, left, right } of filteredRects ) {
+			if ( top < furthestTop ) furthestTop = top;
+			if ( bottom > furthestBottom ) furthestBottom = bottom;
+			if ( left < furthestLeft ) furthestLeft = left;
+			if ( right > furthestRight ) furthestRight = right;
+		}
+
+		return new window.DOMRect(
+			furthestLeft,
+			furthestTop,
+			furthestRight - furthestLeft,
+			furthestBottom - furthestTop
+		);
 	}
 
 	const { startContainer } = range;