Fix textarea resize for editing messages.

Reusing code from the main compose_message component so that resizing now
behaves correctly. This means that when the user tries to resize vertically,
the autoresize code is disabled, and the textbox reverts to manual resizing.
Fixes #4573

static/js/compose.js

@@ -598,35 +598,7 @@ exports.validate = function () {
 };
 
 $(function () {
-    (function on_compose_resize(cb) {
+    resize.watch_manual_resize("#new_message_content");
-        var meta = {
-            compose_box: document.querySelector("#new_message_content"),
-            height: null,
-            mousedown: false,
-        };
-
-        meta.compose_box.addEventListener("mousedown", function () {
-            meta.mousedown = true;
-            meta.height = meta.compose_box.clientHeight;
-        });
-
-        // If the user resizes the compose box manually, we use the
-        // callback to stop autosize from adjusting the compose box height.
-        document.body.addEventListener("mouseup", function () {
-            if (meta.mousedown === true) {
-                meta.mousedown = false;
-                if (meta.height !== meta.compose_box.clientHeight) {
-                    meta.height = meta.compose_box.clientHeight;
-                    cb.call(meta.compose_box, meta.height);
-                }
-            }
-        });
-    }(function (height) {
-        // This callback disables autosize on the compose box.  It
-        // will be re-enabled when the compose box is next opened.
-        $("#new_message_content").trigger("autosize.destroy")
-            .height(height + "px");
-    }));
 
     // Run a feature test and decide whether to display
     // the "Attach files" button

static/js/message_edit.js

@@ -220,6 +220,7 @@ function edit_message(row, raw_content) {
         initClipboard(copy_message[0]);
     } else if (editability === editability_types.FULL) {
         copy_message.remove();
+        resize.watch_manual_resize("#message_edit_content");
         composebox_typeahead.initialize_compose_typeahead("#message_edit_content", {emoji: true, stream: true});
     }
 

static/js/resize.js

@@ -165,6 +165,38 @@ function left_userlist_get_new_heights() {
     return res;
 }
 
+exports.watch_manual_resize = function (element) {
+    (function on_box_resize(cb) {
+        var meta = {
+            box: document.querySelector(element),
+            height: null,
+            mousedown: false,
+        };
+
+        meta.box.addEventListener("mousedown", function () {
+            meta.mousedown = true;
+            meta.height = meta.box.clientHeight;
+        });
+
+        // If the user resizes the textarea manually, we use the
+        // callback to stop autosize from adjusting the height.
+        document.body.addEventListener("mouseup", function () {
+            if (meta.mousedown === true) {
+                meta.mousedown = false;
+                if (meta.height !== meta.box.clientHeight) {
+                    meta.height = meta.box.clientHeight;
+                    cb.call(meta.box, meta.height);
+                }
+            }
+        });
+    }(function (height) {
+        // This callback disables autosize on the textarea.  It
+        // will be re-enabled when this component is next opened.
+        $(element).trigger("autosize.destroy")
+            .height(height + "px");
+    }));
+};
+
 exports.resize_bottom_whitespace = function (h) {
     if (page_params.autoscroll_forever) {
         $("#bottom_whitespace").height($("#compose-container")[0].offsetHeight);

static/styles/zulip.css

@@ -1293,6 +1293,7 @@ div.focused_table {
 
 .message_edit_content {
     line-height: 18px;
+    resize: vertical!important;
 }
 
 .message_edit_countdown_timer {