From 3984df88bb8b56d20d85632fa12b48696b8de788 Mon Sep 17 00:00:00 2001
From: Purushottam Tiwari <purushottam.tiwari.cd.cse19@itbhu.ac.in>
Date: Tue, 22 Feb 2022 15:05:06 +0530
Subject: [PATCH] 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   |  8 +++++
 static/js/popovers.js               | 49 ++++++++++++++++-------------
 static/styles/rendered_markdown.css | 12 +++++++
 3 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/static/js/message_edit_history.js b/static/js/message_edit_history.js
index 6bade9f561..c436f09d9f 100644
--- a/static/js/message_edit_history.js
+++ b/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(
diff --git a/static/js/popovers.js b/static/js/popovers.js
index ae1110bc75..148e70ed65 100644
--- a/static/js/popovers.js
+++ b/static/js/popovers.js
@@ -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();
diff --git a/static/styles/rendered_markdown.css b/static/styles/rendered_markdown.css
index 8b8761c8e4..b4f2fa246b 100644
--- a/static/styles/rendered_markdown.css
+++ b/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;
 }