From 434ad14265478ce6a7bb488f3b7102177f4b4c26 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Wed, 14 Jan 2026 09:30:09 -0600
Subject: [PATCH] Fix clipboard copy functionality for Docker Compose example

Added phx:copy event listener to handle clipboard operations for both
input/textarea elements and other content. The Docker Compose example
copy button now properly copies the configuration to clipboard.

The handler supports:
- INPUT and TEXTAREA elements (using .value)
- Other elements like PRE/CODE (using .innerText or .textContent)
---
 assets/js/app.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/assets/js/app.js b/assets/js/app.js
index 579f6b4c..dd795052 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -272,6 +272,25 @@ topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
 window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
 window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
 
+// Handle clipboard copy events
+window.addEventListener("phx:copy", (event) => {
+  const el = event.target
+  let text = ""
+
+  if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
+    text = el.value
+  } else {
+    text = el.innerText || el.textContent
+  }
+
+  navigator.clipboard.writeText(text).then(() => {
+    // Optional: Show a success message or visual feedback
+    console.log('Copied to clipboard')
+  }).catch(err => {
+    console.error('Failed to copy text: ', err)
+  })
+})
+
 // connect if there are any LiveViews on the page
 liveSocket.connect()