@tinyweb_dev/oe-exam-sdk 0.2.7 → 0.2.9

package/dist/components/exams/take/components/QuestionRenderer.js

@@ -55,7 +55,7 @@ export function QuestionRenderer({ part, answers, onAnswerChange, isReviewMode =
         }
         case 'CHOOSE_THE_CORRECT_ANSWER_GROUP': {
             const data = transformChooseTheCorrectAnswerGroup(questions);
-            return (_jsx(MoversChooseBestAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, example: data.example, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
+            return (_jsx(MoversChooseBestAnswerRenderer, { partNumber: partNo, partName: part.name, questionCount: questionCount, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl || part.audioUrl, example: data.example, questions: getRenderQuestions(data.questions), answers: answers, onAnswerChange: onAnswerChange, isReviewMode: isReviewMode }));
         }
         case 'CHOOSE_CORRECT_ADJECTIVE': {
             const data = transformChooseCorrectAdjective(questions);

package/dist/components/exams/take/components/question-renderers/MoversChooseBestAnswerRenderer.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../../../shared/lib/utils';
 import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import { RichTextHtml } from '../../../../../components/shared/RichTextHtml';
 import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
@@ -42,14 +43,14 @@ function normalizeRenderableText(value) {
 }
 // Example Section Component
 function ExampleSection({ example }) {
-    return (_jsxs("div", { className: "rounded-lg border-2 border-orange-300 bg-white p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-gray-700", children: "Example:" }), _jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [example.questionNumber, ". ", normalizeRenderableText(example.questionText)] }), _jsx(ChooseBestAnswerImages, { imageUrl: example.imageUrl, className: "mb-3" }), example.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${example.options.length}, minmax(0, 1fr))` }, children: example.options.map((option) => {
+    return (_jsxs("div", { className: "rounded-lg border-2 border-orange-300 bg-white p-4", children: [_jsx("p", { className: "mb-3 text-sm font-semibold text-gray-700", children: "Example:" }), _jsxs("div", { className: "mb-3 flex items-start gap-1.5 text-[19px] font-bold text-[#001590]", children: [_jsxs("span", { children: [example.questionNumber, "."] }), _jsx(RichTextHtml, { html: normalizeRenderableText(example.questionText), className: "flex-1 font-bold text-[#001590]" })] }), example.audioUrl && (_jsx("div", { className: "mb-3", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: example.audioUrl, compact: true, dense: true }) })), _jsx(ChooseBestAnswerImages, { imageUrl: example.imageUrl, className: "mb-3" }), example.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${example.options.length}, minmax(0, 1fr))` }, children: example.options.map((option) => {
                     const isCorrect = option.id === example.correctOptionId;
                     return (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${isCorrect ? 'border-green-500 bg-green-50' : 'border-blue-200 bg-white'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "w-40 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", isCorrect
                                     ? "bg-green-500 border-green-500 text-white"
                                     : "border-gray-300 bg-white text-transparent"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) })] }, option.id));
                 }) })) : (_jsx("div", { className: "flex flex-col gap-2 pl-2", children: example.options.map((option) => {
                     const isCorrect = option.id === example.correctOptionId;
-                    return (_jsxs("div", { className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${isCorrect ? 'border-green-500 bg-green-50' : 'border-blue-200 bg-white'}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx("span", { className: "flex-1 text-sm text-gray-700", children: normalizeRenderableText(option.text) }), _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 rounded-full ${isCorrect ? 'border-green-500 bg-green-500' : 'border-gray-300 bg-white'}`, children: isCorrect && (_jsx("div", { className: "h-2 w-2 rounded-full bg-white" })) })] }, option.id));
+                    return (_jsxs("div", { className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${isCorrect ? 'border-green-500 bg-green-50' : 'border-blue-200 bg-white'}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx(RichTextHtml, { html: normalizeRenderableText(option.text), className: "flex-1 text-sm text-gray-700" }), _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 rounded-full ${isCorrect ? 'border-green-500 bg-green-500' : 'border-gray-300 bg-white'}`, children: isCorrect && (_jsx("div", { className: "h-2 w-2 rounded-full bg-white" })) })] }, option.id));
                 }) }))] }));
 }
 // Single Question Component
@@ -99,9 +100,9 @@ function QuestionItem({ question, selectedOptionIds, onSelect, isReviewMode, id,
         }
         return selectedOptionIds.includes(optionId) || correctOptionIds.includes(optionId);
     };
