message_list: Conditionally render message edit form container element.

This commit moves the placeholder elements for the message edit form,
to `message_edit_form.hbs`, so they are conditionally rendered only
when a message is being edited, rather than being present for every
message in the list.

Fixes #31134.

web/src/message_list.js

@@ -447,21 +447,22 @@ export class MessageList {
         if ($row.find(".message_edit_form form").length !== 0) {
             return;
         }
-        $row.find(".message_edit_form").append($form);
+        $row.find(".messagebox-content").append($form);
         $row.find(".message_content, .status-message, .message_controls").hide();
         $row.find(".messagebox-content").addClass("content_edit_mode");
-        $row.find(".message_edit").css("display", "block");
         // autosize will not change the height of the textarea if the `$row` is not
         // rendered in DOM yet. So, we call `autosize.update` post render.
         autosize($row.find(".message_edit_content"));
     }
 
     hide_edit_message($row) {
+        if ($row.find(".message_edit_form form").length === 0) {
+            return;
+        }
         compose_tooltips.hide_compose_control_button_tooltips($row);
         $row.find(".message_content, .status-message, .message_controls").show();
-        $row.find(".message_edit_form").empty();
         $row.find(".messagebox-content").removeClass("content_edit_mode");
-        $row.find(".message_edit").hide();
+        $row.find(".message_edit").remove();
         $row.trigger("mouseleave");
     }
 

web/styles/message_row.css

@@ -763,10 +763,6 @@ of the base style defined for a read-only textarea in dark mode. */
     }
 }
 
-.message_edit {
-    display: none;
-}
-
 /* Reduce some of the heavy padding from Bootstrap. */
 .message_edit_form {
     margin-bottom: 10px;

web/templates/message_body.hbs

@@ -59,10 +59,6 @@
 {{> edited_notice}}
 {{/if}}
 
-<div class="message_edit">
-    <div class="message_edit_form"></div>
-</div>
-
 <div class="message_length_controller">
     <button type="button" class="message_expander message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "Show more" }}</button>
     <button type="button" class="message_condenser message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">{{t "Show less" }}</button>

web/templates/message_edit_form.hbs

@@ -1,6 +1,7 @@
 {{! Client-side Handlebars template for rendering the message edit form. }}
-
+<div class="message_edit">
-<form id="edit_form_{{message_id}}" class="new-style">
+    <div class="message_edit_form">
+        <form id="edit_form_{{message_id}}" class="new-style">
             <div class="edit_form_banners"></div>
             <div class="edit-controls edit-content-container {{#if is_editable}}surround-formatting-buttons-row{{/if}}">
                 {{> copy_message_button message_id=this.message_id}}
@@ -37,4 +38,6 @@
                     </div>
                 </div>
             </div>
-</form>
+        </form>
+    </div>
+</div>

web/templates/single_message.hbs

@@ -11,6 +11,7 @@
     <div class="messagebox">
         <div class="messagebox-content {{#if status_message}}is-me-message{{/if}}">
             {{> message_body}}
+            {{!-- message_edit_form.hbs is inserted here when editing a message. --}}
         </div>
     </div>
 </div>