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.
This commit is contained in:
Vaibhav 2019-02-05 19:57:17 +05:30 committed by Tim Abbott
parent 24445309e2
commit 61ebee6993
2 changed files with 38 additions and 0 deletions

View File

@ -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) {

View File

@ -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>