feat(ui): add a transcript button (#56275)

Co-authored-by: Naomi the Technomancer <accounts+github@nhcarrigan.com>
Co-authored-by: sembauke <semboot699@gmail.com>

client/src/templates/Challenges/components/challenge-transcript.css

@@ -1,4 +1,17 @@
 .challenge-transcript-heading {
   cursor: pointer;
   font-weight: bold;
+  margin-top: 1.5em;
+}
+
+#learn-app-wrapper .transcript-table {
+  display: table;
+  width: 100%;
+  border: 1px solid var(--gray-05);
+  border-collapse: collapse;
+}
+
+#learn-app-wrapper .transcript-table td {
+  border: none;
+  text-align: start;
 }

client/src/templates/Challenges/components/challenge-transcript.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Spacer } from '@freecodecamp/ui';
 import store from 'store';
-import PrismFormatted from './prism-formatted';
 
 import './challenge-transcript.css';
 
@@ -37,7 +36,20 @@ function ChallengeTranscript({
           {t('learn.transcript')}
         </summary>
         <Spacer size='m' />
-        <PrismFormatted className={'line-numbers'} text={transcript} />
+        <table className='transcript-table'>
+          <tbody>
+            {transcript
+              .split('\n')
+              .filter(line => line.trim() !== '')
+              .map((line, idx) => {
+                return (
+                  <tr key={idx}>
+                    <td dangerouslySetInnerHTML={{ __html: line }} />
+                  </tr>
+                );
+              })}
+          </tbody>
+        </table>
       </details>
       <Spacer size='m' />
     </>

client/src/templates/Challenges/components/scene/scene.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { FullScene } from '../../../../redux/prop-types';
 import { Loader } from '../../../../components/helpers';
 import ClosedCaptionsIcon from '../../../../assets/icons/closedcaptions';
+import ChallengeTranscript from '../challenge-transcript';
 import { sounds, backgrounds, characterAssets } from './scene-assets';
 import Character from './character';
 import { SceneSubject } from './scene-subject';
@@ -167,6 +168,25 @@ export function Scene({
     setSceneIsReady(true);
   };
 
+  const buildTranscript = () => {
+    let transcriptText = '';
+    commands.forEach(command => {
+      if (command.character && command.dialogue && command.startTime) {
+        transcriptText =
+          transcriptText +
+          '\n' +
+          '<strong>' +
+          command.character +
+          '</strong>:' +
+          ' ' +
+          command.dialogue.text +
+          '\n';
+      }
+    });
+
+    return transcriptText;
+  };
+
   const handlePlay = useCallback(() => {
     const pausedAt = pausedAtRef.current;
     const updateCurrentTime = () => {
@@ -349,6 +369,7 @@ export function Scene({
     };
   }, []);
 
+  const transcriptText = buildTranscript();
   return (
     <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
       <div
@@ -396,7 +417,6 @@ export function Scene({
           </>
         )}
       </div>
-
       <div className='scene-controls'>
         <button
           className='scene-btn scene-play-btn'
@@ -432,6 +452,7 @@ export function Scene({
           </button>
         )}
       </div>
+      <ChallengeTranscript transcript={transcriptText} />
       <Spacer size='m' />
     </Col>
   );