message_edit: Added copy to clipboard button.

A copy-to-clipboard button is added over message-edit textarea.
Closes #3239.

.eslintrc.json

@@ -118,7 +118,8 @@
         "Plotly": false,
         "emoji_codes": false,
         "drafts": false,
-        "katex": false
+        "katex": false,
+        "Clipboard": false
     },
     "rules": {
         "no-restricted-syntax": 0,

package.json

@@ -5,6 +5,7 @@
   "description": "",
   "main": "",
   "dependencies": {
+    "clipboard": "1.5.16",
     "handlebars": "4.0.6",
     "i18next": "3.4.4",
     "i18next-parser": "0.11.1",

static/js/click_handlers.js

@@ -151,6 +151,14 @@ $(function () {
         e.stopPropagation();
         popovers.hide_all();
     });
+    $("body").on("click", ".copy_message", function (e) {
+        $(this).attr("data-original-title", "Copied!");
+        $(this).tooltip().tooltip('show');
+        var row = $(this).closest(".message_row");
+        message_edit.end(row);
+        e.preventDefault();
+        e.stopPropagation();
+    });
     $("body").on("click", "a", function () {
         if (document.activeElement === this) {
             ui_util.blur_active_element();

static/js/message_edit.js

@@ -16,6 +16,10 @@ var editability_types = {
 };
 exports.editability_types = editability_types;
 
+function initClipboard(elem) {
+    return new Clipboard(elem);
+}
+
 function get_editability(message, edit_limit_seconds_buffer) {
     edit_limit_seconds_buffer = edit_limit_seconds_buffer || 0;
     if (!(message && message.sent_by_me)) {
@@ -189,6 +193,8 @@ function edit_message(row, raw_content) {
     currently_editing_messages[message.id] = edit_obj;
     current_msg_list.show_edit_message(row, edit_obj);
 
+    initClipboard(row.find('.copy_message')[0]);
+
     form.keydown(_.partial(handle_edit_keydown, false));
 
     var message_edit_content = row.find('textarea.message_edit_content');

static/js/ui_init.js

@@ -212,6 +212,25 @@ $(function () {
 
     $('.message_failed i[data-toggle="tooltip"]').tooltip();
 
+    $('.copy_message[data-toggle="tooltip"]').tooltip();
+
+    $("body").on("mouseover", "#message_edit_content", function () {
+        $(this).closest(".message_row").find(".copy_message").show();
+    });
+
+    $("body").on("mouseout", "#message_edit_content", function () {
+        $(this).closest(".message_row").find(".copy_message").hide();
+    });
+
+    $("body").on("mouseover", ".copy_message", function () {
+        $(this).show();
+        $(this).tooltip('show');
+    });
+
+    $("body").on("mouseout", ".copy_message", function () {
+        $(this).tooltip('hide');
+    });
+
     if (!page_params.realm_allow_message_editing) {
         $("#edit-message-hotkey-help").hide();
     }

static/styles/zulip.css

@@ -281,6 +281,27 @@ li,
     line-height: 100%;
 }
 
+.copy_message, .copy_message:focus {
+    background-image: url('/static/images/clippy.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-color: white;
+    background-position: center;
+    height: 20px;
+    width: 15px;
+    padding: 5px 10px;
+    border-radius: 2px;
+    position: relative;
+    top: 32px;
+    left: -5px;
+    margin-top: -8px;
+    display: block;
+}
+
+.copy_message:hover {
+    background-color: #dadada;
+}
+
 .btn-large {
     font-size: 115%;
 }

static/templates/message_edit_form.handlebars

@@ -16,6 +16,8 @@
 {{/if}}
     <div class="control-group no-margin">
         <div class="controls edit-controls">
+            <button class="btn pull-right copy_message" data-toggle="tooltip" title="{{t "Copy to clipboard" }}" data-clipboard-target="#message_edit_content">
+            </button>
             <label class="edit-control-label" for="message_edit_topic">{{t "Content" }}</label>
             <textarea class="message_edit_content" id="message_edit_content">{{content}}</textarea>
         </div>

version.py

@@ -1,2 +1,2 @@
 ZULIP_VERSION = "1.5.1+git"
-PROVISION_VERSION = '4.12'
+PROVISION_VERSION = '4.13'

zproject/settings.py

@@ -793,6 +793,7 @@ JS_SPECS = {
             'third/bootstrap-notify/js/bootstrap-notify.js',
             'third/html5-formdata/formdata.js',
             'node_modules/jquery-validation/dist/jquery.validate.js',
+            'node_modules/clipboard/dist/clipboard.js',
             'third/jquery-form/jquery.form.js',
             'third/jquery-filedrop/jquery.filedrop.js',
             'third/jquery-caret/jquery.caret.1.5.2.js',