Migrate interactive tutorials (post realm v0.70)

Attempt migrating interactive tutorial again

Migrate interactive tutorial snippet syntax

Interactive tutorials: partially migrate send-xrp, no-freeze to new syntax

Fix Send XRP interactive tutorial

Interactive tutorials: fixes for Redocly incl. localization challenges

Interactive tutorials: switch defaultValue back to value in anticipation of Redocly bugfix

Fix document.ready→window.onRouteChange, cyclers, etc. in interactive
tutorials.

content/@theme/helpers.ts

@@ -51,3 +51,16 @@ export function slugify(s) {
   }
   return s;
 }
+
+export function idify(s: string) {
+  // like slugify, but more unicode-friendly.
+  // for some reason the better version using \p gives an "s12 is undefined" TypeError sometimes,
+  // so it's disabled for now. With that fixed, we could use localized step names in interactive tutorials.
+  //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(/[\s-]+/gu, '-')
+  if (!s) {
+    s = "_";
+  }
+  return s
+}

content/@theme/markdoc/components.tsx

@@ -3,15 +3,10 @@ import * as React from 'react';
 import dynamicReact from '@markdoc/markdoc/dist/react';
 import { usePageSharedData } from '@portal/hooks';
 import { Link } from '@portal/Link';
+import { idify } from '../helpers';
 
 export {default as XRPLoader} from '../components/XRPLoader';
 
-function slugify(text: string) {
-    return text
-      .toLowerCase()
-      .replace(/ /g, '-')
-      .replace(/[^\w-]+/g, '');
-}
 
 export function IndexPageItems() {
     const data = usePageSharedData('index-page-items') as any[];
@@ -29,9 +24,8 @@ export function IndexPageItems() {
   );
 }
 
-export function StartStep(props: { children: React.ReactNode; stepIdx: number; steps: string[] }) {
-  const stepLabel = props.steps[props.stepIdx];
-  const stepId = slugify(stepLabel);
+export function InteractiveBlock(props: { children: React.ReactNode; label: string; steps: string[] }) {
+  const stepId = idify(props.label);
 
   return (
     <div className="interactive-block" id={'interactive-' + stepId}>
@@ -40,11 +34,11 @@ export function StartStep(props: { children: React.ReactNode; stepIdx: number; s
           <ul
             className="breadcrumb tutorial-step-crumbs"
             id={'bc-ul-' + stepId}
-            data-steplabel={stepLabel}
+            data-steplabel={props.label}
             data-stepid={stepId}
           >
             {props.steps?.map((step, idx) => {
-              const iterStepId = slugify(step).toLowerCase();
+              const iterStepId = idify(step).toLowerCase();
               let className = `breadcrumb-item bc-${iterStepId}`;
               if (idx > 0) className += ' disabled';
               if (iterStepId === stepId) className += ' current';

content/@theme/markdoc/schema.ts

@@ -56,10 +56,6 @@ export const interactiveBlock: Schema & { tagName: string } = {
       type: 'String',
       required: true,
     },
-    stepIdx: {
-      type: 'Number',
-      required: true,
-    },
     steps: {
       type: 'Array',
       required: true,