Force Link UI to appear below a link if one is selected

Add custom logic that makes the FormatToolbar render the Link UI under
the link node if a link is focused. If something else is focused,
position the Link UI underneath the cursor or selection. This stops the
Link UI from dancing around when you click on a link.

blocks/rich-text/index.js

@@ -652,10 +652,11 @@ export class RichText extends Component {
 		);
 	}
 
-	onNodeChange( { parents } ) {
+	onNodeChange( { element, parents } ) {
 		if ( document.activeElement !== this.editor.getBody() ) {
 			return;
 		}
+
 		const formatNames = this.props.formattingControls;
 		const formats = this.editor.formatter.matchAll( formatNames ).reduce( ( accFormats, activeFormat ) => {
 			accFormats[ activeFormat ] = {
@@ -666,7 +667,15 @@ export class RichText extends Component {
 			return accFormats;
 		}, {} );
 
-		const rect = getRectangleFromRange( this.editor.selection.getRng() );
+		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 } );