From aeeae20c97e4ffe4263c0d045533879fe8e18462 Mon Sep 17 00:00:00 2001
From: Anna <a.rcottrill521@gmail.com>
Date: Tue, 25 Mar 2025 04:17:25 -0400
Subject: [PATCH] fix(tools): use dashed name for live version of challenge in
 editor (#59401)

---
 tools/challenge-editor/api/utils/get-step-contents.ts       | 6 +++---
 .../challenge-editor/client/interfaces/challenge-content.ts | 1 +
 .../client/src/components/editor/editor.tsx                 | 5 ++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/tools/challenge-editor/api/utils/get-step-contents.ts b/tools/challenge-editor/api/utils/get-step-contents.ts
index 82cc1dd3b5d..01452719223 100644
--- a/tools/challenge-editor/api/utils/get-step-contents.ts
+++ b/tools/challenge-editor/api/utils/get-step-contents.ts
@@ -7,11 +7,11 @@ export const getStepContent = async (
   sup: string,
   block: string,
   step: string
-): Promise<{ name: string; fileData: string }> => {
+): Promise<{ name: string; dashedName: string; fileData: string }> => {
   const filePath = join(CHALLENGE_DIR, sup, block, step);
 
   const fileData = await readFile(filePath, 'utf8');
   const name = matter(fileData).data.title as string;
-
-  return { name, fileData };
+  const dashedName = matter(fileData).data.dashedName as string;
+  return { name, dashedName, fileData };
 };
diff --git a/tools/challenge-editor/client/interfaces/challenge-content.ts b/tools/challenge-editor/client/interfaces/challenge-content.ts
index 55158411d8e..60474e17201 100644
--- a/tools/challenge-editor/client/interfaces/challenge-content.ts
+++ b/tools/challenge-editor/client/interfaces/challenge-content.ts
@@ -1,4 +1,5 @@
 export interface ChallengeContent {
   name: string;
   fileData: string;
+  dashedName: string;
 }
diff --git a/tools/challenge-editor/client/src/components/editor/editor.tsx b/tools/challenge-editor/client/src/components/editor/editor.tsx
index b1a4d2e509b..e9d14c90f0a 100644
--- a/tools/challenge-editor/client/src/components/editor/editor.tsx
+++ b/tools/challenge-editor/client/src/components/editor/editor.tsx
@@ -20,6 +20,7 @@ const Editor = () => {
   const [loading, setLoading] = useState(false);
   const [items, setItems] = useState({
     name: '',
+    dashedName: '',
     fileData: ''
   });
   const [stepContent, setStepContent] = useState('');
@@ -90,7 +91,9 @@ const Editor = () => {
       </p>
       <p>
         <Link
-          to={`${import.meta.env.CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION}/learn/${superBlockNameMap[superblock || '']}/${block || ''}/${items.name.replace(/[\s]+/g, '-').toLowerCase() || ''}`}
+          to={`${import.meta.env.CHALLENGE_EDITOR_LEARN_CLIENT_LOCATION}/learn/${superBlockNameMap[superblock || '']}/${block || ''}/${
+            items.dashedName
+          }`}
           target='_blank'
         >
           View Live Version of the Challenge in your running development