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.

static/js/message_edit_history.js

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

static/js/popovers.js

@@ -869,7 +869,10 @@ export function register_click_handlers() {
         }
     });
 
-    $("#main_div, #compose .preview_content").on("click", ".code_external_link", function (e) {
+    $("#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();
@@ -882,7 +885,10 @@ export function register_click_handlers() {
             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));
+                view_in_playground_button.attr(
+                    "href",
+                    url_prefix + encodeURIComponent(extracted_code),
+                );
             } else {
                 for (const $playground of playground_info) {
                     $playground.playground_url =
@@ -890,7 +896,8 @@ export function register_click_handlers() {
                 }
                 toggle_playground_link_popover(this, playground_info);
             }
-    });
+        },
+    );
 
     $("body").on("click", ".popover_playground_link", (e) => {
         hide_playground_links_popover();

static/styles/rendered_markdown.css

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