LinkControl: refined the display of the link preview title and url when both are same

packages/block-editor/src/components/link-control/link-preview.js

@@ -27,6 +27,20 @@ import { ViewerSlot } from './viewer-slot';
 
 import useRichUrlData from './use-rich-url-data';
 
+/**
+ * Filters the title for display. Removes the protocol and www prefix.
+ *
+ * @param {string} title The title to be filtered.
+ *
+ * @return {string} The filtered title.
+ */
+function filterTitleForDisplay( title ) {
+	// Dervied from `filterURLForDisplay` in `@wordpress/url`.
+	return title
+		.replace( /^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '' )
+		.replace( /^www\./i, '' );
+}
+
 export default function LinkPreview( {
 	value,
 	onEditClick,
@@ -59,6 +73,9 @@ export default function LinkPreview( {
 		! isEmptyURL &&
 		stripHTML( richData?.title || value?.title || displayURL );
 
+	const isUrlRedundant =
+		value?.url && filterTitleForDisplay( displayTitle ) === displayURL;
+
 	let icon;
 
 	if ( richData?.icon ) {
@@ -112,7 +129,7 @@ export default function LinkPreview( {
 										{ displayTitle }
 									</Truncate>
 								</ExternalLink>
-								{ value?.url && displayTitle !== displayURL && (
+								{ ! isUrlRedundant && (
 									<span className="block-editor-link-control__search-item-info">
 										<Truncate numberOfLines={ 1 }>
 											{ displayURL }

packages/url/src/filter-url-for-display.js

@@ -13,8 +13,14 @@
  * @return {string} Displayed URL.
  */
 export function filterURLForDisplay( url, maxLength = null ) {
+	if ( ! url ) {
+		return '';
+	}
+
 	// Remove protocol and www prefixes.
-	let filteredURL = url.replace( /^(?:https?:)\/\/(?:www\.)?/, '' );
+	let filteredURL = url
+		.replace( /^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '' )
+		.replace( /^www\./i, '' );
 
 	// Ends with / and only has that single slash, strip it.
 	if ( filteredURL.match( /^[^\/]+\/$/ ) ) {

packages/url/src/test/index.js

@@ -997,6 +997,12 @@ describe( 'filterURLForDisplay', () => {
 		expect( url ).toBe( 'wordpress.org' );
 		url = filterURLForDisplay( 'https://wordpress.org' );
 		expect( url ).toBe( 'wordpress.org' );
+		url = filterURLForDisplay( 'file:///folder/file.txt' );
+		expect( url ).toBe( '/folder/file.txt' );
+		url = filterURLForDisplay( 'tel:0123456789' );
+		expect( url ).toBe( '0123456789' );
+		url = filterURLForDisplay( 'blob:data' );
+		expect( url ).toBe( 'data' );
 	} );
 	it( 'should remove www subdomain', () => {
 		const url = filterURLForDisplay( 'http://www.wordpress.org' );
@@ -1030,18 +1036,28 @@ describe( 'filterURLForDisplay', () => {
 		expect( url ).toBe( 'wordpress.org/ig.jpg' );
 	} );
 	it( 'should return ellipsis, upper level pieces url, and filename when the url is long enough but filename is short enough', () => {
-		const url = filterURLForDisplay(
+		let url = filterURLForDisplay(
 			'http://www.wordpress.org/wp-content/uploads/myimage.jpg',
 			20
 		);
 		expect( url ).toBe( '…/uploads/myimage.jpg' );
+		url = filterURLForDisplay(
+			'file:///home/user/documents/project/reports/2024/myfile.pdf',
+			20
+		);
+		expect( url ).toBe( '…orts/2024/myfile.pdf' );
 	} );
 	it( 'should return filename split by ellipsis plus three characters when filename is long enough', () => {
-		const url = filterURLForDisplay(
+		let url = filterURLForDisplay(
 			'http://www.wordpress.org/wp-content/uploads/superlongtitlewithextension.jpeg',
 			20
 		);
 		expect( url ).toBe( 'superlongti…ion.jpeg' );
+		url = filterURLForDisplay(
+			'file:///home/user/documents/project/reports/2024/superlongtitlewithextension.pdf',
+			20
+		);
+		expect( url ).toBe( 'superlongtit…ion.pdf' );
 	} );
 	it( 'should remove query arguments', () => {
 		const url = filterURLForDisplay(
@@ -1058,11 +1074,16 @@ describe( 'filterURLForDisplay', () => {
 		expect( url ).toBe( 'wordpress.org/wp-content/url/' );
 	} );
 	it( 'should return file split by ellipsis when the file name has multiple periods', () => {
-		const url = filterURLForDisplay(
+		let url = filterURLForDisplay(
 			'http://www.wordpress.org/wp-content/uploads/filename.2020.12.20.png',
 			20
 		);
 		expect( url ).toBe( 'filename.202….20.png' );
+		url = filterURLForDisplay(
+			'file:///home/user/documents/project/reports/2024/filename.2020.12.20.png',
+			20
+		);
+		expect( url ).toBe( 'filename.202….20.png' );
 	} );
 } );