Docs: added copy button to non-inline code snippets (#29700)

* docs: added copy button to non-inline code snippets

* docs: copy button icons img path update

docs/page.css

@@ -156,6 +156,10 @@ ul code {
 	margin: 16px 0;
 }
 
+code {
+	position: relative;
+}
+
 code.inline {
 	display: inline-block;
 	vertical-align: middle;
@@ -165,6 +169,32 @@ code.inline {
 	margin: 0;
 }
 
+.copy-btn {
+	cursor: pointer;
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	width: 24px;
+	height: 24px;
+	background-color: transparent;
+	background-image: url('../files/ic_copy_grey_24dp.svg');
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+	opacity: 0.9;
+	border: none;
+}
+
+.copy-btn:hover {
+	opacity: 1;
+}
+
+.copy-btn.copied {
+	pointer-events: none;
+	opacity: 1;
+	background-image: url('../files/ic_tick_green_24dp.svg');
+}
+
 table {
 	width: 100%;
 	border-collapse: collapse;
@@ -315,4 +345,10 @@ a.param:hover {
 		line-height: 28px;
 	}
 
+	.copy-btn {
+		top: 12px;
+		right: 8px;
+		width: 20px;
+		height: 20px;
+	}
 }

docs/page.js

@@ -125,6 +125,34 @@ function onDocumentLoad() {
 
 	}
 
+	// create copy button for copying code snippets
+
+	function addCopyButton( element ) {
+
+		const copyButton = document.createElement( 'button' );
+		copyButton.className = 'copy-btn';
+
+		element.appendChild( copyButton );
+
+		copyButton.addEventListener( 'click', function () {
+
+			const codeContent = element.textContent;
+			navigator.clipboard.writeText( codeContent ).then( () => {
+
+				copyButton.classList.add( 'copied' );
+
+				setTimeout( () => {
+
+					copyButton.classList.remove( 'copied' );
+
+				}, 1000 );
+
+			} );
+
+		} );
+
+	}
+
 	const elements = document.getElementsByTagName( 'code' );
 
 	for ( let i = 0; i < elements.length; i ++ ) {
@@ -133,6 +161,12 @@ function onDocumentLoad() {
 
 		element.textContent = dedent( element.textContent );
 
+		if ( ! element.classList.contains( 'inline' ) ) {
+
+			addCopyButton( element );
+
+		}
+
 	}
 
 	// Edit button

files/ic_copy_grey_24dp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#9da0b0" d="M21 8.94a1.3 1.3 0 0 0-.06-.27v-.09a1 1 0 0 0-.19-.28l-6-6a1 1 0 0 0-.28-.19a.3.3 0 0 0-.09 0a.9.9 0 0 0-.33-.11H10a3 3 0 0 0-3 3v1H6a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-1h1a3 3 0 0 0 3-3zm-6-3.53L17.59 8H16a1 1 0 0 1-1-1ZM15 19a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1v7a3 3 0 0 0 3 3h5Zm4-4a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3v3a3 3 0 0 0 3 3h3Z"/>
+</svg>

files/ic_tick_green_24dp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16">
+  <path fill="none" stroke="#53B74F" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.75 8.75l3.5 3.5l7-7.5"/>
+</svg>