From bd6e764e1ba988d35ab17b5cfcb678715051fdd0 Mon Sep 17 00:00:00 2001
From: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date: Mon, 10 Jun 2024 19:08:06 +0530
Subject: [PATCH] LinkControl: refined the display of the link preview title
 and url when 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>
---
 .../components/link-control/link-preview.js   | 19 ++++++++++++++++++-
 packages/url/src/filter-url-for-display.js    |  8 +++++++-
 packages/url/src/test/index.js                | 12 ++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js
index fb4b3658e2a4f1..d06c9971c680bf 100644
--- a/packages/block-editor/src/components/link-control/link-preview.js
+++ b/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 }
diff --git a/packages/url/src/filter-url-for-display.js b/packages/url/src/filter-url-for-display.js
index eede264e8e801a..436070b667a3e6 100644
--- a/packages/url/src/filter-url-for-display.js
+++ b/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( /^[^\/]+\/$/ ) ) {
diff --git a/packages/url/src/test/index.js b/packages/url/src/test/index.js
index 0051b9b89fc73e..bd48105baed96d 100644
--- a/packages/url/src/test/index.js
+++ b/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' );