From 7eac7a83ac0acbb596a5f37c333ddcbe6684cba8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonatan=20K=C5=82osko?= Date: Wed, 10 Nov 2021 20:17:32 +0100 Subject: [PATCH] Implement clipboard copy with JS commands (#699) --- assets/css/js_interop.css | 2 +- assets/js/app.js | 9 ++++- assets/js/clip_copy/index.js | 39 ------------------- .../live/output/text_component.ex | 5 +-- .../live/session_live/bin_component.ex | 4 +- .../session_live/export_elixir_component.ex | 4 +- .../export_live_markdown_component.ex | 4 +- lib/livebook_web/live/settings_live.ex | 4 +- 8 files changed, 14 insertions(+), 57 deletions(-) delete mode 100644 assets/js/clip_copy/index.js 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">
diff --git a/lib/livebook_web/live/session_live/bin_component.ex b/lib/livebook_web/live/session_live/bin_component.ex index 617ad3b49..f326843d2 100644 --- a/lib/livebook_web/live/session_live/bin_component.ex +++ b/lib/livebook_web/live/session_live/bin_component.ex @@ -73,9 +73,7 @@ defmodule LivebookWeb.SessionLive.BinComponent do diff --git a/lib/livebook_web/live/session_live/export_elixir_component.ex b/lib/livebook_web/live/session_live/export_elixir_component.ex index b135784af..7230e6526 100644 --- a/lib/livebook_web/live/session_live/export_elixir_component.ex +++ b/lib/livebook_web/live/session_live/export_elixir_component.ex @@ -34,9 +34,7 @@ defmodule LivebookWeb.SessionLive.ExportElixirComponent do diff --git a/lib/livebook_web/live/session_live/export_live_markdown_component.ex b/lib/livebook_web/live/session_live/export_live_markdown_component.ex index 38247769c..797bc8397 100644 --- a/lib/livebook_web/live/session_live/export_live_markdown_component.ex +++ b/lib/livebook_web/live/session_live/export_live_markdown_component.ex @@ -41,9 +41,7 @@ defmodule LivebookWeb.SessionLive.ExportLiveMarkdownComponent do diff --git a/lib/livebook_web/live/settings_live.ex b/lib/livebook_web/live/settings_live.ex index 7985478cb..068cd4ad2 100644 --- a/lib/livebook_web/live/settings_live.ex +++ b/lib/livebook_web/live/settings_live.ex @@ -50,9 +50,7 @@ defmodule LivebookWeb.SettingsLive do