highlightjs-copy - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2-next.0

dist/highlightjs-copy.min.js

@@ -1,1 +0,1 @@
-function CopyButtonPlugin(callback){return{"after:highlightElement"({el,text}){let button=Object.assign(document.createElement("button"),{innerHTML:"Copy",className:"hljs-copy-button"});button.dataset.copied=false;el.parentElement.classList.add("hljs-copy-wrapper");el.parentElement.appendChild(button);button.onclick=function(){if(!navigator.clipboard)return;navigator.clipboard.writeText(text).then(function(){button.innerHTML="Copied!";button.dataset.copied=true;let alert=Object.assign(document.createElement("div"),{role:"status",className:"hljs-copy-alert",innerHTML:"Copied to clipboard"});el.parentElement.appendChild(alert);setTimeout(()=>{button.innerHTML="Copy";button.dataset.copied=false;el.parentElement.removeChild(alert);alert=null},2e3)}).then(function(){if(typeof callback==="function")return callback(el,text)})}}}}
+class CopyButtonPlugin{constructor(options){self.hook=options.hook||function(text){return text};self.callback=options.callback}"after:highlightElement"({el,text}){let button=Object.assign(document.createElement("button"),{innerHTML:"Copy",className:"hljs-copy-button"});button.dataset.copied=false;el.parentElement.classList.add("hljs-copy-wrapper");el.parentElement.appendChild(button);el.parentElement.style.setProperty("--hljs-theme-background",window.getComputedStyle(el).backgroundColor);button.onclick=function(){if(!navigator.clipboard)return;let newText=text;if(hook&&typeof hook==="function"){newText=hook(text,el)}navigator.clipboard.writeText(newText).then(function(){button.innerHTML="Copied!";button.dataset.copied=true;let alert=Object.assign(document.createElement("div"),{role:"status",className:"hljs-copy-alert",innerHTML:"Copied to clipboard"});el.parentElement.appendChild(alert);setTimeout(()=>{button.innerHTML="Copy";button.dataset.copied=false;el.parentElement.removeChild(alert);alert=null},2e3)}).then(function(){if(typeof callback==="function")return callback(newText,el)})}}}

index.js

@@ -9,52 +9,78 @@ /**
  * Adds a copy button to highlightjs code blocks
- * @param {copyCallback} [callback] - Called after the copy event has occured
- * @returns {Object} hljs plugin object.
  */
-function CopyButtonPlugin(callback) {
-  return {
-    "after:highlightElement"({ el, text }) {
-      // Create the copy button and append it to the codeblock
-      let button = Object.assign(document.createElement("button"), {
-        innerHTML: "Copy",
-        className: "hljs-copy-button",
-      });
-      button.dataset.copied = false;
-      el.parentElement.classList.add("hljs-copy-wrapper");
-      el.parentElement.appendChild(button);
+class CopyButtonPlugin {
+  /**
+   * Create a new CopyButtonPlugin class instance
+   * @param {Object} [options] - Functions that will be called when a copy event fires
+   * @param {hook} [options.hook]
+   * @param {callback} [options.callback]
+   */
+  constructor(options) {
+    self.hook =
+      options.hook ||
+      function (text) {
+        return text;
+      };
+    self.callback = options.callback;
+  }
+  "after:highlightElement"({ el, text }) {
+    // Create the copy button and append it to the codeblock.
+    let button = Object.assign(document.createElement("button"), {
+      innerHTML: "Copy",
+      className: "hljs-copy-button",
+    });
+    button.dataset.copied = false;
+    el.parentElement.classList.add("hljs-copy-wrapper");
+    el.parentElement.appendChild(button);
 
-      button.onclick = function () {
-        if (!navigator.clipboard) return;
+    // Add a custom proprety to the code block so that the copy button can reference and match its background-color value.
+    el.parentElement.style.setProperty(
+      "--hljs-theme-background",
+      window.getComputedStyle(el).backgroundColor
+    );
 
-        navigator.clipboard
-          .writeText(text)
-          .then(function () {
-            button.innerHTML = "Copied!";
-            button.dataset.copied = true;
+    button.onclick = function () {
+      if (!navigator.clipboard) return;
 
-            let alert = Object.assign(document.createElement("div"), {
-              role: "status",
-              className: "hljs-copy-alert",
-              innerHTML: "Copied to clipboard",
-            });
-            el.parentElement.appendChild(alert);
+      let newText = text;
+      if (hook && typeof hook === "function") {
+        newText = hook(text, el);
+      }
 
-            setTimeout(() => {
-              button.innerHTML = "Copy";
-              button.dataset.copied = false;
-              el.parentElement.removeChild(alert);
-              alert = null;
-            }, 2000);
-          })
-          .then(function () {
-            if (typeof callback === "function") return callback(el, text);
+      navigator.clipboard
+        .writeText(newText)
+        .then(function () {
+          button.innerHTML = "Copied!";
+          button.dataset.copied = true;
+
+          let alert = Object.assign(document.createElement("div"), {
+            role: "status",
+            className: "hljs-copy-alert",
+            innerHTML: "Copied to clipboard",
           });
-      };
-    },
-  };
+          el.parentElement.appendChild(alert);
+
+          setTimeout(() => {
+            button.innerHTML = "Copy";
+            button.dataset.copied = false;
+            el.parentElement.removeChild(alert);
+            alert = null;
+          }, 2000);
+        })
+        .then(function () {
+          if (typeof callback === "function") return callback(newText, el);
+        });
+    };
+  }
 }
 
 /**
- * @callback copyCallback
+ * @function copyCallback
+ * @param {string} text - The raw text copied to the clipboard.
  * @param {Object} el - The code block element that was copied from.
+ */
+/**
+ * @function hook
  * @param {string} text - The raw text copied to the clipboard.
+ * @param {Object} el - The code block element that was copied from.
  */

package.json

 {
   "name": "highlightjs-copy",
-  "version": "1.0.1",
+  "version": "1.0.2-next.0",
   "description": "A simple, accessible highlightjs plugin to add a copy button to your codeblocks.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -5,3 +5,3 @@ # highlightjs-copy
 
-![](./assets/preview.png)
+![Preview](https://repository-images.githubusercontent.com/376601151/45b9bc80-cc37-11eb-936c-c3a55741bf77)
 
@@ -8,0 +8,0 @@ ## Install

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30397

increased by26.87%

Lines of code

324

increased by69.63%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes