Fix: Add fallback for clipboard.writeText (#7314)

pods-framework · Aug 27, 2024 · b4f492c · b4f492c
2 parents fea6f2d + 371a07b
commit b4f492c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/ui/js/dfv/src/components/copy-button.js b/ui/js/dfv/src/components/copy-button.js
@@ -4,14 +4,34 @@ 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 );
 	const handleClick = async () => {
 		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 ? (
 				<span>
-					({ __( 'Copied name', 'pods' ) })
+					({ __( 'Copied', 'pods' ) })
 				</span>
 			) : (
 				<svg

diff --git a/ui/js/dfv/src/components/copy-button.scss b/ui/js/dfv/src/components/copy-button.scss
@@ -1,9 +1,11 @@
 .pods-field_copy-button {
     opacity: 0;
+    padding: 1px;
+    display: inline-flex;
 
     svg {
-        width: 12px;
-        height: 12px;
+      width: 12px;
+      height: 12px;
     }
 
 	@media screen and (max-width: 850px) {