Add Copy Button to Ghost P Tag

code.js

<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>