From 2546d87a04ccfc2e50cb4d8e76d89771f03fd2d3 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 24 Jan 2024 12:23:43 +0200
Subject: [PATCH] add copy button to link UI

---
 .../components/link-control/link-preview.js   | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

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 5a5a30969d013c..17cc851c503a14 100644
--- a/packages/block-editor/src/components/link-control/link-preview.js
+++ b/packages/block-editor/src/components/link-control/link-preview.js
@@ -13,9 +13,12 @@ import {
 	__experimentalTruncate as Truncate,
 	Tooltip,
 } from '@wordpress/components';
+import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
-import { Icon, globe, info, linkOff, edit } from '@wordpress/icons';
+import { Icon, globe, info, linkOff, edit, copy } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -61,6 +64,14 @@ export default function LinkPreview( {
 		icon = <Icon icon={ globe } />;
 	}
 
+	const { createNotice } = useDispatch( noticesStore );
+	const ref = useCopyToClipboard( value.url, () => {
+		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	} );
+
 	return (
 		<div
 			aria-label={ __( 'Currently selected' ) }
@@ -130,6 +141,14 @@ export default function LinkPreview( {
 						size="compact"
 					/>
 				) }
+				<Button
+					icon={ copy }
+					label={ __( 'Copy URL' ) }
+					className="block-editor-link-control__search-item-action block-editor-link-control__copy"
+					ref={ ref }
+					disabled={ isEmptyURL }
+					size="compact"
+				/>
 				<ViewerSlot fillProps={ value } />
 			</div>
 			{ additionalControls && additionalControls() }