LinkControl: refined the display of the link preview title and url wh…

…en both are same (#61819)

* Add removeProtocol function to URL package

* Fix redundant link preview display when link text includes protocol in LinkControl.

* Changed regex for stripDomainPrefixes to handle all protocols

* Add unit tests for stripDomainPrefixes function

* Refactor URL filtering logic

* Change variable name

* Moved filterTitleForDisplay outside of component

* Adds test cases for the updated regex

* Fix typos and remove redundant tests for filterURLForDisplay

* Fix isUrlRedundant check in LinkPreview component

* Add test case for empty or falsy URL in filterURLForDisplay function

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

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 ) {
+	// Derived 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

@@ -992,11 +992,23 @@ describe( 'safeDecodeURI', () => {
 } );
 
 describe( 'filterURLForDisplay', () => {
+	it( 'should return an empty string if the url is empty or falsy', () => {
+		let url = filterURLForDisplay( '' );
+		expect( url ).toBe( '' );
+		url = filterURLForDisplay( null );
+		expect( url ).toBe( '' );
+	} );
 	it( 'should remove protocol', () => {
 		let url = filterURLForDisplay( 'http://wordpress.org' );
 		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' );