fix(SUP-43316): support links in IVQ questions

src/components/quiz-question/multi-choice/multi-choice.tsx

@@ -1,6 +1,6 @@
 import {h} from 'preact';
 import {useCallback, useEffect, useRef} from 'preact/hooks';
-import {makeQuestionLabels} from '../../../utils';
+import {makeQuestionLabels, wrapLinksWithTags} from '../../../utils';
 import {QuestionProps, QuizTranslates} from '../../../types';
 import {QuestionAddons} from '../question-addons';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
@@ -85,7 +85,7 @@ export const MultiChoice = withText(translates)(
       <div className={styles.multiChoiceWrapper} data-testid="multipleChoiceContainer">
         <legend className={styles.questionText} data-testid="multipleChoiceQuestionTitle" tabIndex={0} ref={quizQuestionRef}>
           <span className={styles.visuallyHidden}>{`${otherProps.questionLabel} #${questionIndex}:`}</span>
-          {question}
+          <div dangerouslySetInnerHTML={{ __html: wrapLinksWithTags(question) }} />
         </legend>
         {hint && <QuestionAddons hint={hint} />}
         <div className={styles.optionalAnswersWrapper} data-testid="multipleChoiceAnswersWrapper">

src/components/quiz-question/open-question/open-question.tsx

@@ -3,6 +3,7 @@ import {useCallback, useEffect, useRef} from 'preact/hooks';
 import {QuestionProps, QuizTranslates} from '../../../types';
 import {QuestionAddons} from '../question-addons';
 import * as styles from './open-question.scss';
+import {wrapLinksWithTags} from '../../../utils';
 
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 
@@ -37,7 +38,7 @@ export const OpenQuestion = withText(translates)(
       <div className={styles.openQuestionWrapper} data-testid="openQuestionContainer">
         <legend className={styles.questionText} data-testid="openQuestionTitle" tabIndex={0} ref={quizQuestionRef}>
           <span className={styles.visuallyHidden}>{`${otherProps.questionLabel} #${questionIndex}:`}</span>
-          {question}
+          <div dangerouslySetInnerHTML={{__html: wrapLinksWithTags(question)}} />
         </legend>
         {hint && <QuestionAddons hint={hint} />}
         <div className={styles.textAreaWrapper}>

src/components/quiz-question/reflection-point/reflection-point.tsx

@@ -2,6 +2,7 @@ import {h} from 'preact';
 import {useEffect, useRef} from 'preact/hooks';
 import {QuestionProps, QuizTranslates} from '../../../types';
 import * as styles from './reflection-point.scss';
+import {wrapLinksWithTags} from '../../../utils';
 
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 
@@ -22,7 +23,7 @@ export const ReflectionPoint = withText(translates)(({question, questionIndex, .
     <div className={styles.reflectionPointWrapper}>
       <legend className={styles.reflectionText} data-testid="reflectionPointTitle" tabIndex={0} ref={quizQuestionRef}>
         <span className={styles.visuallyHidden}>{`${otherProps.questionLabel}# ${questionIndex}, ${otherProps.reflectionPoint}:`}</span>
-        {question}
+        <div dangerouslySetInnerHTML={{ __html: wrapLinksWithTags(question) }} />
       </legend>
     </div>
   );

src/components/quiz-question/true-false/true-false.tsx

@@ -4,7 +4,7 @@ import {QuestionProps, QuizTranslates} from '../../../types';
 import {QuestionAddons} from '../question-addons';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import * as styles from './true-false.scss';
-
+import {wrapLinksWithTags} from '../../../utils';
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 
 const translates = (): QuizTranslates => {
@@ -58,7 +58,7 @@ export const TrueFalse = withText(translates)(
       <div className={styles.trueFalseWrapper} data-testid="trueFalseContainer">
         <legend className={styles.questionText} data-testid="trueFalseQuestionTitle" tabIndex={0} ref={quizQuestionRef}>
           <span className={styles.visuallyHidden}>{`${otherProps.questionLabel} #${questionIndex}:`}</span>
-          {question}
+          <div dangerouslySetInnerHTML={{ __html: wrapLinksWithTags(question) }} />
         </legend>
         {hint && <QuestionAddons hint={hint} />}
         <div className={styles.optionalAnswersWrapper} role="listbox" data-testid="trueFalseAnswersContainer">

src/utils.ts

@@ -19,3 +19,36 @@ export const makeQuestionLabels = () =>
   Array.from(Array(26))
     .map((e, i) => i + 'A'.charCodeAt(0))
     .map(x => String.fromCharCode(x)); // ["A", "B", "C", ... , "Z"]
+
+
+/**
+ * Process the input text to wrap URLs in HTML anchor tags (<a>).
+ *
+ * This function performs two main tasks:
+ * 1. It converts patterns of the form `[title|url]` into clickable links with the provided title.
+ * 2. It wraps standalone URLs in clickable links.
+ *
+ * Example:
+ * - Input: "[my title | http://example.com]"
+ *   Output: "<a target='_blank' href='http://example.com'>my title</a>"
+ *
+ * - Input: "http://example.com"
+ *   Output: "<a target='_blank' href='http://example.com'>http://example.com</a>"
+ *
+ * @param text - The input string containing potential URLs or patterns to be converted.
+ * @returns The processed string with URLs wrapped in <a> tags.
+ */
+export const wrapLinksWithTags = (text: string): string => {
+  // Replace the pattern [title|url] with <a> tags
+  const wrapLinksWithTitle = text.replace(/\[(\s+)?([^\|\]]*)(\|)(\s+)?((https?|ftps?):\/\/[^\s\]]+)(\s+)?(\])/gi, (url: string): string => {
+    const linkInfo = url.slice(1, -1).split('|');
+    const title = linkInfo[0].trim();
+    const href = linkInfo[1].trim();
+    return `<a target="_blank" href="${href}">${title}</a>`;
+  });
+
+  // Replace standalone URLs with <a> tags
+  return wrapLinksWithTitle.replace(/((https?|ftps?):\/\/[^\s"<\]]+)(?![^<>]*>|[^"]*<\/a>)/gi, (url: string): string => {
+    return `<a target="_blank" href="${url}">${url}</a>`;
+  });
+};