feat(challenge-parser,client): display Chinese dialogue with ruby annotations (#64235)

client/src/templates/Challenges/components/scene/scene-helpers.test.ts

@@ -191,5 +191,22 @@ describe('scene-helpers', () => {
         '\n<strong>Naomi</strong>: Use <div> and <span> tags\n'
       );
     });
+
+    it('should preserve Chinese dialogue with ruby annotations', () => {
+      const commands: SceneCommand[] = [
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: '<ruby>你好<rp>(</rp><rt>nǐ hǎo</rt><rp>)</rp></ruby>，<ruby>世界<rp>(</rp><rt>shì jiè</rt><rp>)</rp></ruby>。',
+            align: 'left'
+          }
+        }
+      ];
+      const result = buildTranscript(commands);
+      expect(result).toBe(
+        '\n<strong>Naomi</strong>: <ruby>你好<rp>(</rp><rt>nǐ hǎo</rt><rp>)</rp></ruby>，<ruby>世界<rp>(</rp><rt>shì jiè</rt><rp>)</rp></ruby>。\n'
+      );
+    });
   });
 });

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

@@ -393,7 +393,10 @@ export function Scene({
                 }`}
               >
                 <div className='scene-dialogue-label'>{dialogue.label}</div>
-                <div className='scene-dialogue-text'>{dialogue.text}</div>
+                <div
+                  className='scene-dialogue-text'
+                  dangerouslySetInnerHTML={{ __html: dialogue.text }}
+                />
               </div>
             )}
           </>