From 61ebee6993686cc4e059e8de601959f9ef63849b Mon Sep 17 00:00:00 2001
From: Vaibhav <vrongmeal@gmail.com>
Date: Tue, 5 Feb 2019 19:57:17 +0530
Subject: [PATCH] message edit: Add "preview" option to edit UI.

This add the "Preview" option to message edit controls similar to that in
compose UI.

Fixes #11438.
---
 static/js/click_handlers.js                   | 32 +++++++++++++++++++
 static/templates/message_edit_form.handlebars |  6 ++++
 2 files changed, 38 insertions(+)

diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index eefe7d8c95..704831a718 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -283,6 +283,38 @@ exports.initialize = function () {
         $("#message_edit_file_input_" + row_id).trigger("click");
     });
 
+    $("body").on("click", "#message_edit_form [id^='markdown_preview_']", function (e) {
+        e.preventDefault();
+
+        var row_id = rows.id($(this).closest(".message_row"));
+        function $_(selector) {
+            return $(selector + "_" + row_id);
+        }
+
+        var content = $_("#message_edit_content").val();
+        $_("#message_edit_content").hide();
+        $_("#markdown_preview").hide();
+        $_("#undo_markdown_preview").show();
+        $_("#preview_message_area").show();
+
+        compose.render_and_show_preview($_("#markdown_preview_spinner"), $_("#preview_content"), content);
+    });
+
+    $("body").on("click", "#message_edit_form [id^='undo_markdown_preview_']", function (e) {
+        e.preventDefault();
+
+        var row_id = rows.id($(this).closest(".message_row"));
+        function $_(selector) {
+            return $(selector + "_" + row_id);
+        }
+
+        $_("#message_edit_content").show();
+        $_("#undo_markdown_preview").hide();
+        $_("#preview_message_area").hide();
+        $_("#preview_content").empty();
+        $_("#markdown_preview").show();
+    });
+
     // MUTING
 
     $('body').on('click', '.on_hover_topic_mute', function (e) {
diff --git a/static/templates/message_edit_form.handlebars b/static/templates/message_edit_form.handlebars
index fa56863231..83b4859625 100644
--- a/static/templates/message_edit_form.handlebars
+++ b/static/templates/message_edit_form.handlebars
@@ -25,6 +25,10 @@
                 </svg>
             </button>
             <textarea class="message_edit_content" maxlength="10000" id="message_edit_content_{{message_id}}">{{content}}</textarea>
+            <div class="scrolling_list preview_message_area" id="preview_message_area_{{message_id}}" style="display:none;">
+                <div id="markdown_preview_spinner_{{message_id}}"></div>
+                <div id="preview_content_{{message_id}}" class="preview_content"></div>
+            </div>
         </div>
     </div>
     <div class="control-group action-buttons">
@@ -42,6 +46,8 @@
                 <a class="message-control-button fa fa-font" aria-hidden="true" title="{{t 'Formatting' }}" data-overlay-trigger="message-formatting" ></a>
                 <a class="message-control-button fa fa-paperclip notdisplayed" aria-hidden="true" id="attach_files_{{message_id}}" href="#" title="{{t "Attach files" }}"></a>
                 <a class="message-control-button fa fa-smile-o" aria-hidden="true" id="emoji_map" href="#" data-message-id="{{message_id}}" title="{{t 'Add emoji'  }}"></a>
+                <a id="undo_markdown_preview_{{message_id}}" class="message-control-button fa fa-edit" aria-hidden="true" style="display:none;" title="{{t 'Write' }}"></a>
+                <a id="markdown_preview_{{message_id}}" class="message-control-button fa fa-eye" aria-hidden="true" title="{{t 'Preview' }}"></a>
             </div>
             <div class="message-edit-timer-control-group">
                 <span class="message_edit_countdown_timer"></span>