-    return (_jsxs("div", { id: id, className: "mb-6", children: [_jsxs("p", { className: "mb-3 text-[19px] font-bold text-[#001590]", children: [question.questionNumber, ". ", normalizeRenderableText(question.questionText)] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), question.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "w-35 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", showIndicatorMark(option.id)
+    return (_jsxs("div", { id: id, className: "mb-6", children: [_jsxs("div", { className: "mb-3 flex items-start gap-1.5 text-[19px] font-bold text-[#001590]", children: [_jsxs("span", { children: [question.questionNumber, "."] }), _jsx(RichTextHtml, { html: normalizeRenderableText(question.questionText), className: "flex-1 font-bold text-[#001590]" })] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), question.audioUrl && (_jsx("div", { className: "mb-3", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true, dense: true }) })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), question.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `relative flex flex-col items-center gap-1 rounded-[16px] border-[3px] p-4 pt-6 mt-3 transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsx("div", { className: "absolute -top-[14px] left-1/2 -translate-x-1/2 bg-blue-600 text-white w-[28px] h-[28px] rounded-full flex items-center justify-center font-bold text-[15px] shadow-sm", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "w-35 rounded object-contain mb-2" }), _jsx("div", { className: cn("w-7 h-7 rounded-full flex items-center justify-center border-[3px] transition-all mt-auto", showIndicatorMark(option.id)
                                 ? "bg-blue-600 border-blue-600 text-white"
-                                : "border-gray-300 bg-white text-transparent"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) })] }, option.id))) })) : (_jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx("span", { className: "flex-1 text-sm text-gray-700", children: normalizeRenderableText(option.text) }), _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 ${isMultipleAnswers ? 'rounded-md' : 'rounded-full'} ${getIndicatorStyle(option.id)}`, children: showIndicatorMark(option.id) && (_jsx("div", { className: `${isMultipleAnswers ? 'h-2.5 w-2.5 rounded-sm' : 'h-2 w-2 rounded-full'} bg-white` })) })] }, option.id))) }))] }));
+                                : "border-gray-300 bg-white text-transparent"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) })] }, option.id))) })) : (_jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => !isReviewMode && onSelect(option.id), disabled: isReviewMode, className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 text-left transition-colors ${getOptionStyle(option.id)} ${isReviewMode ? 'cursor-default' : 'cursor-pointer'}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx(RichTextHtml, { html: normalizeRenderableText(option.text), className: "flex-1 text-sm text-gray-700" }), _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 ${isMultipleAnswers ? 'rounded-md' : 'rounded-full'} ${getIndicatorStyle(option.id)}`, children: showIndicatorMark(option.id) && (_jsx("div", { className: `${isMultipleAnswers ? 'h-2.5 w-2.5 rounded-sm' : 'h-2 w-2 rounded-full'} bg-white` })) })] }, option.id))) }))] }));
 }
 // Article Card for ARTICLES groupType (e.g., GN QE RWL Part 2)
 function ArticleCard({ article, label, }) {

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -161,6 +161,7 @@ export declare function transformChooseTheCorrectAnswerGroup(questions: ApiQuest
     questions: ChooseBestAnswerQuestion[];
     example?: import('../types').ChooseBestAnswerExample;
     instruction: string;
+    audioUrl?: string;
 };
 export interface ChooseAdjectiveOption {
     id: string;

package/dist/components/exams/take/utils/question-transformers.js

@@ -411,12 +411,18 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
         }
         return urls.length === 1 ? urls[0] : urls;
     };
+    const toAudioUrl = (value) => {
+        const trimmed = typeof value === 'string' ? value.trim() : '';
+        return trimmed !== '' ? trimmed : undefined;
+    };
+    const groupAudioUrl = toAudioUrl(content?.meta?.audioUrl);
     let example;
     if (exampleItem) {
         const exampleIndex = items.indexOf(exampleItem);
         const exOptions = mapOptions(exampleItem.content?.options, `${parent.id}-ex`);
         const exCorrect = exampleItem.correctAnswer?.answer || parentCorrect[exampleIndex] || exOptions[0]?.id || '';
         const exampleImageUrl = toQuestionImageUrl(exampleItem.content?.imageUrl);
+        const exampleAudioUrl = toAudioUrl(exampleItem.content?.audioUrl);
         example = {
             questionNumber: exampleItem.questionNumber || exampleIndex + 1,
             questionText: exampleItem.content?.question || '',
@@ -424,6 +430,7 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
             correctOptionId: exCorrect,
             optionType: (exampleItem.content?.optionType || 'text'),
             ...(exampleImageUrl !== undefined ? { imageUrl: exampleImageUrl } : {}),
+            ...(exampleAudioUrl ? { audioUrl: exampleAudioUrl } : {}),
         };
     }
     const transformed = regularItems.map((item) => {
@@ -431,6 +438,7 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
         const options = mapOptions(item.content?.options, `${parent.id}-item-${itemIndex}`);
         const correctId = item.correctAnswer?.answer || parentCorrect[itemIndex] || '';
         const itemImageUrl = toQuestionImageUrl(item.content?.imageUrl);
+        const itemAudioUrl = toAudioUrl(item.content?.audioUrl);
         return {
             id: `${parent.id}-item-${itemIndex}`,
             questionNumber: item.questionNumber || itemIndex + 1,
@@ -440,12 +448,14 @@ export function transformChooseTheCorrectAnswerGroup(questions) {
             correctOptionIds: correctId ? [correctId] : [],
             optionType: (item.content?.optionType || 'text'),
             ...(itemImageUrl !== undefined ? { imageUrl: itemImageUrl } : {}),
+            ...(itemAudioUrl ? { audioUrl: itemAudioUrl } : {}),
         };
     });
     return {
         questions: transformed,
         example,
         instruction: content?.meta?.instruction || 'Choose the correct answer.',
+        ...(groupAudioUrl ? { audioUrl: groupAudioUrl } : {}),
     };
 }
 export function transformChooseCorrectAdjective(questions) {

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './CueCardEditor';
 export * from './shared/RichTextEditor';
+export * from './shared/RichTextHtml';
 export * from './exams';
 export * from './themes';
 export * from './results';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export * from './CueCardEditor';
 export * from './shared/RichTextEditor';
+export * from './shared/RichTextHtml';
 export * from './exams';
 export * from './themes';
 export * from './results';

package/dist/components/questions/_shared/types/choose-the-correct-answer-group.type.d.ts

@@ -18,10 +18,12 @@ export interface ChooseTheCorrectAnswerGroupItemData {
     points: number;
     questionNumber: number;
     imageUrl?: ChooseTheCorrectAnswerGroupImageUrl;
+    audioUrl?: string;
 }
 export interface ChooseTheCorrectAnswerGroupData {
     instruction: string;
     passage?: string;
+    audioUrl?: string;
     items: ChooseTheCorrectAnswerGroupItemData[];
     explanation?: string;
     points?: number;

package/dist/components/questions/types/choose-the-correct-answer/ChooseTheCorrectAnswerClient.js

@@ -4,6 +4,8 @@ import { useState, useEffect, useMemo } from 'react';
 import { Check, X, CircleHelp, Lightbulb, ClipboardList, Users, BookOpen } from 'lucide-react';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { cn } from '../../../../shared/lib/utils';
+import { RichTextHtml } from '../../../../components/shared/RichTextHtml';
+import { isRichTextEmpty, richTextToPlainText } from '../../../../shared/lib/rich-text';
 import { normalizeChooseAnswerCorrectAnswer, normalizeChooseAnswerOptions, optionToString } from './normalize';
 // Helper component to resolve presigned URL for each image option
 function OptionImage({ src, alt, className }) {
@@ -82,7 +84,7 @@ export function ChooseTheCorrectAnswerClient({ questionData, onSubmit, isReviewM
             const optText = optionToString(opt);
             return questionData.optionType === 'image'
                 ? `Đáp án ${answerLetter}`
-                : `${answerLetter}. ${optText}`;
+                : `${answerLetter}. ${richTextToPlainText(optText)}`;
         }).join(', ');
     };
     // Visibility toggles based on questionConfig (from template)
@@ -109,7 +111,7 @@ export function ChooseTheCorrectAnswerClient({ questionData, onSubmit, isReviewM
                                                 .split('\n')
                                                 .map((line) => `<p class="last:mb-0">${line}</p>`)
                                                 .join(''),
-                                        } })), questionData.groupImageUrl && (_jsxs("div", { className: "mt-5 relative overflow-hidden rounded-xl border border-slate-200/60 bg-slate-50 shadow-sm transition-all hover:shadow-md", children: [_jsx("div", { className: "flex items-center justify-between border-b border-slate-200/60 bg-slate-100/50 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("span", { className: "ml-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: "T\u00E0i li\u1EC7u \u0111\u00EDnh k\u00E8m" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4 min-h-[160px]", children: _jsx(OptionImage, { src: questionData.groupImageUrl, alt: "Group illustration", className: "max-h-64 w-auto rounded-lg object-contain" }) })] }))] }))] })] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xs", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3.5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-xs", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: isMultipleAnswers ? 'Câu hỏi nhiều đáp án' : 'Chọn đáp án đúng' })] }), questionData.points !== undefined && (_jsx("div", { className: "flex items-center gap-1.5 rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: _jsxs("span", { children: [questionData.points, " \u0111i\u1EC3m"] }) }))] }), _jsxs("div", { className: "p-5 space-y-4", children: [(questionData.askerName || questionData.answererName) && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-gray-50 p-2.5 text-xs text-gray-600", children: [_jsx(Users, { className: "h-4 w-4 text-gray-400" }), questionData.askerName && (_jsxs("span", { children: [_jsx("strong", { children: "Ng\u01B0\u1EDDi h\u1ECFi:" }), " ", questionData.askerName] })), questionData.askerName && questionData.answererName && _jsx("span", { children: "\u2022" }), questionData.answererName && (_jsxs("span", { children: [_jsx("strong", { children: "Ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi:" }), " ", questionData.answererName] }))] })), showQuestion && (_jsx("div", { className: "rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-100", children: _jsx("h3", { className: "text-base font-semibold text-gray-800 leading-relaxed", children: questionData.question || 'Câu hỏi chưa được nhập' }) })), showImage && (imagePreviewUrl || cleanImageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })) : (
+                                        } })), questionData.groupImageUrl && (_jsxs("div", { className: "mt-5 relative overflow-hidden rounded-xl border border-slate-200/60 bg-slate-50 shadow-sm transition-all hover:shadow-md", children: [_jsx("div", { className: "flex items-center justify-between border-b border-slate-200/60 bg-slate-100/50 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-slate-300" }), _jsx("span", { className: "ml-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: "T\u00E0i li\u1EC7u \u0111\u00EDnh k\u00E8m" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4 min-h-[160px]", children: _jsx(OptionImage, { src: questionData.groupImageUrl, alt: "Group illustration", className: "max-h-64 w-auto rounded-lg object-contain" }) })] }))] }))] })] })), _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xs", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3.5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-xs", children: _jsx(CircleHelp, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: isMultipleAnswers ? 'Câu hỏi nhiều đáp án' : 'Chọn đáp án đúng' })] }), questionData.points !== undefined && (_jsx("div", { className: "flex items-center gap-1.5 rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700", children: _jsxs("span", { children: [questionData.points, " \u0111i\u1EC3m"] }) }))] }), _jsxs("div", { className: "p-5 space-y-4", children: [(questionData.askerName || questionData.answererName) && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-gray-50 p-2.5 text-xs text-gray-600", children: [_jsx(Users, { className: "h-4 w-4 text-gray-400" }), questionData.askerName && (_jsxs("span", { children: [_jsx("strong", { children: "Ng\u01B0\u1EDDi h\u1ECFi:" }), " ", questionData.askerName] })), questionData.askerName && questionData.answererName && _jsx("span", { children: "\u2022" }), questionData.answererName && (_jsxs("span", { children: [_jsx("strong", { children: "Ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi:" }), " ", questionData.answererName] }))] })), showQuestion && (_jsx("div", { className: "rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 p-4 border border-blue-100", children: isRichTextEmpty(questionData.question) ? (_jsx("h3", { className: "text-base font-semibold text-gray-800 leading-relaxed", children: "C\u00E2u h\u1ECFi ch\u01B0a \u0111\u01B0\u1EE3c nh\u1EADp" })) : (_jsx(RichTextHtml, { html: questionData.question, className: "text-base font-semibold text-gray-800 leading-relaxed" })) })), showImage && (imagePreviewUrl || cleanImageUrl) && (_jsxs("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gradient-to-br from-slate-50 to-gray-100", children: [_jsx("div", { className: "border-b border-gray-100 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-400" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-400" }), _jsx("span", { className: "ml-2 text-xs font-medium text-gray-500", children: "H\u00ECnh \u1EA3nh" })] }) }), _jsx("div", { className: "flex items-center justify-center p-4", children: isLoading ? (_jsx("div", { className: "flex h-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" }) })) : (
                                         /* eslint-disable-next-line @next/next/no-img-element */
                                         _jsx("img", { src: imagePreviewUrl || cleanImageUrl, alt: "Question illustration", className: "max-h-56 w-auto object-contain rounded-md", onError: (e) => {
                                                 const target = e.target;
@@ -136,11 +138,11 @@ export function ChooseTheCorrectAnswerClient({ questionData, onSubmit, isReviewM
                                                                 : 'bg-gray-200 text-gray-600'
                                                         : isSelected
                                                             ? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm'
-                                                            : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'), children: letter }), questionData.optionType === 'image' ? (_jsx("div", { className: "flex-1 flex items-center justify-center py-1", children: _jsx(OptionImage, { src: optionText, alt: `Đáp án ${letter}` }) })) : (_jsx("span", { className: cn('flex-1 text-sm font-medium', isReviewMode && isCorrectAnswer
+                                                            : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'), children: letter }), questionData.optionType === 'image' ? (_jsx("div", { className: "flex-1 flex items-center justify-center py-1", children: _jsx(OptionImage, { src: optionText, alt: `Đáp án ${letter}` }) })) : (_jsx(RichTextHtml, { html: optionText, className: cn('flex-1 text-sm font-medium', isReviewMode && isCorrectAnswer
                                                         ? 'text-green-800'
                                                         : isReviewMode && isSelected && !isCorrectAnswer
                                                             ? 'text-red-800'
-                                                            : 'text-gray-700'), children: optionText })), isReviewMode && (isCorrectAnswer || isSelected) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', isCorrectAnswer ? 'bg-green-500' : 'bg-red-500'), children: isCorrectAnswer
+                                                            : 'text-gray-700') })), isReviewMode && (isCorrectAnswer || isSelected) && (_jsx("div", { className: cn('flex h-6 w-6 items-center justify-center rounded-full', isCorrectAnswer ? 'bg-green-500' : 'bg-red-500'), children: isCorrectAnswer
                                                         ? _jsx(Check, { className: "h-4 w-4 text-white" })
                                                         : _jsx(X, { className: "h-4 w-4 text-white" }) }))] }, index));
                                     })] })), !isReviewMode && !hasAnswered && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-3 flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-amber-400 text-white", children: _jsx("span", { className: "text-xs font-bold", children: "!" }) }), _jsx("span", { className: "text-sm text-amber-800", children: isMultipleAnswers ? 'Vui lòng chọn ít nhất một đáp án' : 'Vui lòng chọn một đáp án' })] }))] })] }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-blue-100 bg-white/50 px-4 py-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm", children: _jsx(Lightbulb, { className: "h-4 w-4" }) }), _jsx("h4", { className: "text-sm font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" })] }), _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-sm text-gray-700 leading-relaxed", children: questionData.explanation }) })] })), isReviewMode && (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-3", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-slate-500 to-gray-600 text-white shadow-sm", children: _jsx(ClipboardList, { className: "h-4 w-4" }) }), _jsx("h4", { className: "text-sm font-semibold text-gray-800", children: "T\u1ED5ng k\u1EBFt" })] }), _jsxs("div", { className: "p-4 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg bg-gray-50 p-3", children: [_jsx("span", { className: "text-sm text-gray-600", children: "\u0110\u00E1p \u00E1n c\u1EE7a b\u1EA1n:" }), _jsx("span", { className: cn('text-sm font-semibold', isAnswerCorrect ? 'text-green-600' : hasAnswered ? 'text-red-600' : 'text-gray-500'), children: formatAnswerLabel(selectedAnswer) })] }), _jsxs("div", { className: "flex items-center justify-between rounded-lg bg-green-50 p-3 border border-green-100", children: [_jsx("span", { className: "text-sm text-gray-600", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng:" }), _jsx("span", { className: "text-sm font-semibold text-green-600", children: formatAnswerLabel(normalizedCorrectAnswers) })] }), _jsxs("div", { className: cn('flex items-center justify-between rounded-lg p-3 border', isAnswerCorrect

package/dist/components/questions/types/choose-the-correct-answer/ChooseTheCorrectAnswerCreator.js

@@ -14,6 +14,8 @@ import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/li
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
 import { Pencil, Eye, Plus, Trash2, HelpCircle, CheckCircle2, Lightbulb, MessageSquare, ImageIcon, Type, Users, BookOpen, Star, ListChecks } from 'lucide-react';
 import { FileUpload } from '../../../../components/ui/file-upload';
+import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
+import { isRichTextEmpty } from '../../../../shared/lib/rich-text';
 import { ChooseTheCorrectAnswerClient } from './ChooseTheCorrectAnswerClient';
 import { normalizeChooseAnswerCorrectAnswer, normalizeChooseAnswerOptions, pickRawChooseAnswer, } from './normalize';
 import { chooseCorrectAnswerFormSchema, } from '../../../../shared/lib/validation/choose-correct-answer.validation';
@@ -410,7 +412,9 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                             : undefined })] }));
     }
     // Creator UI
-    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'ARTICLES' && (_jsx(ArticlesGroupCard, { groupNumber: currentGroupNumber, articleCount: articleCount, articles: articles, onArticlesChange: setArticles, title: groupTitle, onTitleChange: setGroupTitle, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'articles'}` })), isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(HelpCircle, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "text-xs text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi tr\u1EAFc nghi\u1EC7m v\u1EDBi nhi\u1EC1u l\u1EF1a ch\u1ECDn" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: watchedOptions.filter((o) => typeof o === 'string' && o.trim()).length < 2, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-y-2", children: [_jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, onClick: () => form.setValue('isExample', !watchedIsExample), className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${watchedIsExample
+    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'ARTICLES' && (_jsx(ArticlesGroupCard, { groupNumber: currentGroupNumber, articleCount: articleCount, articles: articles, onArticlesChange: setArticles, title: groupTitle, onTitleChange: setGroupTitle, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'articles'}` })), isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `choose-correct-answer-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(HelpCircle, { className: "h-4 w-4 text-gray-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }), _jsx("p", { className: "text-xs text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi tr\u1EAFc nghi\u1EC7m v\u1EDBi nhi\u1EC1u l\u1EF1a ch\u1ECDn" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerExtra, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: watchedOptions.filter((o) => watchedOptionType === 'image'
+                                                ? typeof o === 'string' && o.trim()
+                                                : !isRichTextEmpty(o)).length < 2, className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] })] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-y-2", children: [_jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, onClick: () => form.setValue('isExample', !watchedIsExample), className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${watchedIsExample
                                                     ? 'border-amber-300 bg-amber-50 text-amber-700'
                                                     : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Star, { className: `h-4 w-4 ${watchedIsExample ? 'fill-amber-400 text-amber-400' : ''}` }), "Example"] }), _jsxs("button", { type: "button", style: { paddingBlock: 'calc(var(--spacing) * 1)' }, disabled: Boolean(multipleAnswers), onClick: () => {
                                                     const enabled = !watchedMultipleAnswers;
@@ -422,7 +426,7 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                                                     form.setValue('correctAnswer', enabled ? normalized : (normalized[0] ?? -1), { shouldValidate: true });
                                                 }, className: `inline-flex items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${watchedMultipleAnswers
                                                     ? 'border-violet-300 bg-violet-50 text-violet-700'
-                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${Boolean(multipleAnswers) ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(ListChecks, { className: "h-4 w-4" }), "Nhi\u1EC1u \u0111\u00E1p \u00E1n"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Textarea, { id: "question", ...form.register('question'), placeholder: "Nh\u1EADp c\u00E2u h\u1ECFi...", className: `min-h-[100px] border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('question') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}`, rows: 3 }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => {
+                                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${Boolean(multipleAnswers) ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(ListChecks, { className: "h-4 w-4" }), "Nhi\u1EC1u \u0111\u00E1p \u00E1n"] })] })] }), viewMode === 'CONVERSATION' && (_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Users, { className: "h-4 w-4 text-indigo-500" }), "H\u1ED9i tho\u1EA1i ", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn - d\u00F9ng cho c\u00E2u h\u1ECFi d\u1EA1ng h\u1ED9i tho\u1EA1i)" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "askerName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi h\u1ECFi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "askerName", ...form.register('askerName'), placeholder: "VD: John, Mary, Teacher...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('askerName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('askerName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('askerName') }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: "answererName", className: "flex items-center gap-1 text-sm font-medium text-gray-600", children: ["T\u00EAn ng\u01B0\u1EDDi tr\u1EA3 l\u1EDDi ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "answererName", ...form.register('answererName'), placeholder: "VD: Tom, Anna, Student...", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${form.hasError('answererName') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('answererName') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('answererName') }))] })] })] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('question')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "question", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), _jsx("span", { className: "flex items-center gap-1", children: "C\u00E2u h\u1ECFi" }), _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(RichTextEditor, { value: watchedQuestion, onChange: (html) => form.setValue('question', html, { shouldValidate: true }), variant: "compact", minHeightClassName: "min-h-[100px]" }), form.hasError('question') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('question') }))] })), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('imageUrl') || questionConfig.includes('imageUrl ')) && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh ", _jsx("span", { className: "text-sm font-normal text-gray-500" })] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => {
                                             form.setValue('imageUrl', url, { shouldValidate: true });
                                         }, onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), form.hasError('imageUrl') && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: form.getFieldError('imageUrl') })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] })), form.formState.errors.options?.message && (_jsx("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4", children: _jsx("p", { className: "text-sm text-red-600", children: form.formState.errors.options.message }) }))] })] }), (!questionConfig || questionConfig.length === 0 || questionConfig.includes('options')) && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-indigo-100", children: _jsx(Lightbulb, { className: "h-3.5 w-3.5 text-indigo-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["C\u00E1c l\u1EF1a ch\u1ECDn ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", watchedOptions.length, " \u0111\u00E1p \u00E1n)"] })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5", children: [_jsx(Type, { className: `h-3.5 w-3.5 ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}` }), _jsx("span", { className: `text-xs font-medium ${watchedOptionType === 'text' ? 'text-indigo-600' : 'text-gray-400'}`, children: "Text" }), _jsx(Switch, { checked: watchedOptionType === 'image', disabled: true, className: watchedOptionType === 'image' ? '!bg-indigo-600 !opacity-100' : '!bg-indigo-600 !opacity-100', onCheckedChange: (checked) => {
                                                         const newType = checked ? 'image' : 'text';
@@ -488,7 +492,11 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                                                                         setOptionPreviewUrls((prev) => ({ ...prev, [index]: presignedUrl }));
                                                                     }, maxSize: 5, placeholder: `Upload ảnh đáp án ${optionLetter}...`, autoUpload: true, prefix: "questions/options" }), (optionPreviewUrls[index] || option) && (_jsx(OptionImagePreview, { src: optionPreviewUrls[index] || option, alt: `Đáp án ${optionLetter}` }))] })) : (
                                                         /* Text Input Mode */
-                                                        _jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), watchedMultipleAnswers ? 'Đáp án đúng đã chọn' : 'Đáp án đúng'] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                                        _jsx(RichTextEditor, { value: option, onChange: (html) => {
+                                                                const newOptions = [...watchedOptions];
+                                                                newOptions[index] = html;
+                                                                form.setValue('options', newOptions, { shouldValidate: true });
+                                                            }, variant: "compact", minHeightClassName: "min-h-[72px]" })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), watchedMultipleAnswers ? 'Đáp án đúng đã chọn' : 'Đáp án đúng'] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
                                                                 if (watchedMultipleAnswers) {
                                                                     const currentAnswers = Array.isArray(form.getValues('correctAnswer'))
                                                                         ? form.getValues('correctAnswer')
@@ -543,7 +551,11 @@ function ChooseTheCorrectAnswerCreatorContent({ initialData, onSave, onCancel, o
                                                                         setOptionPreviewUrls((prev) => ({ ...prev, [index]: presignedUrl }));
                                                                     }, maxSize: 5, placeholder: `Upload ảnh đáp án ${optionLetter}...`, autoUpload: true, prefix: "questions/options" }), (optionPreviewUrls[index] || option) && (_jsx(OptionImagePreview, { src: optionPreviewUrls[index] || option, alt: `Đáp án ${optionLetter}` }))] })) : (
                                                         /* Text Input Mode */
-                                                        _jsx(Input, { id: `option-input-${index}`, ...form.register(`options.${index}`), placeholder: `Nhập đáp án ${optionLetter}...`, className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${optionError ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                                                        _jsx(RichTextEditor, { value: option, onChange: (html) => {
+                                                                const newOptions = [...watchedOptions];
+                                                                newOptions[index] = html;
+                                                                form.setValue('options', newOptions, { shouldValidate: true });
+                                                            }, variant: "compact", minHeightClassName: "min-h-[72px]" })), optionError && (_jsx("p", { className: "text-sm text-red-600", children: optionError.message })), isCorrect && (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), "\u0110\u00E1p \u00E1n \u0111\u00FAng"] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
                                                                 form.setValue('correctAnswer', index, { shouldValidate: true });
                                                             }, className: isCorrect ? 'text-green-600 hover:text-green-700' : 'text-gray-400 hover:text-green-600', title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: _jsx(CheckCircle2, { className: "h-4 w-4" }) }), watchedOptions.length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
                                                                 const currentOptions = form.getValues('options');

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupClient.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BookOpen, Check, CircleHelp, Lightbulb, Star } from 'lucide-react';
+import { BookOpen, Check, CircleHelp, Lightbulb, Star, Volume2 } from 'lucide-react';
 import { cn } from '../../../../shared/lib/utils';
 import { usePresignedFileUrl } from '../../../../shared/lib/hooks';
 import { getChooseAnswerGroupOptionImageSrc, toChooseAnswerGroupImageUrls, } from '../../_shared/types/choose-the-correct-answer-group.type';
@@ -13,6 +13,15 @@ function ClientImageItem({ url, alt }) {
     }
     return (_jsx("div", { className: "max-w-sm overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: isLoading ? (_jsx("div", { className: "flex h-36 w-48 items-center justify-center", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: src, alt: alt || 'Image', className: "max-h-56 w-auto object-contain p-2" })) }));
 }
+function ClientAudio({ url }) {
+    const { previewUrl, isLoading } = usePresignedFileUrl(url);
+    const src = previewUrl ||
+        (typeof url === 'string' && (url.startsWith('http') || url.startsWith('blob:')) ? url : '');
+    if (!src && !isLoading) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-xl border border-indigo-100 bg-indigo-50/70 px-4 py-3", children: [_jsx(Volume2, { className: "h-4 w-4 shrink-0 text-indigo-600" }), isLoading ? (_jsx("div", { className: "h-8 flex-1 animate-pulse rounded-md bg-indigo-100" })) : (_jsx("audio", { controls: true, className: "h-9 w-full", src: src, preload: "metadata", children: "Tr\u00ECnh duy\u1EC7t kh\u00F4ng h\u1ED7 tr\u1EE3 audio." }))] }));
+}
 const OPTION_LABELS = ['A', 'B', 'C', 'D', 'E', 'F'];
 export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode = false, userAnswers = [], onAnswerChange, }) {
     const items = questionData.items || [];
@@ -25,10 +34,10 @@ export function ChooseTheCorrectAnswerGroupClient({ questionData, isReviewMode =
         next[itemIndex] = optionId;
         onAnswerChange(next);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
+    return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), questionData.audioUrl && _jsx(ClientAudio, { url: questionData.audioUrl }), questionData.passage && (_jsxs("div", { className: "rounded-xl border border-gray-200 bg-white p-5 shadow-xs", children: [_jsxs("div", { className: "mb-2.5 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-indigo-700", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "B\u00E0i \u0111\u1ECDc (Reading Passage)" })] }), _jsx("div", { className: "prose prose-sm max-w-none text-gray-800 leading-relaxed", dangerouslySetInnerHTML: { __html: questionData.passage } })] })), items.map((item, itemIndex) => {
                 const selectedId = userAnswers[itemIndex];
                 const canSelect = !isReviewMode && !item.isExample && Boolean(onAnswerChange);
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), item.audioUrl && _jsx(ClientAudio, { url: item.audioUrl }), toChooseAnswerGroupImageUrls(item.imageUrl).length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: toChooseAnswerGroupImageUrls(item.imageUrl).map((url, imageIndex) => (_jsx(ClientImageItem, { url: url, alt: `Hình ảnh câu ${item.questionNumber || itemIndex + 1} (${imageIndex + 1})` }, `${item.questionNumber}-${imageIndex}`))) })), item.optionType === 'image' ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: item.options.map((option, optionIndex) => {
                                         const isCorrect = option.id === item.correctAnswer;
                                         const isSelected = option.id === selectedId;
                                         const optionImageSrc = getChooseAnswerGroupOptionImageSrc(option);

package/dist/components/questions/types/choose-the-correct-answer-group/ChooseTheCorrectAnswerGroupCreator.js

@@ -8,6 +8,7 @@ import { Textarea } from '../../../../components/ui/textarea';
 import { PointsInput } from '../../../../components/ui/points-input';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
 import { Switch } from '../../../../components/ui/switch';
+import { FileUpload } from '../../../../components/ui/file-upload';
 import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { Eye, ImageIcon, Pencil, Plus, Star, Trash2, Type } from 'lucide-react';
@@ -51,6 +52,7 @@ function normalizeItems(rawItems) {
             points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
             questionNumber: item.questionNumber || index + 1,
             ...(imageUrl !== undefined ? { imageUrl } : {}),
+            ...(item.audioUrl ? { audioUrl: item.audioUrl } : {}),
         };
     });
 }
@@ -67,6 +69,7 @@ function parsePointsValue(raw, allowZero) {
 export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
     const [instruction, setInstruction] = useState(initialData?.instruction || 'Choose the correct answer.');
     const [passage, setPassage] = useState(initialData?.passage || '');
+    const [audioUrl, setAudioUrl] = useState(initialData?.audioUrl || '');
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
@@ -77,9 +80,10 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         onChangeRef.current = onChange;
     }, [onChange]);
     const isContentEmpty = (html) => !html || html === '<p></p>' || html === '<p><br></p>' || html.trim() === '';
-    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation) => ({
+    const buildPayload = (nextInstruction = instruction, nextPassage = passage, nextItems = items, nextExplanation = explanation, nextAudioUrl = audioUrl) => ({
         instruction: nextInstruction,
         ...(!isContentEmpty(nextPassage) ? { passage: nextPassage.trim() } : {}),
+        ...(nextAudioUrl.trim() ? { audioUrl: nextAudioUrl.trim() } : {}),
         items: nextItems,
         explanation: nextExplanation,
         points: sumPoints(nextItems),
@@ -96,7 +100,7 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         previousPayloadRef.current = serialized;
         onUnsavedChangesChange?.(true);
         debouncedOnChange(payload);
-    }, [instruction, passage, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [instruction, passage, audioUrl, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim()) {
@@ -161,10 +165,10 @@ export function ChooseTheCorrectAnswerGroupCreator({ initialData, onChange, exte
         return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Ch\u1EC9nh s\u1EEDa"] }) }), _jsx(ChooseTheCorrectAnswerGroupClient, { questionData: buildPayload(), isReviewMode: true })] }));
     }
     const allErrors = [...errors, ...(externalErrors || [])];
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(true), children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nh\u00F3m ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: "Choose the correct answer." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage - Tu\u1EF3 ch\u1ECDn)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsx(PointsInput, { value: sumPoints(items), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "T\u1ED5ng \u0111i\u1EC3m \u0111\u01B0\u1EE3c c\u1ED9ng t\u1EEB c\u00E1c c\u00E2u kh\u00F4ng ph\u1EA3i example." })] })] })] }), items.map((item, itemIndex) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["C\u00E2u ", itemIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-amber-800", children: [_jsx(Star, { className: "h-4 w-4" }), "C\u00E2u v\u00ED d\u1EE5"] }), _jsx(Switch, { checked: item.isExample === true, onCheckedChange: (checked) => updateItem(itemIndex, {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", onClick: () => setIsClientMode(true), children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Nh\u00F3m ch\u1ECDn \u0111\u00E1p \u00E1n \u0111\u00FAng" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "group-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: "Choose the correct answer." })] }), _jsx("div", { className: "space-y-2", children: _jsx(FileUpload, { id: "choose-answer-group-audio", label: "Audio chung (tu\u1EF3 ch\u1ECDn)", accept: "audio/*", value: audioUrl, onChange: setAudioUrl, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage - Tu\u1EF3 ch\u1ECDn)" }), _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" })] }), _jsxs("div", { className: "rounded-xl border border-gray-200 bg-gray-50 p-4", children: [_jsx(PointsInput, { value: sumPoints(items), allowZero: true, readOnly: true }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "T\u1ED5ng \u0111i\u1EC3m \u0111\u01B0\u1EE3c c\u1ED9ng t\u1EEB c\u00E1c c\u00E2u kh\u00F4ng ph\u1EA3i example." })] })] })] }), items.map((item, itemIndex) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsxs(CardTitle, { className: "text-base", children: ["C\u00E2u ", itemIndex + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeItem(itemIndex), disabled: items.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-amber-100 bg-amber-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-amber-800", children: [_jsx(Star, { className: "h-4 w-4" }), "C\u00E2u v\u00ED d\u1EE5"] }), _jsx(Switch, { checked: item.isExample === true, onCheckedChange: (checked) => updateItem(itemIndex, {
                                             isExample: checked,
                                             points: checked ? 0 : (item.points || 1),
-                                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "A place for someone to stay or live is called" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh (tu\u1EF3 ch\u1ECDn)"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                                        }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "C\u00E2u h\u1ECFi" }), _jsx(Textarea, { value: item.question, onChange: (event) => updateItem(itemIndex, { question: event.target.value }), rows: 2, placeholder: "A place for someone to stay or live is called" })] }), _jsx("div", { className: "space-y-2", children: _jsx(FileUpload, { id: `choose-answer-item-audio-${itemIndex}`, label: "Audio c\u00E2u h\u1ECFi (tu\u1EF3 ch\u1ECDn)", accept: "audio/*", value: item.audioUrl || '', onChange: (url) => updateItem(itemIndex, { audioUrl: url }), maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, prefix: "questions", showPlayButton: true }) }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh (tu\u1EF3 ch\u1ECDn)"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
                                                     const nextUrls = [...toEditableChooseAnswerGroupImageUrls(item.imageUrl), ''];
                                                     updateItem(itemIndex, { imageUrl: nextUrls });
                                                 }, className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm h\u00ECnh \u1EA3nh"] })] }), toEditableChooseAnswerGroupImageUrls(item.imageUrl).length === 0 ? (_jsx("div", { className: "rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh. Nh\u1EA5n \"Th\u00EAm h\u00ECnh \u1EA3nh\" \u0111\u1EC3 upload \u1EA3nh minh ho\u1EA1 cho c\u00E2u h\u1ECFi." })) : (_jsx("div", { className: "space-y-3", children: toEditableChooseAnswerGroupImageUrls(item.imageUrl).map((imageUrl, imageIndex) => (_jsx(ChooseAnswerGroupImageUploadItem, { index: imageIndex, itemIndex: itemIndex, imageUrl: imageUrl, onChange: (url) => {

package/dist/components/questions/types/choose-the-correct-answer-group/map-choose-the-correct-answer-group-data.js

@@ -8,6 +8,13 @@ function asRecord(value) {
 function asString(value, fallback = '') {
     return typeof value === 'string' ? value : fallback;
 }
+function asOptionalUrl(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    return trimmed !== '' ? trimmed : undefined;
+}
 export function createEmptyChooseAnswerGroupItem(questionNumber) {
     return {
         question: '',
@@ -51,6 +58,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
         ];
     const isExample = record.isExample === true;
     const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(content.imageUrl));
+    const audioUrl = asOptionalUrl(content.audioUrl);
     return {
         question: asString(content.question) || asString(record.question),
         optionType: asString(content.optionType) === 'image' ? 'image' : 'text',
@@ -60,6 +68,7 @@ export function mapChooseAnswerGroupItem(item, index, fallbackAnswer) {
         points: isExample ? 0 : typeof record.points === 'number' ? record.points : 1,
         questionNumber: typeof record.questionNumber === 'number' ? record.questionNumber : index + 1,
         ...(imageUrl !== undefined ? { imageUrl } : {}),
+        ...(audioUrl ? { audioUrl } : {}),
     };
 }
 export function mapQuestionToChooseAnswerGroupData(question) {
@@ -73,18 +82,22 @@ export function mapQuestionToChooseAnswerGroupData(question) {
         : [];
     if (Array.isArray(content.items)) {
         const items = content.items.map((item, index) => mapChooseAnswerGroupItem(item, index, fallbackAnswers[index]));
+        const audioUrl = asOptionalUrl(asRecord(content.meta).audioUrl);
         return {
             instruction: asString(asRecord(content.meta).instruction) || 'Choose the correct answer.',
             passage: asString(asRecord(content.meta).passage),
+            ...(audioUrl ? { audioUrl } : {}),
             items,
             explanation,
             points: items.reduce((total, item) => (item.isExample ? total : total + (item.points || 0)), 0),
         };
     }
     if (Array.isArray(answer.items)) {
+        const audioUrl = asOptionalUrl(answer.audioUrl);
         return {
             instruction: asString(answer.instruction, 'Choose the correct answer.'),
             passage: asString(answer.passage),
+            ...(audioUrl ? { audioUrl } : {}),
             items: answer.items.map((item, index) => mapChooseAnswerGroupItem(item, index, fallbackAnswers[index])),
             explanation,
             points: typeof answer.points === 'number' ? answer.points : undefined,

package/dist/components/questions/types/choose-the-correct-answer-group/transform.js

@@ -26,6 +26,7 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
         }));
         const correctAnswer = item.correctAnswer || options[0]?.id || 'opt-1';
         const imageUrl = fromChooseAnswerGroupImageUrls(toChooseAnswerGroupImageUrls(item.imageUrl));
+        const audioUrl = typeof item.audioUrl === 'string' ? item.audioUrl.trim() : '';
         return {
             questionType: CHILD_QUESTION_TYPE,
             ...(item.isExample ? { isExample: true } : {}),
@@ -34,6 +35,7 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
                 options,
                 optionType: item.optionType || 'text',
                 ...(imageUrl !== undefined ? { imageUrl } : {}),
+                ...(audioUrl ? { audioUrl } : {}),
             },
             correctAnswer: { answer: correctAnswer },
             points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
@@ -46,6 +48,9 @@ export const transformChooseTheCorrectAnswerGroup = (question) => {
     if (answerData?.passage && answerData.passage.trim()) {
         meta.passage = answerData.passage.trim();
     }
+    if (answerData?.audioUrl && answerData.audioUrl.trim()) {
+        meta.audioUrl = answerData.audioUrl.trim();
+    }
     return {
         apiContent: {
             meta,

package/dist/components/results/renderers/ReviewChooseBestAnswerRenderer.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, X } from 'lucide-react';
 import { ResolvedImage } from '../../../components/common/ResolvedImage';
+import { RichTextHtml } from '../../../components/shared/RichTextHtml';
 import CambridgeYlePartBanner from '../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
 import CambridgeYleInstructionBanner from '../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
 import CambridgeYleAudioPlayer from '../../../components/themes/cambridge-yle/CambridgeYleAudioPlayer';
@@ -43,9 +44,9 @@ function ReviewQuestionItem({ question, selectedOptionIds, isCorrect, correctOpt
         }
         return _jsx("div", { className: `flex h-5 w-5 items-center justify-center border-2 border-gray-300 bg-white ${shapeClass}` });
     };
-    return (_jsxs("div", { className: "mb-4", children: [_jsxs("p", { className: "mb-2 text-lg font-bold text-gray-900", children: [question.questionNumber, ". ", question.questionText] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), isImageOptions ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-lg border-2 p-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "h-28 w-28 rounded object-contain" }), renderIndicator(option.id)] }, option.id))) })) : (
+    return (_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "mb-2 flex items-start gap-1.5 text-lg font-bold text-gray-900", children: [_jsxs("span", { children: [question.questionNumber, "."] }), _jsx(RichTextHtml, { html: question.questionText, className: "flex-1 font-bold text-gray-900" })] }), isMultipleAnswers && (_jsx("p", { className: "mb-3 pl-2 text-sm font-medium text-blue-600", children: "Ch\u1ECDn nhi\u1EC1u \u0111\u00E1p \u00E1n" })), question.audioUrl && (_jsx("div", { className: "mb-3", children: _jsx(CambridgeYleAudioPlayer, { audioSrc: question.audioUrl, compact: true }) })), _jsx(ChooseBestAnswerImages, { imageUrl: question.imageUrl, className: "mb-3" }), isImageOptions ? (_jsx("div", { className: "grid gap-3 px-2", style: { gridTemplateColumns: `repeat(${question.options.length}, minmax(0, 1fr))` }, children: question.options.map((option) => (_jsxs("div", { className: `relative flex flex-col items-center gap-1 rounded-lg border-2 p-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: option.label }), _jsx(ResolvedImage, { src: getChooseBestAnswerOptionImageSrc(option), alt: `Option ${option.label}`, className: "h-28 w-28 rounded object-contain" }), renderIndicator(option.id)] }, option.id))) })) : (
             /* Options — text variant */
-            _jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("div", { className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx("span", { className: "flex-1 text-sm text-gray-700", children: option.text }), renderIndicator(option.id)] }, option.id))) }))] }));
+            _jsx("div", { className: "flex flex-col gap-2 pl-2", children: question.options.map((option) => (_jsxs("div", { className: `flex items-center gap-3 rounded-lg border-2 px-3 py-2 cursor-default ${getOptionStyle(option.id)}`, children: [_jsxs("span", { className: "text-sm font-medium text-gray-600", children: [option.label, "."] }), _jsx(RichTextHtml, { html: option.text, className: "flex-1 text-sm text-gray-700" }), renderIndicator(option.id)] }, option.id))) }))] }));
 }
 // Article Card for ARTICLES groupType (e.g., GN QE RWL Part 2)
 function ArticleCard({ article, label, }) {

package/dist/components/results/renderers/review-question-body-dedicated.js

@@ -40,7 +40,7 @@ export function renderDedicatedReviewBody(ctx) {
         }
         case 'CHOOSE_THE_CORRECT_ANSWER_GROUP': {
             const data = transformChooseTheCorrectAnswerGroup(apiQuestions);
-            return (_jsx(ReviewChooseBestAnswerRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap, correctOptionIdMap: correctOptionIdMap, example: data.example }));
+            return (_jsx(ReviewChooseBestAnswerRenderer, { partNumber: partNo, questionCount: questionCount, partName: part.name, instruction: part.instructions || data.instruction, audioUrl: data.audioUrl, questions: data.questions, answers: answers, isCorrectMap: isCorrectMap, correctOptionIdMap: correctOptionIdMap, example: data.example }));
         }
         case 'CHOOSE_CORRECT_ADJECTIVE': {
             const data = transformChooseCorrectAdjective(apiQuestions);

package/dist/components/shared/RichTextEditor.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-export interface RichTextEditorProps {
+interface RichTextEditorProps {
     value?: string;
     onChange: (html: string) => void;
     label?: React.ReactNode;
     disabled?: boolean;
     minHeightClassName?: string;
+    variant?: 'default' | 'compact';
 }
-export declare function RichTextEditor({ value, onChange, label, disabled, minHeightClassName, }: RichTextEditorProps): React.JSX.Element;
+export declare function RichTextEditor({ value, onChange, label, disabled, minHeightClassName, variant, }: RichTextEditorProps): React.JSX.Element;
+export {};

package/dist/components/shared/RichTextEditor.js

@@ -3,16 +3,43 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Code, Columns3, Italic, List, ListOrdered, Minus, Quote, Redo2, RemoveFormatting, Rows3, SquareCode, Strikethrough, TableIcon, Trash2, Underline as UnderlineIcon, Undo2, } from 'lucide-react';
 const EMPTY_CONTENT = '<p></p>';
-const HEADING_LEVELS = [1, 2, 3];
-function getToolbarButtonClass(isActive) {
-    return `rounded px-3 py-1 text-sm ${isActive ? 'bg-blue-500 text-white' : 'border bg-white text-gray-700 hover:bg-gray-100'}`;
+const HEADING_LEVELS = [1, 2, 3, 4];
+const EDITOR_EXTENSIONS = [
+    StarterKit.configure({
+        heading: { levels: [...HEADING_LEVELS] },
+    }),
+    Underline,
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    Table.configure({ resizable: false }),
+    TableRow,
+    TableHeader,
+    TableCell,
+];
+const EDITOR_TABLE_CLASS = '[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-slate-300 [&_td]:border-slate-300 [&_th]:bg-slate-50 [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1';
+function toolbarButtonClass(isActive) {
+    return `inline-flex h-7 min-w-7 items-center justify-center rounded-md px-1.5 transition-colors disabled:opacity-30 ${isActive ? 'bg-indigo-600 text-white' : 'text-slate-600 hover:bg-slate-100'}`;
 }
-export function RichTextEditor({ value, onChange, label, disabled = false, minHeightClassName = 'min-h-[250px]', }) {
+function ToolbarGroup({ children }) {
+    return (_jsx("div", { className: "flex items-center gap-0.5 rounded-md bg-white px-0.5 py-0.5 shadow-sm ring-1 ring-slate-200/80", children: children }));
+}
+function ToolbarButton({ editor, disabled, active, title, onClick, children, }) {
+    return (_jsx("button", { type: "button", title: title, disabled: disabled || !editor, onClick: onClick, className: toolbarButtonClass(!!active), children: children }));
+}
+function EditorToolbar({ editor, disabled, }) {
+    const iconClass = 'h-4 w-4';
+    return (_jsxs("div", { className: "relative flex flex-wrap items-center gap-1 rounded-t-md border-b border-slate-200 bg-slate-100 px-1.5 py-1", children: [_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "Ho\u00E0n t\u00E1c", onClick: () => editor?.chain().focus().undo().run(), children: _jsx(Undo2, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "L\u00E0m l\u1EA1i", onClick: () => editor?.chain().focus().redo().run(), children: _jsx(Redo2, { className: iconClass, strokeWidth: 2 }) })] }), _jsx(ToolbarGroup, { children: HEADING_LEVELS.map((level) => (_jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('heading', { level }), title: `Heading ${level}`, onClick: () => editor?.chain().focus().toggleHeading({ level }).run(), children: _jsxs("span", { className: "text-[11px] font-bold", children: ["H", level] }) }, level))) }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('bold'), title: "\u0110\u1EADm", onClick: () => editor?.chain().focus().toggleBold().run(), children: _jsx(Bold, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('italic'), title: "Nghi\u00EAng", onClick: () => editor?.chain().focus().toggleItalic().run(), children: _jsx(Italic, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('underline'), title: "G\u1EA1ch ch\u00E2n", onClick: () => editor?.chain().focus().toggleUnderline().run(), children: _jsx(UnderlineIcon, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('strike'), title: "G\u1EA1ch ngang", onClick: () => editor?.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('code'), title: "Code", onClick: () => editor?.chain().focus().toggleCode().run(), children: _jsx(Code, { className: iconClass, strokeWidth: 2 }) })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('bulletList'), title: "Danh s\u00E1ch", onClick: () => editor?.chain().focus().toggleBulletList().run(), children: _jsx(List, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('orderedList'), title: "Danh s\u00E1ch s\u1ED1", onClick: () => editor?.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('blockquote'), title: "Tr\u00EDch d\u1EABn", onClick: () => editor?.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive('codeBlock'), title: "Kh\u1ED1i code", onClick: () => editor?.chain().focus().toggleCodeBlock().run(), children: _jsx(SquareCode, { className: iconClass, strokeWidth: 2 }) })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive({ textAlign: 'left' }), title: "C\u0103n tr\u00E1i", onClick: () => editor?.chain().focus().setTextAlign('left').run(), children: _jsx(AlignLeft, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive({ textAlign: 'center' }), title: "C\u0103n gi\u1EEFa", onClick: () => editor?.chain().focus().setTextAlign('center').run(), children: _jsx(AlignCenter, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive({ textAlign: 'right' }), title: "C\u0103n ph\u1EA3i", onClick: () => editor?.chain().focus().setTextAlign('right').run(), children: _jsx(AlignRight, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, active: editor?.isActive({ textAlign: 'justify' }), title: "C\u0103n \u0111\u1EC1u", onClick: () => editor?.chain().focus().setTextAlign('justify').run(), children: _jsx(AlignJustify, { className: iconClass, strokeWidth: 2 }) })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "\u0110\u01B0\u1EDDng k\u1EBB ngang", onClick: () => editor?.chain().focus().setHorizontalRule().run(), children: _jsx(Minus, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "Ch\u00E8n b\u1EA3ng", onClick: () => editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), children: _jsx(TableIcon, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled || !editor?.can().addRowAfter(), title: "Th\u00EAm h\u00E0ng", onClick: () => editor?.chain().focus().addRowAfter().run(), children: _jsx(Rows3, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled || !editor?.can().addColumnAfter(), title: "Th\u00EAm c\u1ED9t", onClick: () => editor?.chain().focus().addColumnAfter().run(), children: _jsx(Columns3, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled || !editor?.can().deleteTable(), title: "X\u00F3a b\u1EA3ng", onClick: () => editor?.chain().focus().deleteTable().run(), children: _jsx(Trash2, { className: iconClass, strokeWidth: 2 }) }), _jsx(ToolbarButton, { editor: editor, disabled: disabled, title: "X\u00F3a \u0111\u1ECBnh d\u1EA1ng", onClick: () => editor?.chain().focus().unsetAllMarks().clearNodes().run(), children: _jsx(RemoveFormatting, { className: iconClass, strokeWidth: 2 }) })] })] }));
+}
+export function RichTextEditor({ value, onChange, label, disabled = false, minHeightClassName = 'min-h-[250px]', variant = 'default', }) {
     const [mounted, setMounted] = useState(false);
+    const isCompact = variant === 'compact';
     const editor = useEditor({
         immediatelyRender: false,
-        extensions: [StarterKit],
+        extensions: EDITOR_EXTENSIONS,
         editable: !disabled,
         content: value || EMPTY_CONTENT,
         onUpdate: ({ editor: currentEditor }) => {
@@ -20,7 +47,7 @@ export function RichTextEditor({ value, onChange, label, disabled = false, minHe
         },
         editorProps: {
             attributes: {
-                class: `tiptap-editor focus:outline-none ${minHeightClassName} p-4 bg-white border border-gray-200 rounded-b-md prose prose-sm max-w-none`,
+                class: `tiptap-editor focus:outline-none ${minHeightClassName} ${isCompact ? 'p-2' : 'p-4'} bg-white rounded-b-md prose prose-sm max-w-none ${EDITOR_TABLE_CLASS}`,
             },
         },
     });
@@ -39,9 +66,5 @@ export function RichTextEditor({ value, onChange, label, disabled = false, minHe
     if (!mounted) {
         return null;
     }
-    return (_jsxs("div", { className: "flex w-full flex-col gap-4", children: [label ? _jsx("div", { children: label }) : null, _jsxs("div", { className: "flex flex-col rounded-md border border-gray-300 shadow-sm", children: [_jsxs("div", { className: "relative flex flex-wrap gap-2 rounded-t-md border-b border-gray-300 bg-gray-50 p-2", children: [_jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleBold().run(), disabled: disabled || !editor?.can().chain().focus().toggleBold().run(), className: `${getToolbarButtonClass(!!editor?.isActive('bold'))} font-bold`, children: "B" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleItalic().run(), disabled: disabled || !editor?.can().chain().focus().toggleItalic().run(), className: `${getToolbarButtonClass(!!editor?.isActive('italic'))} italic`, children: "I" }), _jsx("div", { className: "mx-1 h-6 w-px self-center bg-gray-300" }), HEADING_LEVELS.map((level) => (_jsxs("button", { type: "button", onClick: () => editor
-                                    ?.chain()
-                                    .focus()
-                                    .toggleHeading({ level })
-                                    .run(), disabled: disabled, className: `${getToolbarButtonClass(!!editor?.isActive('heading', { level }))} font-bold`, children: ["H", level] }, level))), _jsx("div", { className: "mx-1 h-6 w-px self-center bg-gray-300" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleBulletList().run(), disabled: disabled, className: getToolbarButtonClass(!!editor?.isActive('bulletList')), children: "\u2022 List" }), _jsx("button", { type: "button", onClick: () => editor?.chain().focus().toggleOrderedList().run(), disabled: disabled, className: getToolbarButtonClass(!!editor?.isActive('orderedList')), children: "1. List" })] }), _jsx(EditorContent, { editor: editor })] })] }));
+    return (_jsxs("div", { className: `flex w-full flex-col ${isCompact ? 'gap-0' : 'gap-4'}`, children: [label ? _jsx("div", { children: label }) : null, _jsxs("div", { className: "flex flex-col overflow-hidden rounded-md border border-gray-300 shadow-sm", children: [_jsx(EditorToolbar, { editor: editor, disabled: disabled }), _jsx(EditorContent, { editor: editor })] })] }));
 }

package/dist/components/shared/RichTextHtml.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+interface RichTextHtmlProps {
+    html?: string | null;
+    className?: string;
+    fallback?: ReactNode;
+}
+export declare function RichTextHtml({ html, className, fallback }: RichTextHtmlProps): import("react").JSX.Element;
+export {};

package/dist/components/shared/RichTextHtml.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../shared/lib/utils';
+const RICH_TEXT_CLASS = 'rich-text-html max-w-none [&_p]:m-0 [&_p+p]:mt-1 [&_h1]:mb-1 [&_h1]:mt-0 [&_h1]:text-xl [&_h1]:font-bold [&_h2]:mb-1 [&_h2]:mt-0 [&_h2]:text-lg [&_h2]:font-bold [&_h3]:mb-1 [&_h3]:mt-0 [&_h3]:text-base [&_h3]:font-bold [&_h4]:mb-1 [&_h4]:mt-0 [&_h4]:text-sm [&_h4]:font-bold [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_blockquote]:my-1 [&_blockquote]:border-l-2 [&_blockquote]:border-slate-300 [&_blockquote]:pl-3 [&_pre]:my-1 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-slate-100 [&_pre]:p-2 [&_code]:rounded [&_code]:bg-slate-100 [&_code]:px-1 [&_u]:underline [&_s]:line-through [&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-slate-300 [&_td]:border-slate-300 [&_th]:bg-slate-50 [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1 [&_hr]:my-2';
+export function RichTextHtml({ html, className, fallback = null }) {
+    if (!html) {
+        return fallback ? _jsx(_Fragment, { children: fallback }) : null;
+    }
+    return (_jsx("div", { className: cn(RICH_TEXT_CLASS, className), dangerouslySetInnerHTML: { __html: html } }));
+}

package/dist/shared/lib/rich-text.d.ts

@@ -0,0 +1,3 @@
+/** Strip HTML tags/entities so empty TipTap documents (`<p></p>`) count as blank. */
+export declare function richTextToPlainText(value: string | null | undefined): string;
+export declare function isRichTextEmpty(value: string | null | undefined): boolean;

package/dist/shared/lib/rich-text.js

@@ -0,0 +1,24 @@
+const HTML_TAG_RE = /<[^>]*>/g;
+const HTML_ENTITIES = {
+    '&nbsp;': ' ',
+    '&amp;': '&',
+    '&lt;': '<',
+    '&gt;': '>',
+    '&quot;': '"',
+    '&#39;': "'",
+};
+/** Strip HTML tags/entities so empty TipTap documents (`<p></p>`) count as blank. */
+export function richTextToPlainText(value) {
+    if (!value)
+        return '';
+    return value
+        .replace(HTML_TAG_RE, ' ')
+        .replace(/&nbsp;|&amp;|&lt;|&gt;|&quot;|&#39;/gi, (entity) => {
+        return HTML_ENTITIES[entity.toLowerCase()] ?? entity;
+    })
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+export function isRichTextEmpty(value) {
+    return richTextToPlainText(value) === '';
+}

package/dist/shared/lib/utils/question-reverse-transform.js

@@ -242,6 +242,7 @@ const reverseChooseTheCorrectAnswerGroup = (apiQuestion) => {
         });
         const isExample = item.isExample === true;
         const imageUrl = normalizeChooseAnswerGroupImageUrl(itemContent.imageUrl);
+        const audioUrl = asString(itemContent.audioUrl).trim();
         return {
             question: asString(itemContent.question),
             optionType: asString(itemContent.optionType, 'text') === 'image' ? 'image' : 'text',
@@ -255,13 +256,16 @@ const reverseChooseTheCorrectAnswerGroup = (apiQuestion) => {
             points: isExample ? 0 : asNumber(item.points, 1),
             questionNumber: asNumber(item.questionNumber, index + 1),
             ...(imageUrl !== undefined ? { imageUrl } : {}),
+            ...(audioUrl ? { audioUrl } : {}),
         };
     });
