From 9c38af007583b7fda45620f20d26b6f53259e9b1 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Tue, 1 Jun 2021 17:06:39 +0530
Subject: [PATCH] Make reply UI work even when javascript is disabled

---
 src/components/views/elements/ReplyThread.js |  2 +-
 src/utils/exportUtils/HtmlExport.tsx         |  2 +-
 src/utils/exportUtils/exportCSS.ts           | 20 +++++++++++++++
 src/utils/exportUtils/exportJS.ts            | 27 ++++++++------------
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 018c5d1e6e..f67889cca5 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -374,7 +374,7 @@ export default class ReplyThread extends React.Component {
         } else if (this.props.isExporting) {
             const eventId = ReplyThread.getParentEventId(this.props.parentEv);
             header = <p style={{ marginTop: -5, marginBottom: 5 }}>
-                In reply to <a className="mx_reply_anchor" scroll-to={`${eventId}`}>this message</a>
+                In reply to <a className="mx_reply_anchor" href={`#${eventId}`} scroll-to={eventId}>this message</a>
             </p>;
         } else if (this.state.loading) {
             const Spinner = sdk.getComponent("elements.Spinner");
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index eeb9f6a684..87c11e59ad 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -216,7 +216,7 @@ export default class HTMLExporter extends Exporter {
         const hasAvatar = this.hasAvatar(mxEv);
         if (hasAvatar) this.saveAvatarIfNeeded(mxEv);
 
-        return <li id={mxEv.getId()}>
+        return <li className="mx_Export_EventWrapper" id={mxEv.getId()}>
             <EventTile
                 mxEvent={mxEv}
                 continuation={continuation}
diff --git a/src/utils/exportUtils/exportCSS.ts b/src/utils/exportUtils/exportCSS.ts
index b34d22cfae..8aee952cbc 100644
--- a/src/utils/exportUtils/exportCSS.ts
+++ b/src/utils/exportUtils/exportCSS.ts
@@ -69,6 +69,26 @@ a.mx_reply_anchor:hover{
   left: 9px;
 }
 
+* {
+  scroll-behavior: smooth !important;
+}
+
+
+li.mx_Export_EventWrapper:target {
+  background: white;
+  animation: mx_event_highlight_animation 2s linear;
+}
+
+
+@keyframes mx_event_highlight_animation {
+  0%,100% { 
+    background: white;
+  }
+  50% { 
+    background: #e3e2df; 
+  }
+}
+
 .mx_RedactedBody img.mx_export_trash_icon {
   height: 14px;
   width: 14px;
diff --git a/src/utils/exportUtils/exportJS.ts b/src/utils/exportUtils/exportJS.ts
index 4fd0a5159d..2f7ba550e7 100644
--- a/src/utils/exportUtils/exportJS.ts
+++ b/src/utils/exportUtils/exportJS.ts
@@ -1,16 +1,10 @@
 export default `
-function scrollToElement(replyId){
-    let el = document.getElementById(replyId);
-    if(!el) { 
-        showToast("The message you're looking for wasn't exported");
-        return;
-    };
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    el.style.backgroundColor = '#f6f7f8';
-    el.style.transition = 'background-color 1s ease'
-    setTimeout(() => {
-        el.style.backgroundColor = "white"
-    }, 2000);
+function showToastIfNeeded(replyId){
+  let el = document.getElementById(replyId);
+  if(!el) { 
+      showToast("The message you're looking for wasn't exported");
+      return;
+  };
 }
 
 function showToast(text) {
@@ -23,10 +17,11 @@ function showToast(text) {
 }
 
 window.onload = () => {
-  document.querySelectorAll('.mx_reply_anchor').forEach(element => {
-    element.addEventListener('click', event => {
-      scrollToElement(event.target.getAttribute("scroll-to"));
-    })
+document.querySelectorAll('.mx_reply_anchor').forEach(element => {
+  element.addEventListener('click', event => {
+    showToastIfNeeded(event.target.getAttribute("scroll-to"));
   })
+})
 }
+
 `