Make Link UI inactive if selection extends beyond format bounds or encounters new link

packages/block-editor/src/components/rich-text/format-edit.js

@@ -1,7 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+import {
+	getActiveFormat,
+	getActiveObject,
+	isCollapsed,
+} from '@wordpress/rich-text';
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
 
 export default function FormatEdit( {
 	formatTypes,
@@ -18,11 +26,37 @@ export default function FormatEdit( {
 		}
 
 		const activeFormat = getActiveFormat( value, name );
-		const isActive = activeFormat !== undefined;
+		let isActive = activeFormat !== undefined;
 		const activeObject = getActiveObject( value );
 		const isObjectActive =
 			activeObject !== undefined && activeObject.type === name;
 
+		// Edge case: un-collapsed link formats.
+		// If there is a missing link format at either end of the selection
+		// then we shouldn't show the Edit UI because the selection has exceeded
+		// the bounds of the link format.
+		// Also if the format objects don't match then we're dealing with two separate
+		// links so we should not allow the link to be modified over the top.
+		if ( name === 'core/link' && ! isCollapsed( value ) ) {
+			const formats = value.formats;
+
+			const linkFormatAtStart = find( formats[ value.start ], {
+				type: 'core/link',
+			} );
+
+			const linkFormatAtEnd = find( formats[ value.end - 1 ], {
+				type: 'core/link',
+			} );
+
+			if (
+				! linkFormatAtStart ||
+				! linkFormatAtEnd ||
+				linkFormatAtStart !== linkFormatAtEnd
+			) {
+				isActive = false;
+			}
+		}
+
 		return (
 			<Edit
 				key={ name }

packages/e2e-tests/specs/editor/various/links.test.js

@@ -588,4 +588,158 @@ describe( 'Links', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	describe( 'Disabling Link UI active state', () => {
+		it( 'should not show the Link UI when selection extends beyond link boundary', async () => {
+			const linkedText = `Gutenberg`;
+			const textBeyondLinkedText = ` and more text.`;
+
+			// Create a block with some text
+			await clickBlockAppender();
+			await page.keyboard.type(
+				`This is ${ linkedText }${ textBeyondLinkedText }`
+			);
+
+			// Move cursor next to end of `linkedText`
+			for (
+				let index = 0;
+				index < textBeyondLinkedText.length;
+				index++
+			) {
+				await page.keyboard.press( 'ArrowLeft' );
+			}
+
+			// Select the linkedText
+			await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
+
+			// Click on the Link button
+			await page.click( 'button[aria-label="Link"]' );
+
+			// Wait for the URL field to auto-focus
+			await waitForAutoFocus();
+
+			// Type a URL
+			await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+			// Update the link
+			await page.keyboard.press( 'Enter' );
+
+			await page.keyboard.press( 'ArrowLeft' );
+			await page.keyboard.press( 'ArrowLeft' );
+
+			expect(
+				await page.$(
+					'.components-popover__content .block-editor-link-control'
+				)
+			).not.toBeNull();
+
+			// Make selection starting within the link and moving beyond boundary to the left.
+			for ( let index = 0; index < linkedText.length; index++ ) {
+				await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+			}
+
+			// The Link UI should have disappeared (i.e. be inactive).
+			expect(
+				await page.$(
+					'.components-popover__content .block-editor-link-control'
+				)
+			).toBeNull();
+
+			// Cancel selection and move back within the Link.
+			await page.keyboard.press( 'ArrowRight' );
+
+			// We should see the Link UI displayed again.
+			expect(
+				await page.$(
+					'.components-popover__content .block-editor-link-control'
+				)
+			).not.toBeNull();
+
+			// Make selection starting within the link and moving beyond boundary to the right.
+			await pressKeyWithModifier( 'shift', 'ArrowRight' );
+			await pressKeyWithModifier( 'shift', 'ArrowRight' );
+			await pressKeyWithModifier( 'shift', 'ArrowRight' );
+
+			// The Link UI should have disappeared (i.e. be inactive).
+			expect(
+				await page.$(
+					'.components-popover__content .block-editor-link-control'
+				)
+			).toBeNull();
+		} );
+
+		it( 'should not show the Link UI when selection extends into another link', async () => {
+			const linkedTextOne = `Gutenberg`;
+			const linkedTextTwo = `Block Editor`;
+			const linkOneURL = 'https://wordpress.org';
+			const linkTwoURL = 'https://wordpress.org/gutenberg';
+
+			// Create a block with some text
+			await clickBlockAppender();
+			await page.keyboard.type(
+				`This is the ${ linkedTextOne }${ linkedTextTwo }`
+			);
+
+			// Select the linkedTextTwo
+			for ( let index = 0; index < linkedTextTwo.length; index++ ) {
+				await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+			}
+
+			// Click on the Link button
+			await page.click( 'button[aria-label="Link"]' );
+
+			// Wait for the URL field to auto-focus
+			await waitForAutoFocus();
+
+			// Type a URL
+			await page.keyboard.type( linkTwoURL );
+
+			// Update the link
+			await page.keyboard.press( 'Enter' );
+
+			// Move cursor next to the **end** of `linkTextOne`
+			for ( let index = 0; index < linkedTextTwo.length + 2; index++ ) {
+				await page.keyboard.press( 'ArrowLeft' );
+			}
+
+			// Select `linkTextOne`
+			await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
+
+			// Click on the Link button
+			await page.click( 'button[aria-label="Link"]' );
+
+			// Wait for the URL field to auto-focus
+			await waitForAutoFocus();
+
+			// Type a URL
+			await page.keyboard.type( linkOneURL );
+
+			// Update the link
+			await page.keyboard.press( 'Enter' );
+
+			// Move cursor within `linkTextOne`
+			for ( let index = 0; index < 3; index++ ) {
+				await page.keyboard.press( 'ArrowLeft' );
+			}
+
+			// Link UI should activate for `linkTextOne`
+			expect(
+				await page.$(
+					'.components-popover__content .block-editor-link-control'
+				)
+			).not.toBeNull();
+
+			// Expand selection so that it overlaps with `linkTextTwo`
+			for ( let index = 0; index < 3; index++ ) {
+				await pressKeyWithModifier( 'shift', 'ArrowRight' );
+			}
+
+			// Link UI should be inactive.
+			expect(
+				await page.$(
+					'.components-popover__content .block-editor-link-control'
+				)
+			).toBeNull();
+		} );
+	} );
 } );