Make reply UI work even when javascript is disabled

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");

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}

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;

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"));
   })
+})
 }
+
 `