Fill Blanks changes

src/components/TrainingContent/AnimatedHighlight.tsx

@@ -1,23 +0,0 @@
-import { useCallback } from "react";
-
-const HighlightedContent: React.FC<{ html: string; highlightPhrases: string[] }> = ({ html, highlightPhrases }) => {
-
-    const createHighlightedContent = useCallback(() => {
-        if (highlightPhrases.length === 0) {
-            return { __html: html };
-        }
-
-        const escapeRegExp = (string: string) => {
-            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        };
-
-        const regex = new RegExp(`(${highlightPhrases.map(escapeRegExp).join('|')})`, 'gi');
-        const highlightedHtml = html.replace(regex, (match) => `<span style="background-color: yellow;">${match}</span>`);
-
-        return { __html: highlightedHtml };
-    }, [html, highlightPhrases]);
-
-    return <div dangerouslySetInnerHTML={createHighlightedContent()} />;
-};
-
-export default HighlightedContent;

src/components/TrainingContent/ExerciseWalkthrough.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { animated } from '@react-spring/web';
 import { FaRegCirclePlay, FaRegCircleStop } from "react-icons/fa6";
-import HighlightedContent from './AnimatedHighlight';
+import HighlightContent from '../HighlightContent';
 import { ITrainingTip, SegmentRef, TimelineEvent } from './TrainingInterfaces';
 
 
@@ -267,7 +267,7 @@ const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
                     <div className='flex-1 bg-white p-6 rounded-lg shadow'>
                         {/*<h2 className="text-xl font-bold mb-4">Question</h2>*/}
                         <div className="mb-4" dangerouslySetInnerHTML={{ __html: tip.exercise.question }} />
-                        <HighlightedContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
+                        <HighlightContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
                     </div>
                     <div className='flex-1'>
                         <div className='bg-gray-50 rounded-lg shadow'>