+    const audioUrl = asString(asRecord(content.meta).audioUrl).trim();
     return {
         content: '',
         answer: {
             instruction: asString(asRecord(content.meta).instruction, 'Choose the correct answer.'),
             passage: asString(asRecord(content.meta).passage),
+            ...(audioUrl ? { audioUrl } : {}),
             items,
             explanation: asString(apiQuestion.explanation),
             points: items.reduce((total, item) => (item.isExample ? total : total + item.points), 0),

package/dist/shared/lib/validation/choose-correct-answer.validation.js

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { isRichTextEmpty } from '../../lib/rich-text';
 // Validation schema for Choose the Correct Answer form
 export const chooseCorrectAnswerFormSchema = z.object({
     question: z.string().optional(),
@@ -35,7 +36,8 @@ export const chooseCorrectAnswerFormSchema = z.object({
     })
         .pipe(z.number().min(1, 'Điểm số phải >= 1')),
 }).superRefine((data, ctx) => {
-    const filledOptions = data.options.filter((opt) => opt.trim() !== '');
+    const isOptionFilled = (opt) => data.optionType === 'image' ? opt.trim() !== '' : !isRichTextEmpty(opt);
+    const filledOptions = data.options.filter((opt) => isOptionFilled(opt));
     if (filledOptions.length < 2) {
         ctx.addIssue({
             code: z.ZodIssueCode.custom,
@@ -47,7 +49,7 @@ export const chooseCorrectAnswerFormSchema = z.object({
     }
     // Validate each option based on type
     data.options.forEach((opt, index) => {
-        if (opt.trim() === '') {
+        if (!isOptionFilled(opt)) {
             ctx.addIssue({
                 code: z.ZodIssueCode.custom,
                 message: data.optionType === 'image'

package/dist/shared/types/questions/choose-the-correct-answer-group.d.ts

@@ -8,6 +8,7 @@ export interface ChooseTheCorrectAnswerGroupItemContent {
     options: ChooseTheCorrectAnswerGroupOption[];
     optionType?: 'text' | 'image';
     imageUrl?: string | string[];
+    audioUrl?: string;
 }
 export interface ChooseTheCorrectAnswerGroupItem {
     questionType?: 'CHOOSE_THE_CORRECT_ANSWER';
@@ -23,6 +24,7 @@ export interface ChooseTheCorrectAnswerGroupContent {
     meta?: {
         instruction?: string;
         passage?: string;
+        audioUrl?: string;
     };
     items: ChooseTheCorrectAnswerGroupItem[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinyweb_dev/oe-exam-sdk",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Reusable OceanEdu question components.",
   "type": "module",
   "main": "./dist/index.js",