From f89cc67fdaaa9c1fdba485dd95e642745c441de6 Mon Sep 17 00:00:00 2001
From: Andrew Dryga <a@firezone.dev>
Date: Mon, 14 Oct 2024 14:05:14 -0600
Subject: [PATCH] fix(portal): Fix copy-paste buttons (#7033)

- Added semi-transparent shadow to the button so that it's more visible
when text is overlapping it. Padding did not look well because it
required scrollbar to be moved inside the parent container and it looked
very ugly
- Replaced custom phx hook with a new native Tailwind component

Closes #5973
---
 elixir/apps/web/assets/js/hooks.js            | 35 ------------
 .../web/lib/web/components/core_components.ex | 54 ++++++++++++-------
 2 files changed, 35 insertions(+), 54 deletions(-)

diff --git a/elixir/apps/web/assets/js/hooks.js b/elixir/apps/web/assets/js/hooks.js
index da622d65d..e5121b4d8 100644
--- a/elixir/apps/web/assets/js/hooks.js
+++ b/elixir/apps/web/assets/js/hooks.js
@@ -64,41 +64,6 @@ Hooks.Refocus = {
   },
 };
 
-Hooks.Copy = {
-  mounted() {
-    this.el.addEventListener("click", (ev) => {
-      ev.preventDefault();
-
-      let inner_html = ev.currentTarget
-        .querySelector("[data-copy]")
-        .innerHTML.trim();
-      let doc = new DOMParser().parseFromString(inner_html, "text/html");
-      let text = doc.documentElement.textContent;
-
-      let content = ev.currentTarget.querySelector("[data-content]");
-      let icon_cl = ev.currentTarget.querySelector("[data-icon]").classList;
-
-      navigator.clipboard.writeText(text).then(() => {
-        icon_cl.add("hero-clipboard-document-check");
-        icon_cl.add("hover:text-accent-500");
-        icon_cl.remove("hero-clipboard-document");
-        if (content) {
-          content.innerHTML = "Copied";
-        }
-      });
-
-      setTimeout(() => {
-        icon_cl.remove("hero-clipboard-document-check");
-        icon_cl.remove("hover:text-accent-500");
-        icon_cl.add("hero-clipboard-document");
-        if (content) {
-          content.innerHTML = "Copy";
-        }
-      }, 2000);
-    });
-  },
-};
-
 /* The phx-disable-with attribute on submit buttons only applies to liveview forms.
  * However, we need to disable the submit button for regular forms as well to prevent
  * double submissions and cases where the submit handler is slow (e.g. constant-time auth).
diff --git a/elixir/apps/web/lib/web/components/core_components.ex b/elixir/apps/web/lib/web/components/core_components.ex
index 475f2f893..1b0a9f106 100644
--- a/elixir/apps/web/lib/web/components/core_components.ex
+++ b/elixir/apps/web/lib/web/components/core_components.ex
@@ -69,7 +69,7 @@ defmodule Web.CoreComponents do
 
   def code_block(assigns) do
     ~H"""
-    <div id={@id} phx-hook="Copy" class="relative">
+    <div id={@id} class="relative">
       <div id={"#{@id}-nested"} class={[~w[
         text-sm text-left text-neutral-50
         inline-flex items-center
@@ -77,23 +77,32 @@ defmodule Web.CoreComponents do
         bg-neutral-800
         overflow-x-auto
       ], @class]} {@rest}>
-        <code class="block w-full no-scrollbar whitespace-pre rounded-b" data-copy phx-no-format><%= render_slot(@inner_block) %></code>
+        <code
+          id={"#{@id}-code"}
+          class="block w-full no-scrollbar whitespace-pre rounded-b"
+          phx-no-format
+        ><%= render_slot(@inner_block) %></code>
       </div>
 
-      <span title="Click to copy" class={~w[
-            absolute top-1 right-1
-            items-center
-            cursor-pointer
-            rounded
-            p-1
-            text-xs
-            text-neutral-50
-            hover:bg-neutral-50
-            hover:text-neutral-900
-            hover:opacity-50
-          ]}>
+      <button
+        type="button"
+        data-copy-to-clipboard-target={"#{@id}-code"}
+        data-copy-to-clipboard-content-type="innerHTML"
+        data-copy-to-clipboard-html-entities="true"
+        title="Click to copy"
+        class={[
+          "absolute top-1 right-1",
+          "items-center",
+          "cursor-pointer",
+          "rounded",
+          "p-1",
+          "bg-neutral-50/25",
+          "text-xs text-neutral-50",
+          "hover:bg-neutral-50 hover:text-neutral-900 hover:opacity-50"
+        ]}
+      >
         <.icon name="hero-clipboard-document" data-icon class="h-4 w-4" />
-      </span>
+      </button>
     </div>
     """
   end
@@ -114,11 +123,18 @@ defmodule Web.CoreComponents do
 
   def copy(assigns) do
     ~H"""
-    <div id={@id} phx-hook="Copy" class={@class} {@rest}>
-      <code data-copy phx-no-format><%= render_slot(@inner_block) %></code>
-      <span class={~w[text-neutral-400 cursor-pointer rounded]}>
+    <div id={@id} class={@class} {@rest}>
+      <code id={"#{@id}-code"} phx-no-format><%= render_slot(@inner_block) %></code>
+      <button
+        type="button"
+        class={~w[text-neutral-400 cursor-pointer rounded]}
+        data-copy-to-clipboard-target={"#{@id}-code"}
+        data-copy-to-clipboard-content-type="innerHTML"
+        data-copy-to-clipboard-html-entities="true"
+        title="Copy to clipboard"
+      >
         <.icon name="hero-clipboard-document" data-icon class="h-4 w-4" />
-      </span>
+      </button>
     </div>
     """
   end