Media markdown button

A dashboard plugin that adds a "Copy MD" button next to "Copy URL" in the Bear media library.

I often want to copy an image as Markdown, not just the URL, since it's one of those syntaxes I never seem to remember. Click the button and a ready-to-paste image tag lands on your clipboard. The alt text is left as a placeholder, so you remember to describe the photo.

How to use

Copy the script below.
Go to Customise dashboard.
Paste the script under "Dashboard footer content" and save.

<script>
/* Media markdown button | robertbirming.com */
(() => {
  document.querySelectorAll(".media-item").forEach((item) => {
    const copyUrl = item.querySelector("button");
    const img = item.querySelector("img");
    if (!copyUrl || !img || item.querySelector(".copy-md-button")) return;

    const button = document.createElement("button");
    button.type = "button";
    button.className = "copy-md-button";
    button.textContent = "Copy MD";

    button.addEventListener("click", async () => {
      const src = img.getAttribute("src") || "";
      try {
        await navigator.clipboard.writeText(`![Alt text](${src})`);
        button.textContent = "Copied";
      } catch {
        button.textContent = "Failed";
      }
      setTimeout(() => (button.textContent = "Copy MD"), 1500);
    });

    copyUrl.after(button);
  });
})();
</script>

Happy photo blogging!

Want more? Check out the full Bear Blog library.