Feat: Copy to Clipboard Buttons to Code Blocks

Author: peterjuma

src/App.js

@@ -58,7 +58,9 @@ class App extends Component {
     this.handleCopyNote = this.handleCopyNote.bind(this);
     this.handleCopyEvent = this.handleCopyEvent.bind(this);
     this.handleSortNotes = this.handleSortNotes.bind(this);
-    this.updateCodeSyntaxHighlighting();
+    this.updateCodeSyntaxHighlighting;
+    this.addCopyButtons;
+    this.handleCopyCodeButtonClick;
   }
 
   async componentDidMount() {
@@ -71,11 +73,13 @@ class App extends Component {
       });
       document.getElementById(getnotes[0].noteid).click();
     }
-    // this.updateCodeSyntaxHighlighting();
+    this.updateCodeSyntaxHighlighting();
+    this.handleCopyCodeButtonClick();
   }
 
   componentDidUpdate() {
-    // this.updateCodeSyntaxHighlighting();
+    this.updateCodeSyntaxHighlighting();
+    this.handleCopyCodeButtonClick();
   }
 
   updateCodeSyntaxHighlighting = () => {
@@ -84,6 +88,56 @@ class App extends Component {
     });
   };
 
+  handleCopyCodeButtonClick = () => {
+    if (navigator && navigator.clipboard) {
+      this.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";
+      script.onload = function () {
+        this.addCopyButtons(clipboard);
+      };
+      document.body.appendChild(script);
+    }
+  };
+
+  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";
+
+      button.addEventListener("click", function () {
+        clipboard.writeText(codeBlock.innerText).then(
+          function () {
+            /* Chrome doesn't seem to blur automatically,
+                   leaving the button in a focused state. */
+            button.blur();
+            button.innerText = "Copied!";
+            setTimeout(function () {
+              button.innerText = "Copy";
+            }, 2000);
+          },
+          function (error) {
+            button.innerText = "Error";
+          }
+        );
+      });
+
+      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);
+      }
+    });
+  };
+
   // Indexed DB class
   async handleIndexedDB(cmd = "", note = "") {
     const db = await openDB("notesdb", 1, {

src/styles.css

@@ -459,3 +459,44 @@ button[disabled]:hover {
 .highlight {
   background-color: yellow;
 }
+
+/*  Copy Code block button */
+
+.copy-code-button {
+  color: #272822;
+  background-color: #fff;
+  border-color: #272822;
+  border: 1px solid rgba(27, 31, 35, 0.2);
+  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;
+}
+
+.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;
+}