Training update, most of the styles in the old tips were standardized, before all the styles were hardcoded into the tip, the new tips may still have some hardcoded styles but the vast majority only uses standard html or custom ones that are picked up in FormatTip to attribute styles

src/components/HighlightContent.tsx

@@ -1,39 +1,47 @@
-import { useCallback } from "react";
+import React, { useCallback } from "react";
+import { HighlightConfig, HighlightTarget } from "@/training/TrainingInterfaces";
 
-const HighlightContent: React.FC<{
-    html: string; 
-    highlightPhrases: string[], 
-    firstOccurence?: boolean
-}> = ({
+interface HighlightedContentProps {
+    html: string;
+    highlightConfigs: HighlightConfig[];
+    contentType: HighlightTarget;
+    currentSegmentIndex?: number;
+}
+
+const HighlightedContent: React.FC<HighlightedContentProps> = ({ 
     html, 
-    highlightPhrases, 
-    firstOccurence = false 
+    highlightConfigs, 
+    contentType,
+    currentSegmentIndex 
 }) => {
-
     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('|')})`, 'i');
-        const globalRegex = new RegExp(`(${highlightPhrases.map(escapeRegExp).join('|')})`, 'gi');
-
         let highlightedHtml = html;
+        highlightConfigs.forEach(config => {
+            if (config.targets.includes(contentType) || config.targets.includes('all')) {
+                const escapeRegExp = (string: string) => {
+                    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                };
 
-        if (firstOccurence) {
-            highlightedHtml = html.replace(regex, (match) => `<span style="background-color: yellow;">${match}</span>`);
-        } else {
-            highlightedHtml = html.replace(globalRegex, (match) => `<span style="background-color: yellow;">${match}</span>`);
-        }
+                const regex = new RegExp(config.phrases.map(escapeRegExp).join('|'), 'g');
+
+                if (contentType === 'segment' && currentSegmentIndex !== undefined) {
+                    const segments = highlightedHtml.split('</div>');
+                    segments[currentSegmentIndex] = segments[currentSegmentIndex].replace(regex, (match) => {
+                        return `<span style="background-color: #FFFACD;">${match}</span>`;
+                    });
+                    highlightedHtml = segments.join('</div>');
+                } else {
+                    highlightedHtml = highlightedHtml.replace(regex, (match) => {
+                        return `<span style="background-color: #FFFACD;">${match}</span>`;
+                    });
+                }
+            }
+        });
 
         return { __html: highlightedHtml };
-    }, [html, highlightPhrases, firstOccurence]);
+    }, [html, highlightConfigs, contentType, currentSegmentIndex]);
 
     return <div dangerouslySetInnerHTML={createHighlightedContent()} />;
 };
 
-export default HighlightContent;
+export default HighlightedContent;