From 382a828eeca9e6ea99f87d608d1a69e91b1a6906 Mon Sep 17 00:00:00 2001
From: ubaidrmn <rehmanubaid2003@gmail.com>
Date: Tue, 18 Mar 2025 03:04:02 +0500
Subject: [PATCH] message_edit: Fix stale syntax upon cancelling upload in
 preview.

Previously, canceling an upload in preview mode &
returning to editing left the syntax unchanged
(e.g., still showing "Uploading"). This happened
because the `replaceFieldText` function does not
work when the text area's display is none.

To fix this, instead of hiding the textarea in
preview mode, we use a grid to overlap it with
the preview container. This is the same thing we
are doing in the compose box. We have also added
css to ensure the textarea remains hidden behind
the transparent preview container
in preview mode.
---
 web/src/message_edit.ts    |  2 --
 web/styles/compose.css     | 11 +++++++++++
 web/styles/message_row.css |  5 ++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/message_edit.ts b/web/src/message_edit.ts
index 444ad97341..cb2e4dff6a 100644
--- a/web/src/message_edit.ts
+++ b/web/src/message_edit.ts
@@ -1787,7 +1787,6 @@ export function show_preview_area($element: JQuery): void {
     $row.addClass("preview_mode");
     $row.find(".preview_mode_disabled .compose_control_button").attr("tabindex", -1);
 
-    $msg_edit_content.hide();
     $row.find(".markdown_preview").hide();
     $row.find(".undo_markdown_preview").show();
     const $preview_message_area = $row.find(".preview_message_area");
@@ -1810,7 +1809,6 @@ export function clear_preview_area($element: JQuery): void {
     $row.removeClass("preview_mode");
     $row.find(".preview_mode_disabled .compose_control_button").attr("tabindex", 0);
 
-    $row.find(".message_edit_content").show();
     $row.find(".undo_markdown_preview").hide();
     $row.find(".preview_message_area").hide();
     $row.find(".preview_content").empty();
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 646502bb12..0f56a0d9dc 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -1806,4 +1806,15 @@ textarea.new_message_textarea {
             pointer-events: none;
         }
     }
+
+    .message-edit-textbox {
+        /* In preview mode, we hide the message edit
+           textbox to prevent it from appearing behind
+           the preview container. We cannot set its
+           display to none or visibility to hidden, as
+           that would prevent us from modifying the
+           textarea's value. */
+        height: 0;
+        overflow: hidden;
+    }
 }
diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index 4b9dde5334..c84e8f7c54 100644
--- a/web/styles/message_row.css
+++ b/web/styles/message_row.css
@@ -764,13 +764,15 @@
     border-radius: 4px;
     border: 1px solid var(--color-message-content-container-border);
     transition: border-color 0.2s ease;
+    display: grid;
+    grid-template-areas: "message-edit-content";
 
     &:has(.message_edit_content:focus) {
         border-color: var(--color-message-content-container-border-focus);
     }
 
     .message-edit-textbox {
-        position: relative;
+        grid-area: message-edit-content;
 
         .textarea-over-limit {
             background-color: var(
@@ -954,6 +956,7 @@ of the base style defined for a read-only textarea in dark mode. */
 
     .preview_message_area {
         max-height: var(--max-message-edit-height);
+        grid-area: message-edit-content;
     }
 }