add copy button to message

Author: Nicholas Newberry

app/javascript/controllers/index.js

@@ -9,3 +9,6 @@ eagerLoadControllersFrom("controllers", application)
 // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
 // import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
 // lazyLoadControllersFrom("controllers", application)
+
+import Clipboard from "stimulus-clipboard"
+application.register('clipboard', Clipboard)

app/views/messages/_message.html.erb

@@ -3,11 +3,13 @@
   <div>
     <div class="flex justify-start items-start">
       <div class="flex-1 whitespace-prewrap" data-controller="markdown-text">
-          <%= raw(message.content) %>
+        <%= raw(message.content) %>
       </div>
-      <div class="flex flex-col ms-4">
-        <p class="py-1 text-xs text-right text-secondary-500 dark:text-secondary-400"><%= author_name_for(message) %></p>
-        <p class="py-1 text-xs text-right text-secondary-500 dark:text-secondary-400"><%= time_ago_in_words(message.created_at) %> ago</p>
+
+      <div class="flex flex-col ms-4 text-right text-secondary-500 dark:text-secondary-400">
+        <p class="py-1 text-xs"><%= author_name_for(message) %></p>
+        <p class="py-1 text-xs"><%= time_ago_in_words(message.created_at) %> ago</p>
+        <%= render "shared/copy_button", content: message.content.strip %>
       </div>
     </div>
 

app/views/shared/_copy_button.html.erb

@@ -0,0 +1,5 @@
+<div data-controller="clipboard" data-clipboard-success-content-value="Copied!">
+  <input readonly type="hidden" value="<%= content %>" data-clipboard-target="source">
+
+  <button type="button" data-action="clipboard#copy" data-clipboard-target="button"><i class="fa fa-copy"></i></button>
+</div>

config/importmap.rb

@@ -2,10 +2,11 @@
 
 pin "application"
 pin "@hotwired/turbo-rails", to: "turbo.min.js"
-pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.2.2
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
 pin "trix"
 pin "@rails/actiontext", to: "actiontext.esm.js"
 pin "marked", to: "https://ga.jspm.io/npm:marked@12.0.0/lib/marked.esm.js"
 pin "highlight.js", to: "https://ga.jspm.io/npm:highlight.js@11.9.0/es/index.js"
+pin "stimulus-clipboard" # @4.0.1