Update to github-styled svg icons

README.md

@@ -58,6 +58,9 @@ You may have to reload obsidian (`ctrl+R`) to see changes.
 
 # Version History
 
+## v0.2.1
+Forked project to update manifest.json
+
 ## v0.2.0
 Add excluded languages, currently only includes "todoist" to be compatible with the todoist plugin. Will add setting page to add custom exclude languages in future.
 

main.ts

@@ -5,6 +5,8 @@ const excludeLangs = [
   "todoist"
 ];
 
+const svgCopy = '<svg height="16" width="16" viewBox="0 0 16 16" version="1.1" data-view-component="true" class="copy"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>';
+const svgSuccess = '<svg height="16" width="16" viewBox="0 0 16 16" version="1.1" data-view-component="true" class="copy-success"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
 
 export default class CMSyntaxHighlightPlugin extends Plugin {
 
@@ -26,42 +28,45 @@ export default class CMSyntaxHighlightPlugin extends Plugin {
   }
 
   addCopyButtons(clipboard:any) {
-    document.querySelectorAll('pre > code').forEach(function (codeBlock) {
+    document.querySelectorAll('pre > code').forEach(function (codeBlock: HTMLElement) {
 
-      var pre = codeBlock.parentNode;
+      const pre = codeBlock.parentNode as HTMLPreElement;
 
       // check for excluded langs
       for ( let lang of excludeLangs ){
-        if (pre.classList.contains( `language-${lang}` ))
+        if (pre.classList.contains(`language-${lang}`))
           return;
       }
 
-      // Dont add more than once
-      if (pre.parentNode.classList.contains('has-copy-button')) {
+      const parent = pre.parentNode as HTMLDivElement;
+
+      // don't add more than once
+      if (parent.classList.contains('has-copy-button')) {
         return;
       }
-      pre.parentNode.classList.add( 'has-copy-button' );
 
-        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';
-            });
-        });
+      parent.classList.add('has-copy-button');
+
+      const button = document.createElement('div');
+      button.className = 'copy-code-button';
+      button.setAttribute('aria-label', 'Copy');
+      button.innerHTML = svgCopy;
+
+      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.innerHTML = svgSuccess;
+
+              setTimeout(function () {
+                  button.innerHTML = svgCopy;
+              }, 2000);
+          }, function () {
+              button.innerText = 'An error occurred!';
+          });
+      });
 
         pre.appendChild(button);
 

manifest.json

@@ -1,8 +1,8 @@
 {
   "id": "code-block-copy",
-  "name": "Copy button for code blocks",
+  "name": "Copy button for code blocks (Github Icon)",
   "author": "Daniel Brandenburg",
-  "description": "Copy button for code blocks",
+  "description": "Temporary version fix released by Tyler Harris of source project by Daniel Brandenburg (https:\/\/github.com\/jdbrice\/obsidian-code-block-copy)",
   "isDesktopOnly": false,
-  "version": "0.2.0"
+  "version": "0.2.2"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "code-block-copy",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Copy button for code blocks",
   "main": "main.js",
   "scripts": {

styles.scss

@@ -1,45 +1,43 @@
 
 .copy-code-button {
-  color: var(--background-primary);
-  background-color: var(--text-faint);
-  border-radius: 1px 1px 0px 0px;
-
   /* right-align */
-  display: block;
+  display: none;
   margin-left: auto;
   margin-right: 0;
 
   margin-bottom: -2px;
   padding: 3px 8px;
-  font-size: 0.8em;
 
   position: absolute;
   top: 0px;
   right: 0px;
-}
-
-.copy-code-button:hover {
-  cursor: pointer;
-  background-color: var(--text-normal);
-}
-
-.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: var(--text-normal);
-  outline: 0;
-}
-
-.copy-code-button:active {
-  background-color: var(--text-normal);
-}
 
-.highlight pre {
-  /* Avoid pushing up the copy buttons. */
-  margin: 0;
+  svg.copy path {
+    fill: var(--interactive-normal);
+  }
+
+  &:hover, &:active {
+    cursor: pointer;
+    svg path {
+      fill: var(--interactive-accent-hover);
+      transition: all ease 0.3s;
+    }
+  }
+
+  svg.copy-success path {
+    fill: var(--interactive-success);
+  }
+
+  &:focus {
+    outline: 0;
+  }
 }
 
-.has-copy-button {
+.has-copy-button pre {
   position: relative;
+  &:hover {
+    .copy-code-button {
+      display: block;
+    }
+  }
 }