diff --git a/plugins/copy-to-clipboard/index.html b/plugins/copy-to-clipboard/index.html
index 9fdd6c568d..60058c1711 100644
--- a/plugins/copy-to-clipboard/index.html
+++ b/plugins/copy-to-clipboard/index.html
@@ -14,7 +14,7 @@
-
+
@@ -41,6 +41,26 @@ Settings
Warning! Although possible, you definitely shouldn't add these attributes to the html element, because a human-readable text should be placed after the character encoding declaration (<meta charset="...">), and the latter must be serialized completely within the first 512 (in older browsers) or 1024 bytes of the document. Consider using the body element or one of its descendants.
+
+ Styling
+
+ This plugin supports customizing the style of the copy button. To understand how this is done, let's look at the HTML structure of the copy button:
+
+ <button class="copy-to-clipboard-button" type="button" data-copy-state="copy">
+ <span>Copy</span>
+</button>
+
+ The copy-to-clipboard-button class can be used to select the button. The data-copy-state attribute indicates the current state of the plugin with the 3 possible states being:
+
+
+ data-copy-state="copy" — default state;data-copy-state="copy-error" — the state after failing copying;data-copy-state="copy-success" — the state after successful copying;
+
+ These 3 states should be conveyed to the user either by different styling or displaying the button text.
+
+
Examples
diff --git a/plugins/copy-to-clipboard/prism-copy-to-clipboard.js b/plugins/copy-to-clipboard/prism-copy-to-clipboard.js
index d6e744fca9..b304eb1374 100644
--- a/plugins/copy-to-clipboard/prism-copy-to-clipboard.js
+++ b/plugins/copy-to-clipboard/prism-copy-to-clipboard.js
@@ -114,20 +114,24 @@
var settings = getSettings(element);
var linkCopy = document.createElement('button');
- linkCopy.textContent = settings['copy'];
+ linkCopy.className = 'copy-to-clipboard-button';
linkCopy.setAttribute('type', 'button');
+ var linkSpan = document.createElement('span');
+ linkCopy.appendChild(linkSpan);
+
+ setState('copy');
registerClipboard(linkCopy, {
getText: function () {
return element.textContent;
},
success: function () {
- linkCopy.textContent = settings['copy-success'];
+ setState('copy-success');
resetText();
},
error: function () {
- linkCopy.textContent = settings['copy-error'];
+ setState('copy-error');
setTimeout(function () {
selectElementText(element);
@@ -140,9 +144,13 @@
return linkCopy;
function resetText() {
- setTimeout(function () {
- linkCopy.textContent = settings['copy'];
- }, settings['copy-timeout']);
+ setTimeout(function () { setState('copy'); }, settings['copy-timeout']);
+ }
+
+ /** @param {"copy" | "copy-error" | "copy-success"} state */
+ function setState(state) {
+ linkSpan.textContent = settings[state];
+ linkCopy.setAttribute('data-copy-state', state);
}
});
})();
diff --git a/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js b/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js
index d45ee5f21a..26b45fe97c 100644
--- a/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js
+++ b/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js
@@ -1 +1 @@
-!function(){function c(t,e){t.addEventListener("click",function(){!function(t){navigator.clipboard?navigator.clipboard.writeText(t.getText()).then(t.success,t.error):function(e){var t=document.createElement("textarea");t.value=e.getText(),t.style.top="0",t.style.left="0",t.style.position="fixed",document.body.appendChild(t),t.focus(),t.select();try{var o=document.execCommand("copy");setTimeout(function(){o?e.success():e.error()},1)}catch(t){setTimeout(function(){e.error(t)},1)}document.body.removeChild(t)}(t)}(e)})}"undefined"!=typeof self&&self.Prism&&self.document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",function(t){var e=t.element,o=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,r=t;r&&!r.hasAttribute(n);)r=r.parentElement;r&&(e[o]=r.getAttribute(n))}return e}(e),n=document.createElement("button");return n.textContent=o.copy,n.setAttribute("type","button"),c(n,{getText:function(){return e.textContent},success:function(){n.textContent=o["copy-success"],r()},error:function(){n.textContent=o["copy-error"],setTimeout(function(){!function(t){window.getSelection().selectAllChildren(t)}(e)},1),r()}}),n;function r(){setTimeout(function(){n.textContent=o.copy},o["copy-timeout"])}}):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}();
\ No newline at end of file
+!function(){function u(t,e){t.addEventListener("click",function(){!function(t){navigator.clipboard?navigator.clipboard.writeText(t.getText()).then(t.success,t.error):function(e){var t=document.createElement("textarea");t.value=e.getText(),t.style.top="0",t.style.left="0",t.style.position="fixed",document.body.appendChild(t),t.focus(),t.select();try{var o=document.execCommand("copy");setTimeout(function(){o?e.success():e.error()},1)}catch(t){setTimeout(function(){e.error(t)},1)}document.body.removeChild(t)}(t)}(e)})}"undefined"!=typeof self&&self.Prism&&self.document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",function(t){var e=t.element,o=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,r=t;r&&!r.hasAttribute(n);)r=r.parentElement;r&&(e[o]=r.getAttribute(n))}return e}(e),n=document.createElement("button");n.className="copy-to-clipboard-button",n.setAttribute("type","button");var r=document.createElement("span");return n.appendChild(r),i("copy"),u(n,{getText:function(){return e.textContent},success:function(){i("copy-success"),c()},error:function(){i("copy-error"),setTimeout(function(){!function(t){window.getSelection().selectAllChildren(t)}(e)},1),c()}}),n;function c(){setTimeout(function(){i("copy")},o["copy-timeout"])}function i(t){r.textContent=o[t],n.setAttribute("data-copy-state",t)}}):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}();
\ No newline at end of file