Update code snippets to show button on hover (#3561)

Signed-off-by: Aaron Crawfis <[email protected]>

daprdocs/assets/scss/_code.scss

@@ -1,64 +1,44 @@
 // Code formatting.
 
-.copy-code-button {
-    color: #272822;
-    background-color: #FFF;
-    border-color: #0D2192;
-    border: 2px solid;
-    border-radius: 3px 3px 0px 0px;
-
-    /* right-align */
-    display: block;
-    margin-left: auto;
-    margin-right: 0;
-
-    margin-bottom: -2px;
-    padding: 3px 8px;
-    font-size: 0.8em;
+.highlight .copy-icon {
+    position: absolute;
+    right: 20px;
+    top: 18px;
+    opacity: 0.7;
 }
 
-.copy-code-button:hover {
-    cursor: pointer;
-    background-color: #F2F2F2;
-}
-
-.copy-code-button:focus {
-    /* Avoid an ugly focus outline on click in Chrome,
-       but darken the button for accessibility.
-       See https://stackoverflow.com/a/25298082/1481479 */
-    background-color: #E6E6E6;
-    outline: 0;
-}
-
-.copy-code-button:active {
-    background-color: #D9D9D9;
-}
 
 .highlight pre {
     /* Avoid pushing up the copy buttons. */
     margin: 0;
 }
 
 .td-content {
-	// Highlighted code.
+
+    // Highlighted code.
     .highlight {
         @extend .card;
-	
+
         margin: 0rem 0;
         padding: 0rem;
 
         margin-bottom: 2rem;
 
         max-width: 100%;
-
+
+        border: none;
+
         pre {
             margin: 0;
             padding: 1rem;
+            border-radius: 10px;
         }
     }
 
     // Inline code
-    p code, li > code, table code {
+    p code,
+    li>code,
+    table code {
         color: inherit;
         padding: 0.2em 0.4em;
         margin: 0;
@@ -78,11 +58,11 @@
         word-wrap: normal;
         background-color: $gray-100;
         padding: $spacer;
-    
+
         max-width: 100%;
 
-        > code {
-	    background-color: inherit !important;
+        >code {
+            background-color: inherit !important;
             padding: 0;
             margin: 0;
             font-size: 100%;

daprdocs/static/js/copy-code-button.js

@@ -1,49 +1,35 @@
-function addCopyButtons(clipboard) {
-    document.querySelectorAll('pre > code').forEach(function(codeBlock) {
-        var button = document.createElement('button');
-        button.className = 'copy-code-button';
-        button.type = 'button';
-        button.innerText = 'Copy';
+const highlightClass = document.querySelectorAll('.highlight');
 
-        button.addEventListener('click', function() {
-            clipboard.writeText(codeBlock.textContent).then(
-                function() {
-                    button.blur();
+highlightClass.forEach(element => {
+  const copyIcon = document.createElement('i');
+  copyIcon.classList.add('fas', 'fa-copy', 'copy-icon');
+  copyIcon.style.color = 'white';
+  copyIcon.style.display = 'none';
+  element.appendChild(copyIcon);
 
-                    button.innerText = 'Copied!';
-                    setTimeout(function() {
-                        button.innerText = 'Copy';
-                    }, 2000);
-                },
-                function(error) {
-                    button.innerText = 'Error';
-                    console.error(error);
-                }
-            );
-        });
+  element.addEventListener('mouseenter', () => {
+    copyIcon.style.display = 'inline';
+  });
 
-        var pre = codeBlock.parentNode;
-        if (pre.parentNode.classList.contains('highlight')) {
-            var highlight = pre.parentNode;
-            highlight.parentNode.insertBefore(button, highlight);
-        } else {
-            pre.parentNode.insertBefore(button, pre);
-        }
-    });
-}
+  element.addEventListener('mouseleave', () => {
+    copyIcon.style.display = 'none';
+    copyIcon.classList.replace('fa-check', 'fa-copy');
+  });
 
-if (navigator && navigator.clipboard) {
-    addCopyButtons(navigator.clipboard);
-} else {
-    var script = document.createElement('script');
-    script.src =
-        'https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js';
-    script.integrity = 'sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=';
-    script.crossOrigin = 'anonymous';
+  copyIcon.addEventListener('click', async () => {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    selection.removeAllRanges();
+    selection.addRange(range);
 
-    script.onload = function() {
-        addCopyButtons(clipboard);
-    };
-
-    document.body.appendChild(script);
-}
+    try {
+      await navigator.clipboard.writeText(selection.toString());
+      console.log('Text copied to clipboard');
+      copyIcon.classList.replace('fa-copy', 'fa-check');
+      selection.removeAllRanges();
+    } catch (error) {
+      console.error('Failed to copy: ', error);
+    }
+  });
+});