Implement clipboard copy with JS commands (#699)

assets/css/js_interop.css

@@ -140,6 +140,6 @@ solely client-side operations.
   @apply hidden;
 }
 
-[phx-hook="VirtualizedLines"]:not(:hover) [phx-hook="ClipCopy"] {
+[phx-hook="VirtualizedLines"]:not(:hover) [data-element="clipcopy"] {
   @apply hidden;
 }

assets/js/app.js

@@ -22,7 +22,6 @@ import VegaLite from "./vega_lite";
 import Timer from "./timer";
 import MarkdownRenderer from "./markdown_renderer";
 import Highlight from "./highlight";
-import ClipCopy from "./clip_copy";
 import DragAndDrop from "./darg_and_drop";
 import PasswordToggle from "./password_toggle";
 import morphdomCallbacks from "./morphdom_callbacks";
@@ -40,7 +39,6 @@ const hooks = {
   Timer,
   MarkdownRenderer,
   Highlight,
-  ClipCopy,
   DragAndDrop,
   PasswordToggle,
 };
@@ -88,6 +86,13 @@ window.addEventListener("lb:set_value", (event) => {
   event.target.value = event.detail.value;
 });
 
+if ("clipboard" in navigator) {
+  window.addEventListener("lb:clipcopy", (event) => {
+    const text = event.target.textContent;
+    navigator.clipboard.writeText(text);
+  });
+}
+
 // Other global handlers
 
 window.addEventListener("contextmenu", (event) => {

assets/js/clip_copy/index.js

@@ -1,39 +0,0 @@
-import { getAttributeOrThrow } from "../lib/attribute";
-
-/**
- * A hook adding click handler that copies text from the target
- * element to clipboard.
- *
- * Configuration:
- *
- *   * `data-target-id` - HTML id of the element whose `innerText` is copied
- */
-const ClipCopy = {
-  mounted() {
-    this.props = getProps(this);
-
-    this.el.addEventListener("click", (event) => {
-      const target = document.getElementById(this.props.targetId);
-
-      if (target) {
-        const text = target.innerText;
-
-        if ("clipboard" in navigator) {
-          navigator.clipboard.writeText(text);
-        }
-      }
-    });
-  },
-
-  updated() {
-    this.props = getProps(this);
-  },
-};
-
-function getProps(hook) {
-  return {
-    targetId: getAttributeOrThrow(hook.el, "data-target-id"),
-  };
-}
-
-export default ClipCopy;

lib/livebook_web/live/output/text_component.ex

@@ -18,9 +18,8 @@ defmodule LivebookWeb.Output.TextComponent do
         phx-update="ignore"></div>
       <div class="absolute right-0 top-0 z-10">
         <button class="icon-button bg-gray-100"
-          id={"virtualized-text-#{@id}-clipcopy"}
-          phx-hook="ClipCopy"
-          data-target-id={"virtualized-text-#{@id}-template"}>
+          data-element="clipcopy"
+          phx-click={JS.dispatch("lb:clipcopy", to: "#virtualized-text-#{@id}-template")}>
           <.remix_icon icon="clipboard-line" class="text-lg" />
         </button>
       </div>

lib/livebook_web/live/session_live/bin_component.ex

@@ -73,9 +73,7 @@ defmodule LivebookWeb.SessionLive.BinComponent do
                     <span class="tooltip left" data-tooltip="Copy source">
                       <button class="icon-button"
                         aria-label="copy source"
-                        id={"bin-cell-#{cell.id}-clipcopy"}
-                        phx-hook="ClipCopy"
-                        data-target-id={"bin-cell-#{cell.id}-source"}>
+                        phx-click={JS.dispatch("lb:clipcopy", to: "#bin-cell-#{cell.id}-source")}>
                         <.remix_icon icon="clipboard-line" class="text-lg" />
                       </button>
                     </span>

lib/livebook_web/live/session_live/export_elixir_component.ex

@@ -34,9 +34,7 @@ defmodule LivebookWeb.SessionLive.ExportElixirComponent do
             <span class="tooltip left" data-tooltip="Copy source">
               <button class="icon-button"
                 aria-label="copy source"
-                id="export-notebook-source-clipcopy"
-                phx-hook="ClipCopy"
-                data-target-id="export-notebook-source">
+                phx-click={JS.dispatch("lb:clipcopy", to: "#export-notebook-source")}>
                 <.remix_icon icon="clipboard-line" class="text-lg" />
               </button>
             </span>

lib/livebook_web/live/session_live/export_live_markdown_component.ex

@@ -41,9 +41,7 @@ defmodule LivebookWeb.SessionLive.ExportLiveMarkdownComponent do
             <span class="tooltip left" data-tooltip="Copy source">
               <button class="icon-button"
                 aria-label="copy source"
-                id="export-notebook-source-clipcopy"
-                phx-hook="ClipCopy"
-                data-target-id="export-notebook-source">
+                phx-click={JS.dispatch("lb:clipcopy", to: "#export-notebook-source")}>
                 <.remix_icon icon="clipboard-line" class="text-lg" />
               </button>
             </span>

lib/livebook_web/live/settings_live.ex

@@ -50,9 +50,7 @@ defmodule LivebookWeb.SettingsLive do
               <span class="tooltip top" data-tooltip="Copy as environment variables">
                 <button class="icon-button"
                   aria-label="copy as environment variables"
-                  id={"file-systems-env-clipcopy"}
-                  phx-hook="ClipCopy"
-                  data-target-id={"file-systems-env-source"}
+                  phx-click={JS.dispatch("lb:clipcopy", to: "#file-systems-env-source")}
                   disabled={@file_systems_env == ""}>
                   <.remix_icon icon="clipboard-line" class="text-lg" />
                 </button>