Replace clipboard.js with stimulus controller

app/javascript/spotlight/admin/index.js

@@ -1,7 +1,6 @@
 import AddAnother from 'spotlight/admin/add_another'
 import AddNewButton from 'spotlight/admin/add_new_button'
 import BlacklightConfiguration from 'spotlight/admin/blacklight_configuration'
-import CopyEmailAddress from 'spotlight/admin/copy_email_addresses'
 import Croppable from 'spotlight/admin/croppable'
 import EditInPlace from 'spotlight/admin/edit_in_place'
 import Exhibits from 'spotlight/admin/exhibits'
@@ -50,7 +49,6 @@ export default class {
   connect() {
     new AddAnother().connect()
     new AddNewButton().connect()
-    new CopyEmailAddress().connect()
     new Croppable().connect()
     new EditInPlace().connect()
     new Exhibits().connect()
@@ -67,4 +65,4 @@ export default class {
     addAutocompletetoFeaturedImage()
     SpotlightNestable.init();
   }
-}
+}

app/javascript/spotlight/controllers/clipboard_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Connects to data-controller="clipboard"
+export default class extends Controller {
+  static targets = ["text"]
+
+  async copy(event) {
+    try {
+      await navigator.clipboard.write([new ClipboardItem({ "text/html": this.textTarget.innerHTML, "text/plain": this.textTarget.innerText })])
+    } catch (err) {
+      console.error('Clipboard controller failed to copy with error:', err)
+    }
+  }
+}

app/javascript/spotlight/controllers/index.js

@@ -1,8 +1,10 @@
+import ClipboardController from 'spotlight/controllers/clipboard_controller'
 import TagSelectorController from 'spotlight/controllers/tag_selector_controller'
 
 export default class {
   connect() {
     if (typeof Stimulus === "undefined") return
+    Stimulus.register('clipboard', ClipboardController)
     Stimulus.register('tag-selector', TagSelectorController)
   }
 }

app/views/spotlight/admin_users/index.html.erb

@@ -50,13 +50,15 @@
 
   <div class="mb-4">
     <h3 class="instructions"><%= t :'.admins_curators' %></h3>
-    <div id="admins_curators" class="card card-body bg-light">
+    <div id="admins_curators" class="card card-body bg-light" data-controller="clipboard">
       <div class='btn-toolbar align-self-end'>
-        <button class="btn btn-sm btn-primary copy-email-addresses" data-clipboard-target="#admins_curators">
+        <button class="btn btn-sm btn-primary copy-email-addresses" data-action="click->clipboard#copy">
             <%= t('.copy') %>
         </button>
       </div>
-      <%= Spotlight::Engine.user_class.with_roles.pluck(:email).sort.join(', ') %>
+      <div data-clipboard-target="text">
+        <%= Spotlight::Engine.user_class.with_roles.pluck(:email).sort.join(', ') %>
+      </div>
     </div>
   </div>
 

config/importmap.rb

@@ -3,7 +3,6 @@
 pin_all_from File.expand_path('../app/javascript/spotlight', __dir__), under: 'spotlight'
 pin_all_from File.expand_path('../vendor/assets/javascripts', __dir__)
 
-pin 'clipboard', to: 'https://cdn.skypack.dev/clipboard@2.0.10'
 pin 'sir-trevor', to: 'https://cdn.skypack.dev/sir-trevor@0.8.2'
 pin 'sortablejs', to: 'https://cdn.skypack.dev/sortablejs@^1.15.3'
 pin '@github/auto-complete-element', to: 'https://cdn.skypack.dev/@github/auto-complete-element'

lib/generators/spotlight/assets/propshaft_generator.rb

@@ -26,7 +26,6 @@ class PropshaftGenerator < Rails::Generators::Base
       def install_dependencies
         run 'yarn add @github/auto-complete-element'
         run 'yarn add @hotwired/turbo-rails'
-        run 'yarn add clipboard'
         run 'yarn add leaflet'
         run 'yarn add sir-trevor'
         run 'yarn add sortablejs'

package.json

@@ -34,7 +34,6 @@
   "dependencies": {
     "blacklight-frontend": "^8.4.0",
     "bootstrap": ">=4.3.1 <6.0.0",
-    "clipboard": "^2.0.11",
     "jquery": "^3.7.1",
     "jquery-serializejson": "^3.2.1",
     "leaflet": "^1.9.4",

rollup.config.js

@@ -9,7 +9,6 @@ const external = [
   '@github/auto-complete-element',
   '@hotwired/stimulus',
   'blacklight-frontend',
-  'clipboard',
   'jquery-serializejson',
   'jquery',
   'leaflet',
@@ -21,7 +20,6 @@ const globals = {
   '@github/auto-complete-element': 'AutoCompleteElement',
   '@hotwired/stimulus': 'Stimulus',
   'blacklight-frontend': 'Blacklight',
-  clipboard: 'Clipboard',
   jquery: 'jQuery',
   leaflet: 'L',
   openseadragon: 'OpenSeadragon',
@@ -48,4 +46,4 @@ const rollupConfig = {
   plugins: [includePaths(includePathOptions), commonjs()]
 }
 
-export default rollupConfig
+export default rollupConfig