LinkControl: Provides better way to see the full URLs

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

@@ -24,6 +24,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 import { ViewerSlot } from './viewer-slot';
+import trimLongURL from './trim-long-url';
 
 import useRichUrlData from './use-rich-url-data';
 
@@ -52,6 +53,8 @@ export default function LinkPreview( {
 		( value && filterURLForDisplay( safeDecodeURI( value.url ), 24 ) ) ||
 		'';
 
+	const trimmedURL = trimLongURL( displayURL );
+
 	// url can be undefined if the href attribute is unset
 	const isEmptyURL = ! value?.url?.length;
 
@@ -114,8 +117,8 @@ export default function LinkPreview( {
 								</ExternalLink>
 								{ value?.url && displayTitle !== displayURL && (
 									<span className="block-editor-link-control__search-item-info">
-										<Truncate numberOfLines={ 1 }>
-											{ displayURL }
+										<Truncate numberOfLines={ 4 }>
+											{ trimmedURL }
 										</Truncate>
 									</span>
 								) }

packages/block-editor/src/components/link-control/trim-long-url.js

@@ -0,0 +1,66 @@
+/**
+ * Trims a long URL to a more concise format for display.
+ *
+ * This function intelligently handles long URLs by removing unnecessary parts such as protocol, www prefix,
+ * query string, fragment, index.html, and trailing slash. If the URL is longer than 40 characters,
+ * it shortens it by showing relevant parts of the URL.
+ *
+ * @param {string} url - The URL to be trimmed.
+ *
+ * @return {string} The trimmed URL.
+ */
+export default function trimLongURL( url ) {
+	let trimmedURL = url;
+
+	// Decode URL
+	trimmedURL = decodeURIComponent( trimmedURL );
+
+	// Remove protocol and www prefix
+	trimmedURL = trimmedURL.replace( /^(?:https?:)?\/\/(?:www\.)?/, '' );
+
+	// Remove query string
+	const queryStringIndex = trimmedURL.indexOf( '?' );
+	if ( queryStringIndex !== -1 ) {
+		trimmedURL = trimmedURL.slice( 0, queryStringIndex );
+	}
+
+	// Remove fragment
+	const fragmentIndex = trimmedURL.indexOf( '#' );
+	if ( fragmentIndex !== -1 ) {
+		trimmedURL = trimmedURL.slice( 0, fragmentIndex );
+	}
+
+	// Remove index.html
+	trimmedURL = trimmedURL.replace( /(?:index)?\.html$/, '' );
+
+	// Remove trailing slash
+	if ( trimmedURL.charAt( trimmedURL.length - 1 ) === '/' ) {
+		trimmedURL = trimmedURL.slice( 0, -1 );
+	}
+
+	// Shorten URL if longer than 40 characters
+	if ( trimmedURL.length > 40 ) {
+		const firstSlashIndex = trimmedURL.indexOf( '/' );
+		const lastSlashIndex = trimmedURL.lastIndexOf( '/' );
+		if (
+			firstSlashIndex !== -1 &&
+			lastSlashIndex !== -1 &&
+			lastSlashIndex !== firstSlashIndex
+		) {
+			// If beginning + ending are shorter than 40 chars, show more of the ending
+			if ( firstSlashIndex + trimmedURL.length - lastSlashIndex < 40 ) {
+				trimmedURL =
+					trimmedURL.slice( 0, firstSlashIndex + 1 ) +
+					'\u2026' +
+					trimmedURL.slice( -( 40 - ( firstSlashIndex + 1 ) ) );
+			} else {
+				trimmedURL =
+					trimmedURL.slice( 0, firstSlashIndex + 1 ) +
+					'\u2026' +
+					trimmedURL.slice( lastSlashIndex );
+			}
+		}
+	}
+
+	return trimmedURL;
+}