#1448, add copy to clipboard button on inbox share dialogue

app/javascript/retrospring/controllers/clipboard_controller.ts

@@ -14,6 +14,7 @@ export default class extends Controller {
     try {
       await navigator.clipboard.writeText(this.copyValue);
       showNotification(I18n.translate("frontend.clipboard_copy.success"));
+      this.element.dispatchEvent(new CustomEvent('retrospring:copied'));
     } catch (error) {
       console.log(error);
       showErrorNotification(I18n.translate("frontend.clipboard_copy.error"));

app/javascript/retrospring/controllers/inbox_sharing_controller.ts

@@ -1,13 +1,14 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ['twitter', 'tumblr', 'telegram', 'other', 'custom'];
+  static targets = ['twitter', 'tumblr', 'telegram', 'other', 'custom', 'clipboard'];
 
   declare readonly twitterTarget: HTMLAnchorElement;
   declare readonly tumblrTarget: HTMLAnchorElement;
   declare readonly telegramTarget: HTMLAnchorElement;
   declare readonly customTarget: HTMLAnchorElement;
   declare readonly otherTarget: HTMLButtonElement;
+  declare readonly clipboardTarget: HTMLButtonElement;
   declare readonly hasCustomTarget: boolean;
 
   static values = {
@@ -24,6 +25,7 @@ export default class extends Controller {
       this.tumblrTarget.addEventListener('click', () => this.close());
       this.telegramTarget.addEventListener('click', () => this.close());
       this.otherTarget.addEventListener('click', () => this.closeAfterShare());
+      this.clipboardTarget.addEventListener('click', () => this.closeAfterCopyToClipboard());
 
       if (this.hasCustomTarget) {
         this.customTarget.addEventListener('click', () => this.close());
@@ -54,4 +56,8 @@ export default class extends Controller {
   closeAfterShare(): void {
     this.otherTarget.addEventListener('retrospring:shared', () => this.close());
   }
+
+  closeAfterCopyToClipboard(): void {
+    this.clipboardTarget.addEventListener('retrospring:copied', () => this.close());
+  }
 }

app/javascript/retrospring/features/inbox/entry/answer.ts

@@ -31,11 +31,16 @@ export function answerEntryHandler(event: Event): void {
       showNotification(data.message);
 
       const shareButton = inboxEntry.querySelector<HTMLButtonElement>('[data-controller="share"]');
+      const clipboardCopyButton = inboxEntry.querySelector<HTMLButtonElement>('[data-action="clipboard#copy"]')
       if (shareButton != null) {
         shareButton.dataset.shareUrlValue = data.sharing.url;
         shareButton.dataset.shareTextValue = data.sharing.text;
       }
 
+      if (clipboardCopyButton != null){
+        clipboardCopyButton.dataset.clipboardCopyValue = `${data.sharing.text} ${data.sharing.url}`;
+      }
+
       const sharing = inboxEntry.querySelector<HTMLElement>('.inbox-entry__sharing');
       if (sharing != null) {
         sharing.dataset.inboxSharingConfigValue = JSON.stringify(data.sharing);

app/views/inbox/_entry.html.haml

@@ -30,6 +30,9 @@
             %a.btn.btn-primary{ href: "#", data: { inbox_sharing_target: "telegram" }, target: "_blank" }
               %i.fab.fa-telegram.fa-fw
               Telegram
+            %a.btn.btn-primary{ data: { controller: :clipboard, action: "clipboard#copy", inbox_sharing_target: "clipboard" }}
+              %i.fa.fa-fw.fa-solid.fa-copy
+              = t("actions.share.copy")
             %button.btn.btn-primary{ data: { controller: "share", action: "share#share", inbox_sharing_target: "other" } }
               %i.fa.fa-fw.fa-share-alt
               = t("actions.share.other")