Add copy-to-clipboard

Author: kipcole9

lib/money/input/visualizer/assets.ex

@@ -417,6 +417,47 @@ defmodule Money.Input.Visualizer.Assets do
     overflow-x: auto;
   }
 
+  /* Copy-to-clipboard icon button — sits in the top-right of a
+     code panel. The wrapping `.mi-code-wrap` provides the
+     positioning context so the button anchors to the <pre>
+     itself (not the surrounding card). */
+  .mi-code-wrap { position: relative; }
+
+  .mi-copy-btn {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 1.75rem;
+    height: 1.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--mi-border);
+    background: var(--mi-surface);
+    color: var(--mi-text-dim);
+    border-radius: var(--mi-radius-sm);
+    cursor: pointer;
+    padding: 0;
+    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
+  }
+  .mi-copy-btn:hover { color: var(--mi-text); background: var(--mi-surface-2); }
+  .mi-copy-btn svg {
+    width: 14px;
+    height: 14px;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .mi-copy-btn .mi-copy-icon-check { display: none; }
+  .mi-copy-btn[data-copied="true"] {
+    color: var(--mi-accent);
+    border-color: var(--mi-accent);
+  }
+  .mi-copy-btn[data-copied="true"] .mi-copy-icon-clipboard { display: none; }
+  .mi-copy-btn[data-copied="true"] .mi-copy-icon-check { display: inline; }
+
   code, .mi-code-inline {
     font-family: var(--mi-mono);
     background: var(--mi-surface-2);

lib/money/input/visualizer/input_view.ex

@@ -212,13 +212,42 @@ defmodule Money.Input.Visualizer.InputView do
       "<p class=\"mi-desc\">The HEEx call site that renders the money_input above. ",
       "Tweak the form controls and the code refreshes — copy straight into a ",
       "LiveView template.</p>",
-      "<pre class=\"mi-code\">",
+      "<div class=\"mi-code-wrap\">",
+      "<pre class=\"mi-code\" id=\"money-input-heex\">",
       Render.escape(money_code),
       "</pre>",
+      copy_button("#money-input-heex", "Copy HEEx call to clipboard"),
+      "</div>",
       "</section>"
     ]
   end
 
+  # Clipboard-icon button anchored to a `.mi-card`. The card itself
+  # provides the positioning context; the script in render.ex
+  # handles the click via the `data-mi-copy-target` attribute.
+  defp copy_button(target_selector, label) do
+    [
+      "<button type=\"button\" class=\"mi-copy-btn\" ",
+      "data-mi-copy-target=\"",
+      Render.escape(target_selector),
+      "\" aria-label=\"",
+      Render.escape(label),
+      "\" title=\"",
+      Render.escape(label),
+      "\">",
+      # Clipboard icon (visible at rest).
+      "<svg class=\"mi-copy-icon-clipboard\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">",
+      "<rect x=\"9\" y=\"3\" width=\"6\" height=\"3\" rx=\"1\"/>",
+      "<path d=\"M9 4.5H6.5A1.5 1.5 0 0 0 5 6v13.5A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H15\"/>",
+      "</svg>",
+      # Checkmark icon (shown briefly after a successful copy).
+      "<svg class=\"mi-copy-icon-check\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">",
+      "<polyline points=\"5 12 10 17 19 7\"/>",
+      "</svg>",
+      "</button>"
+    ]
+  end
+
   defp build_money_call(locale, default_currency, picker, preferred) do
     attrs =
       [

lib/money/input/visualizer/render.ex

@@ -64,6 +64,7 @@ defmodule Money.Input.Visualizer.Render do
       footer(),
       "</main>",
       theme_toggle_script(),
+      clipboard_script(),
       "</body></html>"
     ]
   end
@@ -201,6 +202,49 @@ defmodule Money.Input.Visualizer.Render do
     """
   end
 
+  # Click-delegated clipboard handler. Any button with
+  # `data-mi-copy-target="#selector"` copies that element's text
+  # content. Flips `data-copied="true"` on the button for ~1.4s so
+  # the CSS can swap the clipboard icon for a checkmark, then
+  # clears it. No external lib — uses navigator.clipboard.writeText.
+  defp clipboard_script do
+    """
+    <script>
+    (function () {
+      document.addEventListener("click", function (event) {
+        var button = event.target.closest("[data-mi-copy-target]");
+        if (!button) return;
+        var selector = button.getAttribute("data-mi-copy-target");
+        var target = selector && document.querySelector(selector);
+        if (!target) return;
+        var text = target.innerText || target.textContent || "";
+        var done = function () {
+          button.setAttribute("data-copied", "true");
+          setTimeout(function () {
+            button.removeAttribute("data-copied");
+          }, 1400);
+        };
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(text).then(done, function () {
+            /* permission denied or insecure context — swallow */
+          });
+        } else {
+          // Older-browser fallback via a transient textarea.
+          var area = document.createElement("textarea");
+          area.value = text;
+          area.style.position = "fixed";
+          area.style.opacity = "0";
+          document.body.appendChild(area);
+          area.select();
+          try { document.execCommand("copy"); done(); } catch (e) {}
+          document.body.removeChild(area);
+        }
+      });
+    })();
+    </script>
+    """
+  end
+
   defp error_block(nil), do: ""
 
   defp error_block(message) do