highlightjs-copy - npm Package Compare versions

Comparing version 1.0.2-next.0 to 1.0.3

dist/highlightjs-copy.min.js

@@ -1,1 +0,1 @@
-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)})}}}
+class CopyButtonPlugin{constructor(options={}){self.hook=options.hook;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)||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},2e3)}).then(function(){if(typeof callback==="function")return callback(newText,el)})}}}

index.js

@@ -14,11 +14,7 @@ /**
    * @param {Object} [options] - Functions that will be called when a copy event fires
-   * @param {hook} [options.hook]
-   * @param {callback} [options.callback]
+   * @param {CopyCallback} [options.callback]
+   * @param {Hook} [options.hook]
    */
-  constructor(options) {
-    self.hook =
-      options.hook ||
-      function (text) {
-        return text;
-      };
+  constructor(options = {}) {
+    self.hook = options.hook;
     self.callback = options.callback;
@@ -47,3 +43,3 @@ }
       if (hook && typeof hook === "function") {
-        newText = hook(text, el);
+        newText = hook(text, el) || text;
       }
@@ -79,10 +75,12 @@
 /**
- * @function copyCallback
+ * @typedef {function} CopyCallback
  * @param {string} text - The raw text copied to the clipboard.
- * @param {Object} el - The code block element that was copied from.
+ * @param {HTMLElement} el - The code block element that was copied from.
+ * @returns {undefined}
  */
 /**
- * @function hook
+ * @typedef {function} Hook
  * @param {string} text - The raw text copied to the clipboard.
- * @param {Object} el - The code block element that was copied from.
+ * @param {HTMLElement} el - The code block element that was copied from.
+ * @returns {string|undefined}
  */

package.json

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

README.md

 # highlightjs-copy
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/6b2257bf-a914-4f05-8166-a678eaff9fe8/deploy-status)](https://app.netlify.com/sites/highlightjs-copy/deploys)
+
 A simple, accessible [highlightjs](https://github.com/highlightjs/highlight.js) plugin to add a copy button to your codeblocks.
@@ -7,2 +9,6 @@
 
+## Demo
+
+[Check out the demo](https://highlightjs-copy.netlify.app)
+
 ## Install
@@ -31,14 +37,14 @@
 
-Basic usage
+### Basic usage
 
 ```javascript
-hljs.addPlugin(CopyButtonPlugin());
+hljs.addPlugin(new CopyButtonPlugin());
 ```
 
-With a callback
+### With a callback
 
 ```javascript
 hljs.addPlugin(
-  CopyButtonPlugin(function (el, text) {
-    console.log("Copied to clipboard", text);
+  new CopyButtonPlugin({
+    callback: (text, el) => console.log("Copied to clipboard", text),
   })
@@ -48,9 +54,49 @@ );
 
+### Modify copied text with hooks
+
+```javascript
+hljs.addPlugin(
+  new CopyButtonPlugin({
+    hook: (text, el) => text + "\nCopied from my cool website.",
+  })
+);
+```
+
+### Advanced hook example
+
+```html
+<!-- Code block example -->
+<pre>
+  <code class="language-bash" data-replace="{{YOUR_API_KEY}}" data-replaceWith="grtf32a35bbc...">
+    gretel configure --key {{YOUR_API_KEY}}
+  </code>
+</pre>
+
+<script>
+  hljs.addPlugin(
+    new CopyButtonPlugin({
+      hook: (text, el) => {
+        let { replace, replacewith } = el.dataset;
+        if (replace && replacewith) {
+          return text.replace(replace, replacewith);
+        }
+        return text;
+      },
+      callback: (text, el) => {
+        /* logs `gretel configure --key grtf32a35bbc...` */
+        console.log(text);
+      },
+    })
+  );
+  hljs.highlightAll();
+</script>
+```
+
 ## Customization
 
-| CSS selector           | Details                                                                                                                   |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `.hljs-copy-wrapper`   | Applied to the parent `<pre>` element that wraps the .hljs code.                                                          |
-| `.hljs-copy-button`    | The copy button itself.                                                                                                   |
-| `[data-copied='true']` | This data attribute is applied to the copy button and is set to `true` for two seconds when the copy action is performed. |
-| `.hljs-copy-alert`     | A visually hidden status element that announces the copy confirmation to screen readers.                                  |
+| CSS selector           | Details                                                                                                                                                                                        |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.hljs-copy-wrapper`   | Applied to the parent `<pre>` element that wraps the .hljs code.                                                                                                                               |
+| `.hljs-copy-button`    | The copy button itself.<br /><br />The variable `--hljs-theme-background` is automatically applied to the parent element. This allows the button to inherit the code block's background color. |
+| `[data-copied='true']` | This data attribute is applied to the copy button and is set to `true` for two seconds when the copy action is performed.                                                                      |
+| `.hljs-copy-alert`     | A visually hidden status element that announces the copy confirmation to screen readers.                                                                                                       |

Fixed 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

31932

increased by5.05%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

100

increased by85.19%

Worsened metrics

Lines of code

322

decreased by-0.62%

No dependency changes