drafts: Add a copy draft button.

This adds a button to the draft overlay that allows the user to copy
the draft to the clipboard.

Co-authored-by: palashb01 <palash.baderia@outlook.com>

web/src/drafts_overlay_ui.js

@@ -1,3 +1,4 @@
+import ClipboardJS from "clipboard";
 import $ from "jquery";
 import _ from "lodash";
 
@@ -5,6 +6,7 @@ import render_draft_table_body from "../templates/draft_table_body.hbs";
 
 import * as browser_history from "./browser_history.ts";
 import * as compose_actions from "./compose_actions.ts";
+import {show_copied_confirmation} from "./copied_tooltip.ts";
 import * as drafts from "./drafts.ts";
 import {$t} from "./i18n.ts";
 import * as message_view from "./message_view.ts";
@@ -15,6 +17,8 @@ import * as rendered_markdown from "./rendered_markdown.ts";
 import * as user_card_popover from "./user_card_popover.js";
 import * as user_group_popover from "./user_group_popover.ts";
 
+const {draft_model} = drafts;
+
 function restore_draft(draft_id) {
     const draft = drafts.draft_model.getDraft(draft_id);
     if (!draft) {
@@ -218,6 +222,12 @@ export function launch() {
             update_bulk_delete_ui();
         });
 
+        $("#drafts_table .overlay_message_controls .copy-overlay-message").on("click", function () {
+            const $draft_row = $(this).closest(".overlay-message-row");
+            const draft_id = $draft_row.data("draft-id");
+            copy_draft(draft_id);
+        });
+
         $(".select-drafts-button").on("click", (e) => {
             e.preventDefault();
             const $unchecked_checkboxes = $(".draft-selection-checkbox").filter(function () {
@@ -291,6 +301,26 @@ export function update_bulk_delete_ui() {
     }
 }
 
+export function copy_draft(draft_id) {
+    const draft = draft_model.getDraft(draft_id);
+    if (!draft) {
+        return;
+    }
+
+    const clipboard = new ClipboardJS(
+        "#drafts_table .overlay_message_controls .copy-overlay-message",
+        {
+            text() {
+                return draft.content;
+            },
+        },
+    );
+
+    clipboard.on("success", (e) => {
+        show_copied_confirmation(e.trigger);
+    });
+}
+
 export function open_overlay() {
     drafts.sync_count();
     overlays.open_overlay({

web/styles/app_components.css

@@ -1122,6 +1122,16 @@ input.settings_text_input {
                 word-wrap: unset;
             }
 
+            .copy-overlay-message {
+                cursor: pointer;
+                color: var(--color-message-action-visible);
+
+                &:hover,
+                &:focus-visible {
+                    color: var(--color-message-action-interactive);
+                }
+            }
+
             .restore-overlay-message {
                 cursor: pointer;
                 color: hsl(170deg 48% 54%);

web/templates/draft.hbs

@@ -39,6 +39,7 @@
                 <div class="messagebox-content">
                     <div class="message_top_line">
                         <div class="overlay_message_controls">
+                            <i class="fa fa-clone fa-lg copy-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tippy-content="{{t 'Copy draft' }}"></i>
                             <i class="fa fa-pencil fa-lg restore-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="restore-draft-tooltip-template"></i>
                             <i class="fa fa-trash-o fa-lg delete-overlay-message tippy-zulip-delayed-tooltip" aria-hidden="true" data-tooltip-template-id="delete-draft-tooltip-template"></i>
                             <div class="draft-selection-tooltip">