Add green check to copy button (#954)

denoland · Oct 7, 2024 · 6a3f16d · 6a3f16d
1 parent f459b07
commit 6a3f16d
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 10 deletions.
diff --git a/markdown-it/codeblock-copy.ts b/markdown-it/codeblock-copy.ts
@@ -11,14 +11,44 @@ export default function codeblockCopyPlugin(md: any) {
  self,
  ) {
  const render = defaultRender(tokens, idx, options, env, self);
- return `<div class="relative">${render}<button class="copyButton" data-copy="${
- tokens[idx].content.replaceAll('"', "&quot;").replaceAll("'", "&apos;")
- }" title="Copy">
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="2" width="7" height="7" fill="none"/>
-<rect x="6" y="6" width="7" height="7" fill="none"/>
-<path d="M1.55566 2.7C1.55566 2.03726 2.09292 1.5 2.75566 1.5H8.75566C9.41841 1.5 9.95566 2.03726 9.95566 2.7V5.1H12.3557C13.0184 5.1 13.5557 5.63726 13.5557 6.3V12.3C13.5557 12.9627 13.0184 13.5 12.3557 13.5H6.35566C5.69292 13.5 5.15566 12.9627 5.15566 12.3V9.9H2.75566C2.09292 9.9 1.55566 9.36274 1.55566 8.7V2.7ZM6.35566 9.9V12.3H12.3557V6.3H9.95566V8.7C9.95566 9.36274 9.41841 9.9 8.75566 9.9H6.35566ZM8.75566 8.7V2.7H2.75566V8.7H8.75566Z" fill="#232323"/>
-</svg>
-</button></div>`;
+ const uniqueId = `copy-button-${idx}`;
+ const content = tokens[idx].content.replaceAll('"', "&quot;").replaceAll(
+ "'",
+ "&apos;",
+ );
+
+ const buttonHtml = `
+ <button id="${uniqueId}" class="copyButton" data-copy="${content}" title="Copy">
+ <svg class="copy-icon" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect x="2" y="2" width="7" height="7" fill="none"/>
+ <rect x="6" y="6" width="7" height="7" fill="none"/>
+ <path d="M1.55566 2.7C1.55566 2.03726 2.09292 1.5 2.75566 1.5H8.75566C9.41841 1.5 9.95566 2.03726 9.95566 2.7V5.1H12.3557C13.0184 5.1 13.5557 5.63726 13.5557 6.3V12.3C13.5557 12.9627 13.0184 13.5 12.3557 13.5H6.35566C5.69292 13.5 5.15566 12.9627 5.15566 12.3V9.9H2.75566C2.09292 9.9 1.55566 9.36274 1.55566 8.7V2.7ZM6.35566 9.9V12.3H12.3557V6.3H9.95566V8.7C9.95566 9.36274 9.41841 9.9 8.75566 9.9H6.35566ZM8.75566 8.7V2.7H2.75566V8.7H8.75566Z" fill="#232323"/>
+ </svg>
+ <svg class="check-icon hidden" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M3 7.5L6.5 11L12 3" stroke="green" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ </button>
+ `;
+
+ const script = `
+ <script>
+ (function() {
+ const button = document.getElementById('${uniqueId}');
+ button.addEventListener('click', function() {
+ const textToCopy = this.getAttribute('data-copy');
+ navigator.clipboard.writeText(textToCopy).then(() => {
+ this.querySelector('.copy-icon').classList.add('hidden');
+ this.querySelector('.check-icon').classList.remove('hidden');
+ setTimeout(() => {
+ this.querySelector('.copy-icon').classList.remove('hidden');
+ this.querySelector('.check-icon').classList.add('hidden');
+ }, 2000);
+ });
+ });
+ })();
+ </script>
+ `;
+
+ return `<div class="relative">${render}${buttonHtml}${script}</div>`;
  };
 }
diff --git a/styles.css b/styles.css
@@ -132,7 +132,7 @@ body:not(:has(.ddoc)) {
 
  &:hover,
  &:focus {
- @apply opacity-100 bg-gray-200;
+ @apply opacity-100 bg-gray-100;
  }
 
  &:active {
@@ -505,3 +505,11 @@ body:not(:has(.ddoc)) {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
 }
+
+.copyButton[data-copied="true"] .copy-icon {
+ display: none;
+}
+
+.copyButton[data-copied="true"] .check-icon {
+ display: inline;
+}