fix(transcript): accept and render HTML string (#735)

Author: huyenltnguyen

package.json

@@ -54,7 +54,8 @@
     "@headlessui/react": "1.7.19",
     "@radix-ui/react-tabs": "1.1.13",
     "babel-plugin-prismjs": "2.1.0",
-    "prismjs": "1.30.0"
+    "prismjs": "1.30.0",
+    "sanitize-html": "2.17.0"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
@@ -88,6 +89,7 @@
     "@types/prismjs": "1.26.5",
     "@types/react": "16.14.68",
     "@types/react-dom": "16.9.25",
+    "@types/sanitize-html": "2.16.0",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "autoprefixer": "10.4.22",

pnpm-lock.yaml

@@ -708,9 +708,8 @@ export const WithAudio: Story = {
 		audioUrl:
 			"https://cdn.freecodecamp.org/curriculum/english/animation-assets/sounds/1.1-1.mp3",
 		audioAriaLabel: "Audio for question",
-		transcript: `
-			Maria: Hello. You're the new graphic designer, right? I'm Maria, the team lead.
-			Tom: Hi, that's right. I'm Tom McKenzie. It's a pleasure to meet you.`,
+		transcript: `<p><b>Maria:</b> Hello. You're the new graphic designer, right? I'm Maria, the team lead.</p>
+<p><b>Tom:</b> Hi, that's right. I'm Tom McKenzie. It's a pleasure to meet you.</p>`,
 		answers: [
 			{ label: "Option 1", value: 1 },
 			{ label: "Option 2", value: 2 },
@@ -728,9 +727,8 @@ export const WithAudio: Story = {
       question="Listen to the audio and select the correct answer:"
       audioUrl="https://cdn.freecodecamp.org/curriculum/english/animation-assets/sounds/1.1-1.mp3"
       audioAriaLabel="Audio for question"
-      transcript={\`
-        Maria: Hello. You're the new graphic designer, right? I'm Maria, the team lead.
-        Tom: Hi, that's right. I'm Tom McKenzie. It's a pleasure to meet you.\`}
+      transcript={\`<p><b>Maria:</b> Hello. You're the new graphic designer, right? I'm Maria, the team lead.</p>
+<p><b>Tom:</b> Hi, that's right. I'm Tom McKenzie. It's a pleasure to meet you.</p>\`}
       answers={[
         { label: "Option 1", value: 1 },
         { label: "Option 2", value: 2 },

src/quiz-question/quiz-question.stories.tsx

@@ -395,7 +395,7 @@ describe("<QuizQuestion />", () => {
 				]}
 				audioUrl="test-audio.mp3"
 				audioAriaLabel="Audio for question"
-				transcript="Test transcript"
+				transcript="<p>Test transcript</p>"
 			/>,
 		);
 
@@ -419,7 +419,7 @@ describe("<QuizQuestion />", () => {
 				]}
 				audioUrl="test-audio.mp3"
 				audioAriaLabel="Audio for question 1"
-				transcript="Test transcript"
+				transcript="<p>Test transcript</p>"
 				position={1}
 			/>,
 		);
@@ -518,7 +518,7 @@ describe("<QuizQuestion />", () => {
 		{ label: "Option 2", value: 2 },
 	]}
 	audioUrl="https://example.com/audio.mp3"
-	transcript="Audio transcript"
+	transcript="<p>Audio transcript</p>"
 />;
 
 // QuizQuestion with audioUrl but missing transcript
@@ -552,7 +552,7 @@ describe("<QuizQuestion />", () => {
 		{ label: "Option 1", value: 1 },
 		{ label: "Option 2", value: 2 },
 	]}
-	transcript="Audio transcript"
+	transcript="<p>Audio transcript</p>"
 />;
 
 // QuizQuestion with valid audio props
@@ -564,5 +564,5 @@ describe("<QuizQuestion />", () => {
 	]}
 	audioUrl="https://example.com/audio.mp3"
 	audioAriaLabel="Audio for question"
-	transcript="Audio transcript"
+	transcript="<p>Audio transcript</p>"
 />;

src/quiz-question/quiz-question.test.tsx

@@ -16,19 +16,19 @@ type Story = StoryObj<typeof Transcript>;
 
 export const WithoutSpeakers: Story = {
 	args: {
-		transcript: `In this lesson, we'll explore the fundamentals of JavaScript.
-JavaScript is a versatile programming language used for web development.
-It allows you to create interactive and dynamic web pages.
-Let's start by understanding variables and data types.`,
+		transcript: `<p>In this lesson, we'll explore the fundamentals of JavaScript.</p>
+<p>JavaScript is a versatile programming language used for web development.</p>
+<p>It allows you to create interactive and dynamic web pages.</p>
+<p>Let's start by understanding variables and data types.</p>`,
 	},
 	parameters: {
 		docs: {
 			source: {
 				code: `<Transcript 
-  transcript={\`In this lesson, we'll explore the fundamentals of JavaScript.
-JavaScript is a versatile programming language used for web development.
-It allows you to create interactive and dynamic web pages.
-Let's start by understanding variables and data types.\`}
+  transcript={\`<p>In this lesson, we'll explore the fundamentals of JavaScript.</p>
+<p>JavaScript is a versatile programming language used for web development.</p>
+<p>It allows you to create interactive and dynamic web pages.</p>
+<p>Let's start by understanding variables and data types.</p>\`}
 />`,
 			},
 		},
@@ -37,17 +37,36 @@ Let's start by understanding variables and data types.\`}
 
 export const WithSpeakers: Story = {
 	args: {
-		transcript: `Tom: Hi, that's right. I'm Tom McKenzie.
-Maria: Welcome aboard, Tom. How do you like California so far?
-Tom: I like it. It's different from Texas, but I like it here.`,
+		transcript: `<p><b>Tom:</b> Hi, that's right. I'm Tom McKenzie.</p>
+<p><b>Maria:</b> Welcome aboard, Tom. How do you like California so far?</p>
+<p><b>Tom:</b> I like it. It's different from Texas, but I like it here.</p>`,
 	},
 	parameters: {
 		docs: {
 			source: {
 				code: `<Transcript 
-  transcript={\`Tom: Hi, that's right. I'm Tom McKenzie.
-Maria: Welcome aboard, Tom. How do you like California so far?
-Tom: I like it. It's different from Texas, but I like it here.\`}
+  transcript={\`<p><b>Tom:</b> Hi, that's right. I'm Tom McKenzie.</p>
+<p><b>Maria:</b> Welcome aboard, Tom. How do you like California so far?</p>
+<p><b>Tom:</b> I like it. It's different from Texas, but I like it here.</p>\`}
+/>`,
+			},
+		},
+	},
+};
+
+export const WithChineseAndSpeakers: Story = {
+	args: {
+		transcript: `<p><b>Wang Hua:</b> <ruby>你好<rt>nǐ hǎo</rt></ruby>，<ruby>我是王华<rt>wǒ shì wáng huá</rt></ruby>。</p>
+<p><b>Wang Hua:</b> <ruby>请问你叫什么名字<rt>qǐng wèn nǐ jiào shén me míng zì</rt></ruby>？</p>
+<p><b>Liu Ming:</b> <ruby>你好<rt>nǐ hǎo</rt></ruby>，<ruby>我叫刘明<rt>wǒ jiào liú míng</rt></ruby>。</p>`,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<Transcript 
+  transcript={\`<p><b>Wang Hua:</b> <ruby>你好<rt>nǐ hǎo</rt></ruby>，<ruby>我是王华<rt>wǒ shì wáng huá</rt></ruby>。</p>
+<p><b>Wang Hua:</b> <ruby>请问你叫什么名字<rt>qǐng wèn nǐ jiào shén me míng zì</rt></ruby>？</p>
+<p><b>Liu Ming:</b> <ruby>你好<rt>nǐ hǎo</rt></ruby>，<ruby>我叫刘明<rt>wǒ jiào liú míng</rt></ruby>。</p>\`}
 />`,
 			},
 		},