Skip to content

Instantly share code, notes, and snippets.

@mcnaveen
Created September 30, 2023 17:52
Show Gist options
  • Save mcnaveen/847216a99f51f75cccb2bd912824e5f9 to your computer and use it in GitHub Desktop.
Save mcnaveen/847216a99f51f75cccb2bd912824e5f9 to your computer and use it in GitHub Desktop.
Add Copy Button to Ghost P Tag
<script>
document.addEventListener("DOMContentLoaded", function () {
var paragraphs = document.querySelectorAll(".gh-content p");
paragraphs.forEach(function (paragraph) {
var copyButton = document.createElement("button");
copyButton.className = "copy-btn";
copyButton.setAttribute("data-umami-event", "Copy button");
copyButton.innerHTML = "&#x1F4CB;";
paragraph.appendChild(copyButton);
copyButton.addEventListener("click", function () {
var textToCopy = paragraph.cloneNode(true);
textToCopy.querySelector(".copy-btn").remove();
textToCopy = textToCopy.textContent.trim();
navigator.clipboard
.writeText(textToCopy)
.then(function () {
alert("Text copied to clipboard!");
})
.catch(function (err) {
console.error("Unable to copy text to clipboard", err);
});
});
});
});
</script>
<style>
.gh-content p {
display: flex;
justify-content: space-between;
align-items: center;
}
.copy-btn {
cursor: pointer;
padding: 8px;
background-color: #f9f9f9;
color: white;
border: none;
border-radius: 4px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment