Change edit_message_content to have unique IDs for different messages.

Fixes bugs of when multiple messages are being edited simultaneously.
Specifically, typeahead is no longer broken, copying messages to clipboard
is less buggy, and resizing is no longer
broken when multiple messages are being edited.

frontend_tests/casper_tests/08-edit.js

@@ -94,8 +94,8 @@ casper.then(function () {
     casper.test.assertNotVisible('form.message_edit_form', 'Message edit box not visible');
 
     common.keypress(37);
-    casper.waitUntilVisible("#message_edit_content", function () {
+    casper.waitUntilVisible(".message_edit_content", function () {
-        var fieldVal = common.get_form_field_value('#message_edit_content');
+        var fieldVal = common.get_form_field_value('.message_edit_content');
         casper.test.assertEquals(fieldVal, "test edited pm", "Opened editing last own message");
         casper.click('.message_edit_cancel');
     });

static/js/message_edit.js

@@ -183,6 +183,7 @@ function edit_message(row, raw_content) {
     var form = $(templates.render(
         'message_edit_form',
         {is_stream: (message.type === 'stream'),
+         message_id: message.id,
          is_editable: is_editable,
          has_been_editable: (editability !== editability_types.NO),
          topic: message.subject,
@@ -220,9 +221,10 @@ function edit_message(row, raw_content) {
         initClipboard(copy_message[0]);
     } else if (editability === editability_types.FULL) {
         copy_message.remove();
-        var listeners = resize.watch_manual_resize("#message_edit_content");
+        var edit_id = "#message_edit_content_" + rows.id(row);
+        var listeners = resize.watch_manual_resize(edit_id);
         currently_editing_messages[rows.id(row)].listeners = listeners;
-        composebox_typeahead.initialize_compose_typeahead("#message_edit_content", {emoji: true, stream: true});
+        composebox_typeahead.initialize_compose_typeahead(edit_id, {emoji: true, stream: true});
     }
 
     // Add tooltip
@@ -364,7 +366,7 @@ exports.end = function (row) {
 
         // Clean up resize event listeners
         var listeners = currently_editing_messages[message.id].listeners;
-        var edit_box = document.querySelector("#message_edit_content");
+        var edit_box = document.querySelector("#message_edit_content_" + message.id);
         edit_box.removeEventListener("mousedown", listeners[0]);
         document.body.removeEventListener("mouseup", listeners[1]);
 

static/js/ui_init.js

@@ -214,11 +214,11 @@ $(function () {
 
     $('.copy_message[data-toggle="tooltip"]').tooltip();
 
-    $("body").on("mouseover", "#message_edit_content", function () {
+    $("body").on("mouseover", ".message_edit_content", function () {
         $(this).closest(".message_row").find(".copy_message").show();
     });
 
-    $("body").on("mouseout", "#message_edit_content", function () {
+    $("body").on("mouseout", ".message_edit_content", function () {
         $(this).closest(".message_row").find(".copy_message").hide();
     });
 

static/templates/message_edit_form.handlebars

@@ -16,13 +16,13 @@
     {{/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 and close" }}" data-clipboard-target="#message_edit_content">
+            <button class="btn pull-right copy_message" data-toggle="tooltip" title="{{t "Copy and close" }}" data-clipboard-target="#message_edit_content_{{message_id}}">
                 <svg height="20" width="18" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" id="clipboard_image">
                     <path fill="#777" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
                 </svg>
             </button>
             <label class="edit-control-label" for="message_edit_topic">{{t "Content" }}</label>
-            <textarea class="message_edit_content" id="message_edit_content">{{content}}</textarea>
+            <textarea class="message_edit_content" id="message_edit_content_{{message_id}}">{{content}}</textarea>
         </div>
     </div>
     <div class="control-group action-buttons">