docs: added copy to clipboard for each code block (#2616)

Co-authored-by: Tony Brix <tony@brix.ninja>

docs/_document.html

@@ -80,32 +80,6 @@ <h1>Marked Documentation</h1>
             <div id="content"><!--{{content}}--></div>
         </div>
     </div>
-    <script>
-        var match = new RegExp('#/(.+)\\.md(.*)', 'g').exec(window.location.hash);
-        if (match && match[1]) {
-            // Redirect from URL format to new URL, for example:
-            // Old: https://marked.js.org/#/USING_PRO.md#renderer
-            // New: https://marked.js.org/using_pro#renderer
-            var pageName = match[1].toLowerCase();
-            var sectionName = match[2];
-            window.location.href = '/' + pageName + sectionName;
-        }
-
-        var navLinks = document.querySelectorAll('nav a');
-
-        function hashChange() {
-            var fullUrl = window.location.href;
-            navLinks.forEach(function(link) {
-                link.className = link.href === fullUrl ? 'selected' : '';
-            });
-        }
-
-        window.addEventListener('hashchange', function (e) {
-            e.preventDefault();
-            hashChange();
-        });
-
-        hashChange();
-    </script>
+    <script src="/js/index.js"></script>
 </body>
 </html>

docs/css/style.css

@@ -94,6 +94,7 @@ pre {
     line-height: 1.45;
     background-color: #f6f8fa;
     border-radius: 3px;
+    position: relative;
 }
 
 code:not([class]) {
@@ -104,4 +105,97 @@ code:not([class]) {
     border-radius: 3px;
 }
 
-.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+.github-corner:hover .octo-arm {
+    animation:octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+    0%,100%{transform:rotate(0)}
+    20%,60%{transform:rotate(-25deg)}
+    40%,80%{transform:rotate(10deg)}
+}
+
+@media (max-width:500px) {
+    .github-corner:hover .octo-arm {
+        animation:none
+    }
+
+    .github-corner .octo-arm {
+        animation:octocat-wave 560ms ease-in-out;
+    }
+}
+
+.div-copy {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.div-copy .icon-copy {
+    opacity: 0;
+    transition: opacity .3s;
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+    padding: 5px;
+}
+
+.div-copy.active .icon-copy {
+    opacity: 1;
+}
+
+.div-copy .tooltip-copy {
+    position: relative;
+}
+
+.div-copy .tooltip-copy::before {
+    content: "Copied";
+    position: absolute;
+
+    /* vertically center */
+    top: 50%;
+    transform: translateY(-50%);
+
+    /* move to right */
+    right: 100%;
+    margin-right: 5px; /* and add a small left margin */
+
+    /* basic styles */
+    padding: 2px 7px;
+    border-radius: 5px;
+    background: #444;
+    color: #fff;
+    text-align: center;
+
+    opacity: 0; /* hide by default */
+    transition: opacity .3s;
+}
+
+.div-copy.click .tooltip-copy::before {
+    opacity: 1;
+}
+
+.div-copy .tooltip-copy::after {
+    content: "";
+    position: absolute;
+
+    /* position tooltip correctly */
+    right: 100%;
+    margin-right: -5px;
+
+    /* vertically center */
+    top: 50%;
+    transform: translateY(-50%);
+
+    /* the arrow */
+    border-style: solid;
+    border-width: 2px 2px 5px 8px;
+    border-color: transparent transparent transparent #444;
+
+    opacity: 0;
+    transition: opacity .3s;
+}
+
+.div-copy.click .tooltip-copy::after {
+    opacity: 1;
+}

docs/js/index.js

@@ -0,0 +1,55 @@
+
+var match = /#\/(.+)\\.md(.*)/g.exec(window.location.hash);
+if (match && match[1]) {
+  // Redirect from URL format to new URL, for example:
+  // Old: https://marked.js.org/#/USING_PRO.md#renderer
+  // New: https://marked.js.org/using_pro#renderer
+  var pageName = match[1].toLowerCase();
+  var sectionName = match[2];
+  window.location.href = '/' + pageName + sectionName;
+}
+
+var navLinks = document.querySelectorAll('nav a');
+
+function hashChange() {
+  var fullUrl = window.location.href;
+  navLinks.forEach(function(link) {
+    link.className = link.href === fullUrl ? 'selected' : '';
+  });
+}
+
+window.addEventListener('hashchange', function(e) {
+  e.preventDefault();
+  hashChange();
+});
+
+hashChange();
+
+document.addEventListener('DOMContentLoaded', function() {
+  var div = document.createElement('div');
+  div.innerHTML = '<div class="tooltip-copy"><img src="/img/copy-icon.svg" class="icon-copy" title="Click to Copy" /></div>';
+  div.className = 'div-copy';
+
+  var allPres = document.querySelectorAll('pre');
+  allPres.forEach(function(pre) {
+    var timeout = null;
+    var copy = div.cloneNode(true);
+    pre.appendChild(copy);
+    pre.onmouseover = function() {
+      copy.classList.add('active');
+    };
+    pre.onmouseleave = function() {
+      clearTimeout(timeout);
+      copy.classList.remove('active');
+      copy.classList.remove('click');
+    };
+    copy.onclick = function() {
+      navigator.clipboard.writeText(pre.textContent);
+      copy.classList.add('click');
+      clearTimeout(timeout);
+      timeout = setTimeout(function() {
+        copy.classList.remove('click');
+      }, 3000);
+    };
+  });
+});