Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

message-editing: Add support for dynamic elements in edit-history. 

Edit history of message was rendered directly without passing
it through rendered_markdown.js. Due to this several visual
features for dynamic elements like time, spoilers, mentions
etc were not available.

To fix above issues we pass the content of edit-history
through rendered_markdown before showing edit history modal.

Fixes: #16029.
This commit is contained in:
Purushottam Tiwari 2022-02-22 15:05:06 +05:30 committed by Tim Abbott
parent 16687d4c74
commit 3984df88bb
3 changed files with 48 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/js/message_edit_history.js
View File

@ -11,6 +11,7 @@ import * as message_lists from "./message_lists";
import {page_params} from "./page_params";
import * as people from "./people";
import * as popovers from "./popovers";
import * as rendered_markdown from "./rendered_markdown";
import * as rows from "./rows";
import * as stream_data from "./stream_data";
import * as sub_store from "./sub_store";
@ -125,6 +126,13 @@ export function fetch_and_render_message_history(message) {
edited_messages: content_edit_history,
}),
);
// Pass the history through rendered_markdown.js
// to update dynamic_elements in the content.
$("#message-history")
.find(".rendered_markdown")
.each(function () {
rendered_markdown.update_elements($(this));
});
},
error(xhr) {
ui_report.error(

49
static/js/popovers.js
View File

@ -869,28 +869,35 @@ export function register_click_handlers() {
}
});
$("#main_div, #compose .preview_content").on("click", ".code_external_link", function (e) {
const view_in_playground_button = $(this);
const codehilite_div = $(this).closest(".codehilite");
e.stopPropagation();
const playground_info = realm_playground.get_playground_info_for_languages(
codehilite_div.data("code-language"),
);
// We do the code extraction here and set the target href combining the url_prefix
// and the extracted code. Depending on whether the language has multiple playground
// links configured, a popover is show.
const extracted_code = codehilite_div.find("code").text();
if (playground_info.length === 1) {
const url_prefix = playground_info[0].url_prefix;
view_in_playground_button.attr("href", url_prefix + encodeURIComponent(extracted_code));
} else {
for (const $playground of playground_info) {
$playground.playground_url =
$playground.url_prefix + encodeURIComponent(extracted_code);
$("#main_div, #preview_content, #message-history").on(
"click",
".code_external_link",
function (e) {
const view_in_playground_button = $(this);
const codehilite_div = $(this).closest(".codehilite");
e.stopPropagation();
const playground_info = realm_playground.get_playground_info_for_languages(
codehilite_div.data("code-language"),
);
// We do the code extraction here and set the target href combining the url_prefix
// and the extracted code. Depending on whether the language has multiple playground
// links configured, a popover is show.
const extracted_code = codehilite_div.find("code").text();
if (playground_info.length === 1) {
const url_prefix = playground_info[0].url_prefix;
view_in_playground_button.attr(
"href",
url_prefix + encodeURIComponent(extracted_code),
);
} else {
for (const $playground of playground_info) {
$playground.playground_url =
$playground.url_prefix + encodeURIComponent(extracted_code);
}
toggle_playground_link_popover(this, playground_info);
}
toggle_playground_link_popover(this, playground_info);
}
});
},
);
$("body").on("click", ".popover_playground_link", (e) => {
hide_playground_links_popover();

12
static/styles/rendered_markdown.css
View File

@ -515,6 +515,18 @@
display: none;
}
.message_edit_history_content .copy_codeblock {
/* Copy code block button is hidden in edit history, this is done
because of issues faced in copying code blocks in edit history
modal. This may be changed later as we decide upon a proper ux
for displaying edit-history. */
display: none;
}
.message_edit_history_content .code_external_link {
right: 5px;
}
.preview_content .code_external_link {
right: 12px;
}