fix(clayui.com): fix clipboard error in examples

liferay · Jul 6, 2022 · 3ad788b · 3ad788b
1 parent 04cf8b6
commit 3ad788b
Showing 1 changed file with 44 additions and 39 deletions.
diff --git a/clayui.com/src/components/CodeClipboard/CodeClipboard.js b/clayui.com/src/components/CodeClipboard/CodeClipboard.js
@@ -8,51 +8,56 @@ import {useEffect} from 'react';
 
 export default (props) => {
 	useEffect(() => {
-		const clayClipboard = new Clipboard('.tab-pane .btn-copy', {
-			text: (delegateTarget) => {
-				const buttonContent = delegateTarget.innerHTML;
-				const gatsbyHighlightContainer =
-					delegateTarget.closest('.gatsby-highlight') ||
-					delegateTarget.closest('.code-container');
-				const jspTab = gatsbyHighlightContainer.querySelector(
-					'[aria-labelledby="tab-JSP"]'
-				);
-				const reactTab = gatsbyHighlightContainer.querySelector(
-					'[aria-labelledby="tab-React"]'
-				);
-
-				delegateTarget.innerHTML = delegateTarget.innerHTML.replace(
-					/paste/g,
-					'check'
-				);
-
-				delegateTarget.setAttribute('title', 'Copied');
-
-				gatsbyHighlightContainer
-					.querySelector('.copied-alert')
-					.classList.remove('d-none');
-
-				setTimeout(() => {
-					delegateTarget.setAttribute('title', 'Copy');
-
-					delegateTarget.innerHTML = buttonContent;
+		const clayClipboard = new Clipboard(
+			'.gatsby-highlight .btn-copy, .code-container .btn[title=Copy]',
+			{
+				text: (delegateTarget) => {
+					const buttonContent = delegateTarget.innerHTML;
+					const gatsbyHighlightContainer =
+						delegateTarget.closest('.gatsby-highlight') ||
+						delegateTarget.closest('.code-container');
+					const jspTab = gatsbyHighlightContainer.querySelector(
+						'[aria-labelledby="tab-JSP"]'
+					);
+					const reactTab = gatsbyHighlightContainer.querySelector(
+						'[aria-labelledby="tab-React"]'
+					);
+
+					delegateTarget.innerHTML = delegateTarget.innerHTML.replace(
+						/paste/g,
+						'check'
+					);
+
+					delegateTarget.setAttribute('title', 'Copied');
 
 					gatsbyHighlightContainer
 						.querySelector('.copied-alert')
-						.classList.add('d-none');
-				}, 2000);
+						.classList.remove('d-none');
+
+					setTimeout(() => {
+						delegateTarget.setAttribute('title', 'Copy');
+
+						delegateTarget.innerHTML = buttonContent;
+
+						gatsbyHighlightContainer
+							.querySelector('.copied-alert')
+							.classList.add('d-none');
+					}, 2000);
 
-				let codeContent =
-					gatsbyHighlightContainer.querySelector('pre code') ||
-					(reactTab.classList.contains('active') ? reactTab : jspTab);
+					let codeContent =
+						gatsbyHighlightContainer.querySelector('pre code') ||
+						(reactTab.classList.contains('active')
+							? reactTab
+							: jspTab);
 
-				if (codeContent) {
-					codeContent = codeContent.innerText;
-				}
+					if (codeContent) {
+						codeContent = codeContent.innerText;
+					}
 
-				return codeContent;
-			},
-		});
+					return codeContent;
+				},
+			}
+		);
 
 		return () => {
 			clayClipboard.destroy();