django-rest-framework/docs_theme/js/copy-button.js
Shrikant Sudam Giri 055c422b34
Add copy button to code blocks in documentation (#9830)
* Add copy button to code blocks for improved documentation usability

* Add copy button to code blocks for improved documentation usability

* Add copy button to code blocks for improved documentation usability

* Make "Copy" button smaller

---------

Co-authored-by: Bruno Alla <alla.brunoo@gmail.com>
2025-12-15 16:01:37 +00:00

25 lines
827 B
JavaScript

document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("pre > code").forEach(function (codeBlock) {
const button = document.createElement("button");
button.className = "copy-block-button btn btn-inverse btn-mini";
button.type = "button";
button.textContent = "Copy";
button.addEventListener("click", function () {
navigator.clipboard.writeText(codeBlock.textContent)
.then(() => {
button.textContent = "Copied!";
setTimeout(() => button.textContent = "Copy", 1200);
})
.catch(() => {
button.textContent = "Failed";
setTimeout(() => button.textContent = "Copy", 1200);
});
});
const pre = codeBlock.parentNode;
pre.style.position = "relative";
pre.appendChild(button);
});
});