Fix interactive tutorials issues

@theme/markdoc/components.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useLocation } from 'react-router-dom';
 // @ts-ignore
 import dynamicReact from '@markdoc/markdoc/dist/react';
 import { usePageSharedData, useTranslate } from '@portal/hooks';
@@ -27,6 +28,7 @@ export function IndexPageItems() {
 
 export function InteractiveBlock(props: { children: React.ReactNode; label: string; steps: string[] }) {
   const stepId = idify(props.label);
+  const { pathname } = useLocation();
 
   return (
     <div className="interactive-block" id={'interactive-' + stepId}>
@@ -51,7 +53,7 @@ export function InteractiveBlock(props: { children: React.ReactNode; label: stri
             })}
           </ul>
         </div>
-        <div className="interactive-block-ui">{dynamicReact(props.children, React, {})}</div>
+        <div className="interactive-block-ui" key={pathname}>{dynamicReact(props.children, React, {})}</div>
       </div>
     </div>
     );
@@ -102,7 +104,7 @@ export function Badge(props: {
     }
 
     let childstrings = ""
-    
+
     React.Children.forEach(props.children, (child, index) => {
       if (typeof child == "string") {
         childstrings += child
@@ -125,7 +127,7 @@ export function Badge(props: {
     let badge_url = `https://img.shields.io/badge/${left}-${right}-${color}.svg`
 
     if (props.href) {
-      return (    
+      return (
         <Link to={props.href}>
           <img src={badge_url} alt={childstrings} className="shield" />
         </Link>

static/js/interactive-tutorial.js

@@ -62,7 +62,7 @@ function tl(key) {
  */
 function idify(s) {
  // s = s.replace(/[^\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]/gu, '').trim().toLowerCase()
- s = s.replace(/([^\w]|[\s-])/gu, '').trim().toLowerCase() 
+ s = s.replace(/([^\w]|[\s-])/gu, '').trim().toLowerCase()
  s = s.replace(/[\s-]+/gu, '-')
   if (!s) {
     s = "_";
@@ -176,8 +176,8 @@ function show_error(block, message) {
  * use the generated credentials instead of the placeholder EXAMPLE_ADDR and
  * EXAMPLE_SECRET.
  */
-const EXAMPLE_ADDR = "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe"
-const EXAMPLE_SECRET = "s████████████████████████████"
+var EXAMPLE_ADDR = "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe"
+var EXAMPLE_SECRET = "s████████████████████████████"
 function setup_generate_step() {
 
   $("#generate-creds-button").click( async (event) => {
@@ -629,6 +629,14 @@ async function show_log(block, msg) {
   block.find(".output-area").append(msg)
 }
 
+function onCurrentRouteLoaded(callback) {
+  const currentPath = window.location.pathname;
+  window.onRouteChange(() => {
+    if (window.location.pathname === currentPath) {
+      callback()
+    }
+  });
+}
 
 window.onRouteChange(() => {
   disable_followup_steps()

static/js/tutorials/create-amm.js

@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
     const EXPLORER = $("#connect-button").data("explorer")
 

static/js/tutorials/enable-no-freeze.js

@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
   // 3. Send AccountSet --------------------------------------------------------
   $("#send-accountset").click( async (event) => {

static/js/tutorials/enact-global-freeze.js

@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
   // 3. Send AccountSet to Start the Freeze ------------------------------------
   // also 6. Send AccountSet to End the Freeze.

static/js/tutorials/freeze-individual-line.js

@@ -55,7 +55,7 @@ window.after_connect.push(async () => {
   trust_line_setup_done = true
 })
 
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
 
 

static/js/tutorials/issue-a-token.js

@@ -87,7 +87,7 @@ function domain_to_hex(s) {
   return result.toUpperCase()
 }
 
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
   setup_2x_generate_step()
 
   $("#cold-domain-text").keyup( (event) => {

static/js/tutorials/require-destination-tags.js

@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
   // 3. Send AccountSet --------------------------------------------------------
   $("#send-accountset").click( async (event) => {

static/js/tutorials/send-xrp.js

@@ -2,7 +2,7 @@
 // 1. Connect
 // The code for these steps is handled by interactive-tutorial.js
 
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
 // 2. Prepare Transaction ------------------------------------------------------
 $("#prepare-button").click( async function(event) {

static/js/tutorials/trade-in-the-dex.js

@@ -3,7 +3,7 @@
 
 // Get Credentials, Connect steps handled by the snippet
 
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
 
 // Look Up Offers --------------------------------------------------------------
 

static/js/tutorials/use-tickets.js

@@ -1,7 +1,7 @@
 // 1. Generate
 // 2. Connect
 // The code for these steps is handled by interactive-tutorial.js
-window.onRouteChange(() => {
+onCurrentRouteLoaded(() => {
   const LLS_OFFSET = 75 // Expire unconfirmed transactions after about ~5 min
 
 // 3. Check Sequence Number