diff --git a/ui/js/dfv/src/components/copy-button.js b/ui/js/dfv/src/components/copy-button.js index 374d5d383d..dbd0c674a8 100644 --- a/ui/js/dfv/src/components/copy-button.js +++ b/ui/js/dfv/src/components/copy-button.js @@ -4,6 +4,26 @@ import { __ } from '@wordpress/i18n'; import './copy-button.scss'; +const copyToClipboard = async ( text ) => { + try { + // @link https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText + // clipboard.writeText only works in secure context (https). + await navigator.clipboard.writeText( text ); + } catch { + // Fallback for older browsers, or in unsecure contexts (http). + const input = document.createElement( 'input' ); + input.style.position = 'fixed'; + input.style.left = '-9999px'; + input.style.top = '-9999px'; + document.body.appendChild( input ); + input.value = text; + input.select(); + document.execCommand( 'copy' ); + document.body.removeChild( input ); + Promise.resolve(); + } +}; + // https://lucide.dev/icons/copy const CopyButton = ( { label, textToCopy, onClick } ) => { const [ copied, setCopied ] = useState( false ); @@ -11,7 +31,7 @@ const CopyButton = ( { label, textToCopy, onClick } ) => { if ( onClick ) { onClick(); } else { - await navigator.clipboard.writeText( textToCopy ); + await copyToClipboard( textToCopy ); } setCopied( true ); const timeout = setTimeout( () => { @@ -27,7 +47,7 @@ const CopyButton = ( { label, textToCopy, onClick } ) => { > { copied ? ( - ({ __( 'Copied name', 'pods' ) }) + ({ __( 'Copied', 'pods' ) }) ) : (