diff --git a/assets/css/js_interop.css b/assets/css/js_interop.css index 3c172c10e..0f0052554 100644 --- a/assets/css/js_interop.css +++ b/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; } diff --git a/assets/js/app.js b/assets/js/app.js index 0d42a7184..b9dc8bdf0 100644 --- a/assets/js/app.js +++ b/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) => { diff --git a/assets/js/clip_copy/index.js b/assets/js/clip_copy/index.js deleted file mode 100644 index 44c9d1f88..000000000 --- a/assets/js/clip_copy/index.js +++ /dev/null @@ -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; diff --git a/lib/livebook_web/live/output/text_component.ex b/lib/livebook_web/live/output/text_component.ex index ec906dea2..f10bcc354 100644 --- a/lib/livebook_web/live/output/text_component.ex +++ b/lib/livebook_web/live/output/text_component.ex @@ -18,9 +18,8 @@ defmodule LivebookWeb.Output.TextComponent do phx-update="ignore">