Add alchemy-clipboard-button component

Encapsulates ClipboardJS into a web component.
This makes sure it sets up and tears down correctly
without any imperative code even in dialogs.

app/javascript/alchemy_admin.js

@@ -21,6 +21,7 @@ import PagePublicationFields from "alchemy_admin/page_publication_fields"
 // Web Components
 import "alchemy_admin/components/button"
 import "alchemy_admin/components/char_counter"
+import "alchemy_admin/components/clipboard_button"
 import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/dialog_link"
 import "alchemy_admin/components/element_editor"
@@ -33,7 +34,6 @@ import "alchemy_admin/components/page_select"
 import "alchemy_admin/components/select"
 import "alchemy_admin/components/spinner"
 import "alchemy_admin/components/tinymce"
-import "alchemy_admin/clipboard"
 
 import { setDefaultAnimation } from "shoelace"
 

app/javascript/alchemy_admin/components/clipboard_button.js

@@ -0,0 +1,28 @@
+import "clipboard"
+
+class ClipboardButton extends HTMLElement {
+  constructor() {
+    super()
+
+    this.innerHTML = `
+      <i class="icon ri-clipboard-line ri-fw"></i>
+    `
+
+    this.clipboard = new ClipboardJS(this, {
+      target: this,
+      text: () => {
+        return this.getAttribute("content")
+      }
+    })
+
+    this.clipboard.on("success", (evt) => {
+      Alchemy.growl(this.getAttribute("success-text"))
+    })
+  }
+
+  disconnectedCallback() {
+    this.clipboard.destroy()
+  }
+}
+
+customElements.define("alchemy-clipboard-button", ClipboardButton)

app/views/alchemy/admin/attachments/show.html.erb

@@ -8,16 +8,20 @@
   <div class="value with-icon">
     <label><%= Alchemy::Attachment.human_attribute_name(:url) %></label>
     <p><%= @attachment.url %></p>
-    <a data-clipboard-text="<%= @attachment.url %>" data-clipboard-success-text="<%= Alchemy.t("Copied to clipboard") %>" class="icon_button--right">
-      <%= render_icon(:clipboard) %>
-    </a>
+    <alchemy-clipboard-button
+      content="<%= @attachment.url %>"
+      success-text="<%= Alchemy.t("Copied to clipboard") %>"
+      class="icon_button--right"
+    ></alchemy-clipboard-button>
   </div>
   <div class="value with-icon">
     <label><%= Alchemy::Attachment.human_attribute_name(:download_url) %></label>
     <p><%= @attachment.url(download: true) %></p>
-    <a data-clipboard-text="<%= @attachment.url(download: true) %>" data-clipboard-success-text="<%= Alchemy.t("Copied to clipboard") %>" class="icon_button--right">
-      <%= render_icon(:clipboard) %>
-    </a>
+    <alchemy-clipboard-button
+      content="<%= @attachment.url(download: true) %>"
+      success-text="<%= Alchemy.t("Copied to clipboard") %>"
+      class="icon_button--right"
+    ></alchemy-clipboard-button>
   </div>
 </div>