@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/creator/question-type-registry.js

@@ -1 +1,90 @@
-import{fillInBlankRegistration as r}from"../types/fill-in-blank/register";import{arrangeLettersIntoWordsRegistration as e}from"../types/arrange-letters-into-words/register";import{writeShortParagraphRegistration as t}from"../types/write-short-paragraph/register";import{fillMissingWordsInGridRegistration as s}from"../types/fill-missing-words-in-grid/register";import{lookPictureChooseCorrectAnswerRegistration as o}from"../types/look-picture-choose-correct-answer/register";import{lookPictureFillBlankChooseAnswerRegistration as i}from"../types/look-picture-fill-blank-choose-answer/register";import{lookPictureFillWordHintRegistration as _}from"../types/look-picture-fill-word-hint/register";import{labelThePictureRegistration as p}from"../types/label-the-picture/register";import{readAndColorObjectsRegistration as E}from"../types/read-and-color-objects/register";import{imageObjectMatchingRegistration as m}from"../types/image-object-matching/register";import{readPassageAndAnswerQuestionsRegistration as R}from"../types/read-passage-and-answer-questions/register";import{chooseTheCorrectAnswerRegistration as S}from"../types/choose-the-correct-answer/register";import{chooseTheCorrectAnswerGroupRegistration as g}from"../types/choose-the-correct-answer-group/register";import{trueFalseGroupRegistration as n}from"../types/true-false-group/register";import{crossOutWordGroupRegistration as a}from"../types/cross-out-word-group/register";import{writeAShortLetterRegistration as A}from"../types/write-a-short-letter/register";import{writeCorrectVerbFormRegistration as O}from"../types/write-correct-verb-form/register";import{chooseCorrectAdjectiveRegistration as N}from"../types/choose-correct-adjective/register";import{answerTheQuestionRegistration as T}from"../types/answer-the-question/register";import{trueFalseRegistration as I}from"../types/true-false/register";import{wordOrderingRegistration as f}from"../types/word-ordering/register";import{wordFillParagraphRegistration as y}from"../types/word-fill-paragraph/register";import{matchByWritingAnswerRegistration as c}from"../types/match-by-writing-answer/register";import{writeSentencesRegistration as C}from"../types/write-sentences/register";import{listenAndChooseFromAnswerGroupRegistration as l}from"../types/listen-and-choose-from-answer-group/register";import{listenAndChooseObjectsInSceneRegistration as L}from"../types/listen-and-choose-objects-in-scene/register";import{listenAndDragObjectsIntoSceneRegistration as d}from"../types/listen-and-drag-objects-into-scene/register";import{listenAndSpeakAnswerRegistration as D}from"../types/listen-and-speak-answer/register";import{listenAndSpeakImageGroupRegistration as P}from"../types/listen-and-speak-image-group/register";import{listenAndSpeakQuestionListRegistration as G}from"../types/listen-and-speak-question-list/register";import{ListenAndSpeakCompareImagesRegistration as w}from"../types/listen-and-speak-compare-images/register";import{listenAndSpeakWithStoryImagesRegistration as W}from"../types/listen-and-speak-with-story-images/register";import{listenAndSpeakOddOneOutRegistration as u}from"../types/listen-and-speak-odd-one-out/register";import{listenAndSpeakInfoExchangeRegistration as h}from"../types/listen-and-speak-info-exchange/register";import{speakingDescribeImageRegistration as H}from"../types/speaking-describe-image/register";import{spontaneousQARegistration as U}from"../types/spontaneous-qa/register";import{readDisplayedContentRegistration as k}from"../types/read-displayed-content/register";import{speakingConversationRegistration as K}from"../types/speaking-conversation/register";import{gnSpeakingInterviewRegistration as F}from"../types/gn-speaking-interview/register";import{speakingCueCardRegistration as M}from"../types/speaking-cue-card/register";import{wordFillStructuredFormRegistration as b}from"../types/word-fill-structured-form/register";export const questionTypeRegistry={CHOOSE_THE_CORRECT_ANSWER:S,CHOOSE_THE_CORRECT_ANSWER_GROUP:g,TRUE_FALSE_GROUP:n,CROSS_OUT_WORD_GROUP:a,FILL_IN_BLANK:r,ARRANGE_LETTERS_INTO_WORDS:e,WRITE_SHORT_PARAGRAPH:t,FILL_MISSING_WORDS_IN_GRID:s,LOOK_PICTURE_CHOOSE_CORRECT_ANSWER:o,LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER:i,LOOK_PICTURE_FILL_WORD_HINT:_,LABEL_THE_PICTURE:p,READ_AND_COLOR_OBJECTS:E,IMAGE_OBJECT_MATCHING:m,READ_PASSAGE_AND_ANSWER_QUESTIONS:R,WRITE_A_SHORT_LETTER:A,WRITE_CORRECT_VERB_FORM:O,CHOOSE_CORRECT_ADJECTIVE:N,ANSWER_THE_QUESTION:T,TRUE_FALSE:I,WORD_ORDERING:f,WORD_FILL_PARAGRAPH:y,MATCH_BY_WRITING_ANSWER:c,WRITE_SENTENCES:C,LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP:l,LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE:L,LISTEN_AND_DRAG_OBJECTS_INTO_SCENE:d,LISTEN_AND_SPEAK_ANSWER:D,LISTEN_AND_SPEAK_IMAGE_GROUP:P,LISTEN_AND_SPEAK_QUESTION_LIST:G,LISTEN_AND_SPEAK_COMPARE_IMAGES:w,LISTEN_AND_SPEAK_WITH_STORY_IMAGES:W,LISTEN_AND_SPEAK_ODD_ONE_OUT:u,LISTEN_AND_SPEAK_INFO_EXCHANGE:h,SPEAKING_DESCRIBE_IMAGE:H,SPONTANEOUS_QA:U,READ_DISPLAYED_CONTENT:k,SPEAKING_CONVERSATION:K,GN_SPEAKING_INTERVIEW:F,SPEAKING_CUE_CARD:M,WORD_FILL_STRUCTURED_FORM:b};
+// ─── Registration imports ───────────────────────────────────────────────────
+import { fillInBlankRegistration } from '../types/fill-in-blank/register';
+import { arrangeLettersIntoWordsRegistration } from '../types/arrange-letters-into-words/register';
+import { writeShortParagraphRegistration } from '../types/write-short-paragraph/register';
+import { fillMissingWordsInGridRegistration } from '../types/fill-missing-words-in-grid/register';
+import { lookPictureChooseCorrectAnswerRegistration } from '../types/look-picture-choose-correct-answer/register';
+import { lookPictureFillBlankChooseAnswerRegistration } from '../types/look-picture-fill-blank-choose-answer/register';
+import { lookPictureFillWordHintRegistration } from '../types/look-picture-fill-word-hint/register';
+import { labelThePictureRegistration } from '../types/label-the-picture/register';
+import { readAndColorObjectsRegistration } from '../types/read-and-color-objects/register';
+import { imageObjectMatchingRegistration } from '../types/image-object-matching/register';
+import { readPassageAndAnswerQuestionsRegistration } from '../types/read-passage-and-answer-questions/register';
+import { chooseTheCorrectAnswerRegistration } from '../types/choose-the-correct-answer/register';
+import { chooseTheCorrectAnswerGroupRegistration } from '../types/choose-the-correct-answer-group/register';
+import { trueFalseGroupRegistration } from '../types/true-false-group/register';
+import { crossOutWordGroupRegistration } from '../types/cross-out-word-group/register';
+import { writeAShortLetterRegistration } from '../types/write-a-short-letter/register';
+import { writeCorrectVerbFormRegistration } from '../types/write-correct-verb-form/register';
+import { chooseCorrectAdjectiveRegistration } from '../types/choose-correct-adjective/register';
+import { answerTheQuestionRegistration } from '../types/answer-the-question/register';
+import { trueFalseRegistration } from '../types/true-false/register';
+import { wordOrderingRegistration } from '../types/word-ordering/register';
+import { wordFillParagraphRegistration } from '../types/word-fill-paragraph/register';
+import { matchByWritingAnswerRegistration } from '../types/match-by-writing-answer/register';
+import { writeSentencesRegistration } from '../types/write-sentences/register';
+import { listenAndChooseFromAnswerGroupRegistration } from '../types/listen-and-choose-from-answer-group/register';
+import { listenAndChooseObjectsInSceneRegistration } from '../types/listen-and-choose-objects-in-scene/register';
+import { listenAndDragObjectsIntoSceneRegistration } from '../types/listen-and-drag-objects-into-scene/register';
+import { listenAndSpeakAnswerRegistration } from '../types/listen-and-speak-answer/register';
+import { listenAndSpeakImageGroupRegistration } from '../types/listen-and-speak-image-group/register';
+import { listenAndSpeakQuestionListRegistration } from '../types/listen-and-speak-question-list/register';
+import { ListenAndSpeakCompareImagesRegistration } from '../types/listen-and-speak-compare-images/register';
+import { listenAndSpeakWithStoryImagesRegistration } from '../types/listen-and-speak-with-story-images/register';
+import { listenAndSpeakOddOneOutRegistration } from '../types/listen-and-speak-odd-one-out/register';
+import { listenAndSpeakInfoExchangeRegistration } from '../types/listen-and-speak-info-exchange/register';
+import { speakingDescribeImageRegistration } from '../types/speaking-describe-image/register';
+import { spontaneousQARegistration } from '../types/spontaneous-qa/register';
+import { spontaneousQaGroupRegistration } from '../types/spontaneous-qa-group/register';
+import { readDisplayedContentRegistration } from '../types/read-displayed-content/register';
+import { speakingConversationRegistration } from '../types/speaking-conversation/register';
+import { gnSpeakingInterviewRegistration } from '../types/gn-speaking-interview/register';
+import { speakingCueCardRegistration } from '../types/speaking-cue-card/register';
+import { wordFillStructuredFormRegistration } from '../types/word-fill-structured-form/register';
+import { wordOrderAndMatchGroupRegistration } from '../types/word-order-and-match-group/register';
+// ─── Registry map ───────────────────────────────────────────────────────────
+export const questionTypeRegistry = {
+    CHOOSE_THE_CORRECT_ANSWER: chooseTheCorrectAnswerRegistration,
+    CHOOSE_THE_CORRECT_ANSWER_GROUP: chooseTheCorrectAnswerGroupRegistration,
+    TRUE_FALSE_GROUP: trueFalseGroupRegistration,
+    CROSS_OUT_WORD_GROUP: crossOutWordGroupRegistration,
+    WORD_ORDER_AND_MATCH_GROUP: wordOrderAndMatchGroupRegistration,
+    FILL_IN_BLANK: fillInBlankRegistration,
+    ARRANGE_LETTERS_INTO_WORDS: arrangeLettersIntoWordsRegistration,
+    WRITE_SHORT_PARAGRAPH: writeShortParagraphRegistration,
+    FILL_MISSING_WORDS_IN_GRID: fillMissingWordsInGridRegistration,
+    LOOK_PICTURE_CHOOSE_CORRECT_ANSWER: lookPictureChooseCorrectAnswerRegistration,
+    LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER: lookPictureFillBlankChooseAnswerRegistration,
+    LOOK_PICTURE_FILL_WORD_HINT: lookPictureFillWordHintRegistration,
+    LABEL_THE_PICTURE: labelThePictureRegistration,
+    READ_AND_COLOR_OBJECTS: readAndColorObjectsRegistration,
+    IMAGE_OBJECT_MATCHING: imageObjectMatchingRegistration,
+    READ_PASSAGE_AND_ANSWER_QUESTIONS: readPassageAndAnswerQuestionsRegistration,
+    WRITE_A_SHORT_LETTER: writeAShortLetterRegistration,
+    WRITE_CORRECT_VERB_FORM: writeCorrectVerbFormRegistration,
+    CHOOSE_CORRECT_ADJECTIVE: chooseCorrectAdjectiveRegistration,
+    ANSWER_THE_QUESTION: answerTheQuestionRegistration,
+    TRUE_FALSE: trueFalseRegistration,
+    WORD_ORDERING: wordOrderingRegistration,
+    WORD_FILL_PARAGRAPH: wordFillParagraphRegistration, // Will need to handle viewMode mapping either here or in wrapper
+    MATCH_BY_WRITING_ANSWER: matchByWritingAnswerRegistration,
+    WRITE_SENTENCES: writeSentencesRegistration,
+    LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP: listenAndChooseFromAnswerGroupRegistration,
+    LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE: listenAndChooseObjectsInSceneRegistration,
+    LISTEN_AND_DRAG_OBJECTS_INTO_SCENE: listenAndDragObjectsIntoSceneRegistration,
+    LISTEN_AND_SPEAK_ANSWER: listenAndSpeakAnswerRegistration,
+    LISTEN_AND_SPEAK_IMAGE_GROUP: listenAndSpeakImageGroupRegistration,
+    LISTEN_AND_SPEAK_QUESTION_LIST: listenAndSpeakQuestionListRegistration,
+    LISTEN_AND_SPEAK_COMPARE_IMAGES: ListenAndSpeakCompareImagesRegistration,
+    LISTEN_AND_SPEAK_WITH_STORY_IMAGES: listenAndSpeakWithStoryImagesRegistration,
+    LISTEN_AND_SPEAK_ODD_ONE_OUT: listenAndSpeakOddOneOutRegistration,
+    LISTEN_AND_SPEAK_INFO_EXCHANGE: listenAndSpeakInfoExchangeRegistration,
+    SPEAKING_DESCRIBE_IMAGE: speakingDescribeImageRegistration,
+    SPONTANEOUS_QA: spontaneousQARegistration,
+    SPONTANEOUS_QA_GROUP: spontaneousQaGroupRegistration,
+    READ_DISPLAYED_CONTENT: readDisplayedContentRegistration,
+    SPEAKING_CONVERSATION: speakingConversationRegistration,
+    GN_SPEAKING_INTERVIEW: gnSpeakingInterviewRegistration,
+    SPEAKING_CUE_CARD: speakingCueCardRegistration,
+    WORD_FILL_STRUCTURED_FORM: wordFillStructuredFormRegistration,
+};

package/dist/components/questions/groups/ArticlesGroupCard.js

@@ -1 +1,121 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as a,useState as i}from"react";import{useEditor as r,EditorContent as l}from"@tiptap/react";import n from"@tiptap/starter-kit";import s from"@tiptap/extension-text-align";import{ImagePreview as o}from"../../../components/ui/image-preview";import{Input as c}from"../../../components/ui/input";import{Label as d}from"../../../components/ui/label";import{Card as m,CardContent as h,CardHeader as g,CardTitle as u}from"../../../components/ui/card";import{FileUpload as p}from"../../../components/ui/file-upload";import{ImageIcon as f,Layers as x,Type as b,FileText as v,PlusCircle as N,Trash2 as y,Bold as w,Italic as C,Strikethrough as k,Heading1 as A,Heading2 as _,List as T,ListOrdered as U,AlignLeft as $,AlignCenter as j,AlignRight as H,Undo2 as L,Redo2 as O}from"lucide-react";import{Button as B}from"../../../components/ui/button";import{usePresignedFileUrl as R}from"../../../shared/lib/hooks";function I({onClick:t,active:a,disabled:i,title:r,children:l}){return e("button",{type:"button",title:r,onClick:t,disabled:i,className:`flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors\n        ${a?"bg-teal-500 text-white shadow-sm":"text-gray-600 hover:bg-gray-200 hover:text-gray-900"}\n        ${i?"cursor-not-allowed opacity-40":"cursor-pointer"}\n      `,children:l})}function D(){return e("div",{className:"mx-0.5 h-5 w-px shrink-0 bg-gray-300"})}function S({value:o,onChange:c,isReadOnly:d=!1}){const[m,h]=i(!1),g=r({immediatelyRender:!1,editable:!d,extensions:[n,s.configure({types:["heading","paragraph"]})],content:o||"",onUpdate:({editor:e})=>{c(e.getHTML())},editorProps:{attributes:{class:["focus:outline-none min-h-[120px] max-h-[400px] overflow-y-auto p-3 text-sm text-gray-800 leading-relaxed","prose prose-sm max-w-none","[&_h1]:text-xl [&_h1]:font-bold [&_h1]:mb-2","[&_h2]:text-lg [&_h2]:font-bold [&_h2]:mb-1.5","[&_ul]:list-disc [&_ul]:ml-5 [&_ol]:list-decimal [&_ol]:ml-5","[&_li]:mb-0.5","[&_strong]:font-bold [&_em]:italic [&_s]:line-through","[&_hr]:border-gray-300 [&_hr]:my-3",d?"bg-gray-50 cursor-not-allowed":"bg-white"].join(" ")}}});return a(()=>{h(!0)},[]),a(()=>{g&&void 0!==o&&o!==g.getHTML()&&setTimeout(()=>g.commands.setContent(o,{emitUpdate:!1}),0)},[o,g]),a(()=>{g?.setEditable(!d)},[d,g]),m?t("div",{className:"overflow-hidden rounded-sm border-2 transition-all "+(d?"border-gray-200 bg-gray-50":"border-gray-200 bg-white focus-within:border-teal-400 focus-within:shadow-sm focus-within:shadow-teal-100"),children:[!d&&t("div",{className:"flex flex-wrap items-center gap-1 border-b border-gray-200 bg-gray-50/80 px-2 py-1.5",children:[e(I,{title:"Hoàn tác",onClick:()=>g?.chain().focus().undo().run(),disabled:!g?.can().undo(),children:e(L,{className:"h-3.5 w-3.5"})}),e(I,{title:"Làm lại",onClick:()=>g?.chain().focus().redo().run(),disabled:!g?.can().redo(),children:e(O,{className:"h-3.5 w-3.5"})}),e(D,{}),e(I,{title:"Heading 1",active:g?.isActive("heading",{level:1}),onClick:()=>g?.chain().focus().toggleHeading({level:1}).run(),children:e(A,{className:"h-3.5 w-3.5"})}),e(I,{title:"Heading 2",active:g?.isActive("heading",{level:2}),onClick:()=>g?.chain().focus().toggleHeading({level:2}).run(),children:e(_,{className:"h-3.5 w-3.5"})}),e(D,{}),e(I,{title:"In đậm",active:g?.isActive("bold"),onClick:()=>g?.chain().focus().toggleBold().run(),children:e(w,{className:"h-3.5 w-3.5"})}),e(I,{title:"In nghiêng",active:g?.isActive("italic"),onClick:()=>g?.chain().focus().toggleItalic().run(),children:e(C,{className:"h-3.5 w-3.5"})}),e(I,{title:"Gạch ngang",active:g?.isActive("strike"),onClick:()=>g?.chain().focus().toggleStrike().run(),children:e(k,{className:"h-3.5 w-3.5"})}),e(D,{}),e(I,{title:"Danh sách chấm",active:g?.isActive("bulletList"),onClick:()=>g?.chain().focus().toggleBulletList().run(),children:e(T,{className:"h-3.5 w-3.5"})}),e(I,{title:"Danh sách số",active:g?.isActive("orderedList"),onClick:()=>g?.chain().focus().toggleOrderedList().run(),children:e(U,{className:"h-3.5 w-3.5"})}),e(D,{}),e(I,{title:"Căn trái",active:g?.isActive({textAlign:"left"}),onClick:()=>g?.chain().focus().setTextAlign("left").run(),children:e($,{className:"h-3.5 w-3.5"})}),e(I,{title:"Căn giữa",active:g?.isActive({textAlign:"center"}),onClick:()=>g?.chain().focus().setTextAlign("center").run(),children:e(j,{className:"h-3.5 w-3.5"})}),e(I,{title:"Căn phải",active:g?.isActive({textAlign:"right"}),onClick:()=>g?.chain().focus().setTextAlign("right").run(),children:e(H,{className:"h-3.5 w-3.5"})})]}),e(l,{editor:g})]}):null}function z({src:t,alt:a}){const{previewUrl:i}=R(t),r=i||"";return r?e(o,{src:r,alt:a,className:"mt-2 h-40 w-full max-w-xs rounded-lg border border-gray-200"}):null}export function ArticlesGroupCard({groupNumber:a,articleCount:i,articles:r,onArticlesChange:l,title:n="",onTitleChange:s,isReadOnly:o=!1,uploadIdPrefix:w="articles-group"}){const C=r.length>0?r:Array.from({length:i},()=>({name:"",content:"",imageUrl:""})),k=(e,t,a)=>{if(o)return;const i=C.map((i,r)=>r===e?{...i,[t]:a}:i);l(i)};return t(m,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-teal-500 via-emerald-500 to-green-500"}),e(g,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-emerald-600 shadow-md",children:e(x,{className:"h-5 w-5 text-white"})}),t("div",{className:"flex-1",children:[t("div",{className:"flex items-center gap-2",children:[e(u,{className:"text-lg font-bold text-gray-900",children:"Bài viết nhóm"}),t("span",{className:"inline-flex items-center rounded-full border border-teal-300 bg-teal-100 px-2.5 py-0.5 text-xs font-semibold text-teal-700",children:["Nhóm ",a]}),t("span",{className:"inline-flex items-center rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-600",children:[r.length||i," bài viết"]})]}),t("p",{className:"text-sm text-gray-500",children:["Nhập nội dung từng bài viết — dùng chung cho tất cả câu hỏi trong Nhóm ",a,". Bạn có thể thêm hoặc xóa bài viết."]})]})]})}),t(h,{className:"space-y-5",children:[t("div",{className:"space-y-2 pb-2",children:[t(d,{htmlFor:`${w}-title`,className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(b,{className:"h-4 w-4 text-teal-500"}),"Tiêu đề nhóm bài viết"," ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),e(c,{id:`${w}-title`,value:n,onChange:e=>s?.(e.target.value),placeholder:"Nhập tiêu đề chung cho nhóm bài viết…",readOnly:o,className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 "+(o?"bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0":"")})]}),C.map((a,i)=>{const r=String.fromCharCode(65+i);return t("div",{className:"rounded-xl border-2 border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 transition-all hover:border-teal-200 hover:shadow-sm",children:[t("div",{className:"mb-3 flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-emerald-600 text-sm font-bold text-white shadow-sm",children:r}),t("span",{className:"text-sm font-semibold text-gray-700",children:["Bài viết ",i+1]})]}),C.length>1&&!o&&e(B,{type:"button",variant:"ghost",size:"sm",onClick:()=>(e=>{if(o)return;const t=C.filter((t,a)=>a!==e);l(t)})(i),className:"h-8 w-8 p-0 text-red-500 hover:bg-red-50 hover:text-red-600",title:"Xóa bài viết",children:e(y,{className:"h-4 w-4"})})]}),t("div",{className:"space-y-3",children:[t("div",{className:"space-y-1.5",children:[t(d,{htmlFor:`${w}-name-${i}`,className:"flex items-center gap-1.5 text-sm font-medium text-gray-700",children:[e(b,{className:"h-3.5 w-3.5 text-teal-500"}),"Tên người / tiêu đề"]}),e(c,{id:`${w}-name-${i}`,value:a.name,onChange:e=>k(i,"name",e.target.value),placeholder:"VD: Ariel, Clive, Vicky...",readOnly:o,className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 "+(o?"bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0":"")})]}),t("div",{className:"space-y-1.5",children:[t(d,{className:"flex items-center gap-1.5 text-sm font-medium text-gray-700",children:[e(v,{className:"h-3.5 w-3.5 text-teal-500"}),"Nội dung bài viết"]}),e(S,{value:a.content,onChange:e=>k(i,"content",e),isReadOnly:o})]}),t("div",{className:"space-y-1.5",children:[t(d,{className:"flex items-center gap-1.5 text-sm font-medium text-gray-700",children:[e(f,{className:"h-3.5 w-3.5 text-teal-500"}),"Hình ảnh"," ",e("span",{className:"text-xs font-normal text-gray-400",children:"(Tùy chọn)"})]}),!o&&e(p,{id:`${w}-image-${i}`,label:"",accept:"image/*",value:a.imageUrl,onChange:e=>k(i,"imageUrl",e),maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),a.imageUrl&&e(z,{src:a.imageUrl,alt:`Article ${r} image`})]})]})]},i)}),!o&&t(B,{type:"button",variant:"outline",className:"w-full border-dashed border-teal-300 bg-teal-50/50 text-teal-700 hover:bg-teal-50 hover:text-teal-800 hover:border-teal-400",onClick:()=>{o||l([...C,{name:"",content:"",imageUrl:""}])},children:[e(N,{className:"mr-2 h-4 w-4"}),"Thêm bài viết"]})]})]})}
+'use client';
+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 TextAlign from '@tiptap/extension-text-align';
+import { ImagePreview } from '../../../components/ui/image-preview';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
+import { FileUpload } from '../../../components/ui/file-upload';
+import { ImageIcon, Layers, Type, FileText, PlusCircle, Trash2, Bold, Italic, Strikethrough, Heading1, Heading2, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Undo2, Redo2, } from 'lucide-react';
+import { Button } from '../../../components/ui/button';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks';
+// ---------------------------------------------------------------------------
+// Toolbar helpers
+// ---------------------------------------------------------------------------
+function ToolbarBtn({ onClick, active, disabled, title, children, }) {
+    return (_jsx("button", { type: "button", title: title, onClick: onClick, disabled: disabled, className: `flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors
+        ${active ? 'bg-teal-500 text-white shadow-sm' : 'text-gray-600 hover:bg-gray-200 hover:text-gray-900'}
+        ${disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'}
+      `, children: children }));
+}
+function ToolbarSep() {
+    return _jsx("div", { className: "mx-0.5 h-5 w-px shrink-0 bg-gray-300" });
+}
+function ArticleEditor({ value, onChange, isReadOnly = false }) {
+    const [mounted, setMounted] = useState(false);
+    const editor = useEditor({
+        immediatelyRender: false,
+        editable: !isReadOnly,
+        extensions: [
+            StarterKit,
+            TextAlign.configure({ types: ['heading', 'paragraph'] }),
+        ],
+        content: value || '',
+        onUpdate: ({ editor }) => {
+            onChange(editor.getHTML());
+        },
+        editorProps: {
+            attributes: {
+                class: [
+                    'focus:outline-none min-h-[120px] max-h-[400px] overflow-y-auto p-3 text-sm text-gray-800 leading-relaxed',
+                    'prose prose-sm max-w-none',
+                    '[&_h1]:text-xl [&_h1]:font-bold [&_h1]:mb-2',
+                    '[&_h2]:text-lg [&_h2]:font-bold [&_h2]:mb-1.5',
+                    '[&_ul]:list-disc [&_ul]:ml-5 [&_ol]:list-decimal [&_ol]:ml-5',
+                    '[&_li]:mb-0.5',
+                    '[&_strong]:font-bold [&_em]:italic [&_s]:line-through',
+                    '[&_hr]:border-gray-300 [&_hr]:my-3',
+                    isReadOnly ? 'bg-gray-50 cursor-not-allowed' : 'bg-white',
+                ].join(' '),
+            },
+        },
+    });
+    useEffect(() => { setMounted(true); }, []);
+    useEffect(() => {
+        if (editor && value !== undefined && value !== editor.getHTML()) {
+            setTimeout(() => editor.commands.setContent(value, { emitUpdate: false }), 0);
+        }
+    }, [value, editor]);
+    useEffect(() => {
+        editor?.setEditable(!isReadOnly);
+    }, [isReadOnly, editor]);
+    if (!mounted)
+        return null;
+    return (_jsxs("div", { className: `overflow-hidden rounded-sm border-2 transition-all ${isReadOnly
+            ? 'border-gray-200 bg-gray-50'
+            : 'border-gray-200 bg-white focus-within:border-teal-400 focus-within:shadow-sm focus-within:shadow-teal-100'}`, children: [!isReadOnly && (_jsxs("div", { className: "flex flex-wrap items-center gap-1 border-b border-gray-200 bg-gray-50/80 px-2 py-1.5", children: [_jsx(ToolbarBtn, { title: "Ho\u00E0n t\u00E1c", onClick: () => editor?.chain().focus().undo().run(), disabled: !editor?.can().undo(), children: _jsx(Undo2, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "L\u00E0m l\u1EA1i", onClick: () => editor?.chain().focus().redo().run(), disabled: !editor?.can().redo(), children: _jsx(Redo2, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { title: "Heading 1", active: editor?.isActive('heading', { level: 1 }), onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(), children: _jsx(Heading1, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "Heading 2", active: editor?.isActive('heading', { level: 2 }), onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(), children: _jsx(Heading2, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { title: "In \u0111\u1EADm", active: editor?.isActive('bold'), onClick: () => editor?.chain().focus().toggleBold().run(), children: _jsx(Bold, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "In nghi\u00EAng", active: editor?.isActive('italic'), onClick: () => editor?.chain().focus().toggleItalic().run(), children: _jsx(Italic, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "G\u1EA1ch ngang", active: editor?.isActive('strike'), onClick: () => editor?.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { title: "Danh s\u00E1ch ch\u1EA5m", active: editor?.isActive('bulletList'), onClick: () => editor?.chain().focus().toggleBulletList().run(), children: _jsx(List, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "Danh s\u00E1ch s\u1ED1", active: editor?.isActive('orderedList'), onClick: () => editor?.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { title: "C\u0103n tr\u00E1i", active: editor?.isActive({ textAlign: 'left' }), onClick: () => editor?.chain().focus().setTextAlign('left').run(), children: _jsx(AlignLeft, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "C\u0103n gi\u1EEFa", active: editor?.isActive({ textAlign: 'center' }), onClick: () => editor?.chain().focus().setTextAlign('center').run(), children: _jsx(AlignCenter, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "C\u0103n ph\u1EA3i", active: editor?.isActive({ textAlign: 'right' }), onClick: () => editor?.chain().focus().setTextAlign('right').run(), children: _jsx(AlignRight, { className: "h-3.5 w-3.5" }) })] })), _jsx(EditorContent, { editor: editor })] }));
+}
+// ---------------------------------------------------------------------------
+// Sub-component: single article image preview with presigned URL
+// ---------------------------------------------------------------------------
+function ArticleImagePreview({ src, alt }) {
+    const { previewUrl } = usePresignedFileUrl(src);
+    const displayUrl = previewUrl || '';
+    if (!displayUrl)
+        return null;
+    return (_jsx(ImagePreview, { src: displayUrl, alt: alt, className: "mt-2 h-40 w-full max-w-xs rounded-lg border border-gray-200" }));
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * `ArticlesGroupCard`
+ *
+ * Renders N article cards within a single group. Each article has:
+ *   - name (e.g. "Ariel", "Clive", "Vicky")
+ *   - content (textarea for the reading passage)
+ *   - imageUrl (file upload for the person's photo)
+ *
+ * Used for question types that require multiple reading passages per group,
+ * such as KEY_FOR_SCHOOLS Reading Part 2.
+ */
+export function ArticlesGroupCard({ groupNumber, articleCount, articles, onArticlesChange, title = '', onTitleChange, isReadOnly = false, uploadIdPrefix = 'articles-group', }) {
+    // Use the articles array directly. If empty, fallback to articleCount
+    const displayArticles = articles.length > 0
+        ? articles
+        : Array.from({ length: articleCount }, () => ({ name: '', content: '', imageUrl: '' }));
+    const handleFieldChange = (index, field, value) => {
+        if (isReadOnly)
+            return;
+        const updated = displayArticles.map((article, i) => i === index ? { ...article, [field]: value } : article);
+        onArticlesChange(updated);
+    };
+    const handleAddArticle = () => {
+        if (isReadOnly)
+            return;
+        onArticlesChange([...displayArticles, { name: '', content: '', imageUrl: '' }]);
+    };
+    const handleDeleteArticle = (index) => {
+        if (isReadOnly)
+            return;
+        const updated = displayArticles.filter((_, i) => i !== index);
+        onArticlesChange(updated);
+    };
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-teal-500 via-emerald-500 to-green-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-teal-500 to-emerald-600 shadow-md", children: _jsx(Layers, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "B\u00E0i vi\u1EBFt nh\u00F3m" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-teal-300 bg-teal-100 px-2.5 py-0.5 text-xs font-semibold text-teal-700", children: ["Nh\u00F3m ", groupNumber] }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-600", children: [articles.length || articleCount, " b\u00E0i vi\u1EBFt"] })] }), _jsxs("p", { className: "text-sm text-gray-500", children: ["Nh\u1EADp n\u1ED9i dung t\u1EEBng b\u00E0i vi\u1EBFt \u2014 d\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong Nh\u00F3m ", groupNumber, ". B\u1EA1n c\u00F3 th\u1EC3 th\u00EAm ho\u1EB7c x\u00F3a b\u00E0i vi\u1EBFt."] })] })] }) }), _jsxs(CardContent, { className: "space-y-5", children: [_jsxs("div", { className: "space-y-2 pb-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-title`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m b\u00E0i vi\u1EBFt", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-title`, value: title, onChange: (e) => onTitleChange?.(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 chung cho nh\u00F3m b\u00E0i vi\u1EBFt\u2026", readOnly: isReadOnly, className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0' : ''}` })] }), displayArticles.map((article, index) => {
+                        const letter = String.fromCharCode(65 + index); // A, B, C...
+                        return (_jsxs("div", { className: "rounded-xl border-2 border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 transition-all hover:border-teal-200 hover:shadow-sm", children: [_jsxs("div", { className: "mb-3 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-gradient-to-br from-teal-500 to-emerald-600 text-sm font-bold text-white shadow-sm", children: letter }), _jsxs("span", { className: "text-sm font-semibold text-gray-700", children: ["B\u00E0i vi\u1EBFt ", index + 1] })] }), displayArticles.length > 1 && !isReadOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => handleDeleteArticle(index), className: "h-8 w-8 p-0 text-red-500 hover:bg-red-50 hover:text-red-600", title: "X\u00F3a b\u00E0i vi\u1EBFt", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-name-${index}`, className: "flex items-center gap-1.5 text-sm font-medium text-gray-700", children: [_jsx(Type, { className: "h-3.5 w-3.5 text-teal-500" }), "T\u00EAn ng\u01B0\u1EDDi / ti\u00EAu \u0111\u1EC1"] }), _jsx(Input, { id: `${uploadIdPrefix}-name-${index}`, value: article.name, onChange: (e) => handleFieldChange(index, 'name', e.target.value), placeholder: `VD: Ariel, Clive, Vicky...`, readOnly: isReadOnly, className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0' : ''}` })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-sm font-medium text-gray-700", children: [_jsx(FileText, { className: "h-3.5 w-3.5 text-teal-500" }), "N\u1ED9i dung b\u00E0i vi\u1EBFt"] }), _jsx(ArticleEditor, { value: article.content, onChange: (html) => handleFieldChange(index, 'content', html), isReadOnly: isReadOnly })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-sm font-medium text-gray-700", children: [_jsx(ImageIcon, { className: "h-3.5 w-3.5 text-teal-500" }), "H\u00ECnh \u1EA3nh", ' ', _jsx("span", { className: "text-xs font-normal text-gray-400", children: "(T\u00F9y ch\u1ECDn)" })] }), !isReadOnly && (_jsx(FileUpload, { id: `${uploadIdPrefix}-image-${index}`, label: "", accept: "image/*", value: article.imageUrl, onChange: (url) => handleFieldChange(index, 'imageUrl', url), maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" })), article.imageUrl && (_jsx(ArticleImagePreview, { src: article.imageUrl, alt: `Article ${letter} image` }))] })] })] }, index));
+                    }), !isReadOnly && (_jsxs(Button, { type: "button", variant: "outline", className: "w-full border-dashed border-teal-300 bg-teal-50/50 text-teal-700 hover:bg-teal-50 hover:text-teal-800 hover:border-teal-400", onClick: handleAddArticle, children: [_jsx(PlusCircle, { className: "mr-2 h-4 w-4" }), "Th\u00EAm b\u00E0i vi\u1EBFt"] }))] })] }));
+}

package/dist/components/questions/groups/BasicQuestionGroupCard.js

@@ -1 +1,50 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{ImagePreview as t}from"../../../components/ui/image-preview";import{Input as a}from"../../../components/ui/input";import{Label as n}from"../../../components/ui/label";import{Textarea as l}from"../../../components/ui/textarea";import{Card as s,CardContent as o,CardHeader as i,CardTitle as c}from"../../../components/ui/card";import{FileUpload as m}from"../../../components/ui/file-upload";import{ImageIcon as d,Layers as p,MessageSquare as h,Type as u}from"lucide-react";import{usePresignedFileUrl as g}from"../../../shared/lib/hooks";export function BasicQuestionGroupCard({groupNumber:x,title:f,subtitle:b,content:N,imageUrl:y,onTitleChange:w,onSubtitleChange:v,onContentChange:C,onImageChange:U,onImagePresignedUrlChange:$,showContent:T=!0,groupConfig:j,uploadIdPrefix:O="basic-group",isReadOnly:P=!1}){const F=j&&j.length>0,I=!F||j.includes("title"),k=!F||j.includes("subtitle"),D=(!F||j.includes("content"))&&T,G=!F||j.includes("imageUrl"),{previewUrl:R}=g(y),S=R||"";return r(s,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-indigo-500"}),e(i,{className:"pb-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 shadow-md",children:e(p,{className:"h-5 w-5 text-white"})}),r("div",{className:"flex-1",children:[r("div",{className:"flex items-center gap-2",children:[e(c,{className:"text-lg font-bold text-gray-900",children:"Dữ liệu nhóm"}),r("span",{className:"inline-flex items-center rounded-full border border-purple-300 bg-purple-100 px-2.5 py-0.5 text-xs font-semibold text-purple-700",children:["Nhóm ",x]})]}),r("p",{className:"text-sm text-gray-500",children:["Dùng chung cho tất cả câu hỏi trong Nhóm ",x]})]})]})}),r(o,{className:"space-y-5",children:[I&&r("div",{className:"space-y-2",children:[r(n,{htmlFor:`${O}-title`,className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(u,{className:"h-4 w-4 text-purple-500"}),"Tiêu đề nhóm"," ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),e(a,{id:`${O}-title`,value:f,onChange:e=>{P||w(e.target.value)},readOnly:P,placeholder:"Nhập tiêu đề nhóm câu hỏi…",className:"border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200 "+(P?"bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0":"")})]}),k&&r("div",{className:"space-y-2",children:[r(n,{htmlFor:`${O}-subtitle`,className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(u,{className:"h-4 w-4 text-purple-500"}),"Phụ đề nhóm"," ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),e(a,{id:`${O}-subtitle`,value:b,onChange:e=>{P||v(e.target.value)},readOnly:P,placeholder:"Nhập phụ đề nhóm câu hỏi…",className:"border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200 "+(P?"bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0":"")})]}),D&&r("div",{className:"space-y-2",children:[r(n,{htmlFor:`${O}-content`,className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(h,{className:"h-4 w-4 text-purple-500"}),"Nội dung nhóm"," ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),e(l,{id:`${O}-content`,value:N,onChange:e=>{P||C(e.target.value)},readOnly:P,placeholder:"Nhập đoạn văn / câu chuyện chung cho nhóm câu hỏi này…",rows:5,className:"min-h-[120px] border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200 "+(P?"bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0":"")})]}),G&&r("div",{className:"space-y-2",children:[r(n,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(d,{className:"h-4 w-4 text-purple-500"}),"Hình ảnh nhóm"," ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),!P&&e(m,{id:`${O}-image`,label:"",accept:"image/*",value:y,onChange:e=>{P||U(e)},onPresignedUrlChange:$,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),S&&e(t,{src:S,alt:"Group image preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImagePreview } from '../../../components/ui/image-preview';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import { Textarea } from '../../../components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
+import { FileUpload } from '../../../components/ui/file-upload';
+import { ImageIcon, Layers, MessageSquare, Type } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * `BasicQuestionGroupCard`
+ *
+ * The shared group header card used by:
+ *   - ANSWER_THE_QUESTION
+ *   - CHOOSE_THE_CORRECT_ANSWER
+ *   - FILL_IN_BLANK
+ *
+ * It renders three optional fields that are **shared across all questions in
+ * the same group**: a title, a content/passage textarea, and an image upload.
+ *
+ * This component is **purely presentational** – all state lives in the parent
+ * (managed by `useBasicQuestionGroup`).
+ */
+export function BasicQuestionGroupCard({ groupNumber, title, subtitle, content, imageUrl, onTitleChange, onSubtitleChange, onContentChange, onImageChange, onImagePresignedUrlChange, showContent = true, groupConfig, uploadIdPrefix = 'basic-group', isReadOnly = false, }) {
+    const hasConfig = groupConfig && groupConfig.length > 0;
+    const showTitle = !hasConfig || groupConfig.includes('title');
+    const showSubtitle = !hasConfig || groupConfig.includes('subtitle');
+    const showContentField = (!hasConfig || groupConfig.includes('content')) && showContent;
+    const showImage = !hasConfig || groupConfig.includes('imageUrl');
+    // Resolve presigned preview URL for the stored image key
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    const displayPreviewUrl = previewUrl || '';
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-purple-500 via-violet-500 to-indigo-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 shadow-md", children: _jsx(Layers, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "D\u1EEF li\u1EC7u nh\u00F3m" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-purple-300 bg-purple-100 px-2.5 py-0.5 text-xs font-semibold text-purple-700", children: ["Nh\u00F3m ", groupNumber] })] }), _jsxs("p", { className: "text-sm text-gray-500", children: ["D\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong Nh\u00F3m ", groupNumber] })] })] }) }), _jsxs(CardContent, { className: "space-y-5", children: [showTitle && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-title`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-purple-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-title`, value: title, onChange: (e) => {
+                                    if (!isReadOnly)
+                                        onTitleChange(e.target.value);
+                                }, readOnly: isReadOnly, placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 nh\u00F3m c\u00E2u h\u1ECFi\u2026", className: `border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0' : ''}` })] })), showSubtitle && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-subtitle`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-purple-500" }), "Ph\u1EE5 \u0111\u1EC1 nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-subtitle`, value: subtitle, onChange: (e) => {
+                                    if (!isReadOnly)
+                                        onSubtitleChange(e.target.value);
+                                }, readOnly: isReadOnly, placeholder: "Nh\u1EADp ph\u1EE5 \u0111\u1EC1 nh\u00F3m c\u00E2u h\u1ECFi\u2026", className: `border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0' : ''}` })] })), showContentField && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-content`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-purple-500" }), "N\u1ED9i dung nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Textarea, { id: `${uploadIdPrefix}-content`, value: content, onChange: (e) => {
+                                    if (!isReadOnly)
+                                        onContentChange(e.target.value);
+                                }, readOnly: isReadOnly, placeholder: "Nh\u1EADp \u0111o\u1EA1n v\u0103n / c\u00E2u chuy\u1EC7n chung cho nh\u00F3m c\u00E2u h\u1ECFi n\u00E0y\u2026", rows: 5, className: `min-h-[120px] border-gray-200 bg-white transition-all focus:border-purple-300 focus:ring-purple-200 ${isReadOnly ? 'bg-gray-50 text-gray-500 cursor-not-allowed border-transparent focus:border-transparent focus:ring-0' : ''}` })] })), showImage && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-purple-500" }), "H\u00ECnh \u1EA3nh nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), !isReadOnly && (_jsx(FileUpload, { id: `${uploadIdPrefix}-image`, label: "", accept: "image/*", value: imageUrl, onChange: (url) => {
+                                    if (!isReadOnly)
+                                        onImageChange(url);
+                                }, onPresignedUrlChange: onImagePresignedUrlChange, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Group image preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] }))] })] }));
+}

package/dist/components/questions/groups/DocumentGroupCard.js

@@ -1 +1,114 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as n,useState as i}from"react";import{useEditor as a,EditorContent as l}from"@tiptap/react";import o from"@tiptap/starter-kit";import r from"@tiptap/extension-text-align";import{ImagePreview as s}from"../../../components/ui/image-preview";import{Input as c}from"../../../components/ui/input";import{Label as d}from"../../../components/ui/label";import{Card as h,CardContent as m,CardHeader as g,CardTitle as u}from"../../../components/ui/card";import{FileUpload as p}from"../../../components/ui/file-upload";import{usePresignedFileUrl as x}from"../../../shared/lib/hooks";import{Layers as b,Type as f,Pilcrow as v,ImageIcon as N,Bold as y,Italic as w,Strikethrough as _,Heading1 as C,Heading2 as k,Heading3 as A,List as T,ListOrdered as U,AlignLeft as H,AlignCenter as L,AlignRight as I,Minus as $,Undo2 as j,Redo2 as O,FileText as P,Info as R}from"lucide-react";function G({onClick:t,active:n,disabled:i,title:a,children:l}){return e("button",{type:"button",title:a,onClick:t,disabled:i,className:`flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors\n        ${n?"bg-indigo-500 text-white shadow-sm":"text-gray-600 hover:bg-gray-200 hover:text-gray-900"}\n        ${i?"cursor-not-allowed opacity-40":"cursor-pointer"}\n      `,children:l})}function S(){return e("div",{className:"mx-0.5 h-5 w-px shrink-0 bg-gray-300"})}function z({value:s,onChange:c,isReadOnly:d=!1,placeholder:h}){const[m,g]=i(!1),u=a({immediatelyRender:!1,editable:!d,extensions:[o,r.configure({types:["heading","paragraph"]})],content:s||"",onUpdate:({editor:e})=>{c(e.getHTML())},editorProps:{attributes:{class:["focus:outline-none min-h-[200px] max-h-[520px] overflow-y-auto p-4 text-sm text-gray-800 leading-relaxed","prose prose-sm max-w-none","[&_h1]:text-xl [&_h1]:font-bold [&_h1]:mb-2","[&_h2]:text-lg [&_h2]:font-bold [&_h2]:mb-1.5","[&_h3]:text-base [&_h3]:font-semibold [&_h3]:mb-1","[&_ul]:list-disc [&_ul]:ml-5 [&_ol]:list-decimal [&_ol]:ml-5","[&_li]:mb-0.5","[&_strong]:font-bold [&_em]:italic [&_s]:line-through","[&_hr]:border-gray-300 [&_hr]:my-3","bg-white"].join(" "),...h&&!s?{"data-placeholder":h}:{}}}});return n(()=>{g(!0)},[]),n(()=>{u&&void 0!==s&&s!==u.getHTML()&&setTimeout(()=>u.commands.setContent(s,{emitUpdate:!1}),0)},[s,u]),n(()=>{u?.setEditable(!d)},[d,u]),m?t("div",{className:"overflow-hidden rounded-sm border-2 transition-all "+(d?"border-gray-200":"border-gray-200 focus-within:border-indigo-400 focus-within:ring-2 focus-within:ring-indigo-100"),children:[!d&&t("div",{className:"flex flex-wrap items-center gap-0.5 border-b border-gray-200 bg-gray-50 px-2 py-1.5",children:[e(G,{title:"Hoàn tác",onClick:()=>u?.chain().focus().undo().run(),disabled:!u?.can().undo(),children:e(j,{className:"h-3.5 w-3.5"})}),e(G,{title:"Làm lại",onClick:()=>u?.chain().focus().redo().run(),disabled:!u?.can().redo(),children:e(O,{className:"h-3.5 w-3.5"})}),e(S,{}),e(G,{title:"Tiêu đề 1",active:u?.isActive("heading",{level:1}),onClick:()=>u?.chain().focus().toggleHeading({level:1}).run(),children:e(C,{className:"h-3.5 w-3.5"})}),e(G,{title:"Tiêu đề 2",active:u?.isActive("heading",{level:2}),onClick:()=>u?.chain().focus().toggleHeading({level:2}).run(),children:e(k,{className:"h-3.5 w-3.5"})}),e(G,{title:"Tiêu đề 3",active:u?.isActive("heading",{level:3}),onClick:()=>u?.chain().focus().toggleHeading({level:3}).run(),children:e(A,{className:"h-3.5 w-3.5"})}),e(S,{}),e(G,{title:"In đậm",active:u?.isActive("bold"),onClick:()=>u?.chain().focus().toggleBold().run(),children:e(y,{className:"h-3.5 w-3.5"})}),e(G,{title:"In nghiêng",active:u?.isActive("italic"),onClick:()=>u?.chain().focus().toggleItalic().run(),children:e(w,{className:"h-3.5 w-3.5"})}),e(G,{title:"Gạch ngang",active:u?.isActive("strike"),onClick:()=>u?.chain().focus().toggleStrike().run(),children:e(_,{className:"h-3.5 w-3.5"})}),e(S,{}),e(G,{title:"Danh sách",active:u?.isActive("bulletList"),onClick:()=>u?.chain().focus().toggleBulletList().run(),children:e(T,{className:"h-3.5 w-3.5"})}),e(G,{title:"Danh sách số",active:u?.isActive("orderedList"),onClick:()=>u?.chain().focus().toggleOrderedList().run(),children:e(U,{className:"h-3.5 w-3.5"})}),e(S,{}),e(G,{title:"Căn trái",active:u?.isActive({textAlign:"left"}),onClick:()=>u?.chain().focus().setTextAlign("left").run(),children:e(H,{className:"h-3.5 w-3.5"})}),e(G,{title:"Căn giữa",active:u?.isActive({textAlign:"center"}),onClick:()=>u?.chain().focus().setTextAlign("center").run(),children:e(L,{className:"h-3.5 w-3.5"})}),e(G,{title:"Căn phải",active:u?.isActive({textAlign:"right"}),onClick:()=>u?.chain().focus().setTextAlign("right").run(),children:e(I,{className:"h-3.5 w-3.5"})}),e(S,{}),e(G,{title:"Đường kẻ ngang",onClick:()=>u?.chain().focus().setHorizontalRule().run(),children:e($,{className:"h-3.5 w-3.5"})})]}),d?e("div",{className:["min-h-[120px] max-h-[520px] overflow-y-auto p-4 text-sm text-gray-800 leading-relaxed bg-gray-50 cursor-not-allowed","prose prose-sm max-w-none","[&_h1]:text-xl [&_h1]:font-bold [&_h1]:mb-2","[&_h2]:text-lg [&_h2]:font-bold [&_h2]:mb-1.5","[&_h3]:text-base [&_h3]:font-semibold [&_h3]:mb-1","[&_ul]:list-disc [&_ul]:ml-5 [&_ol]:list-decimal [&_ol]:ml-5","[&_li]:mb-0.5","[&_strong]:font-bold [&_em]:italic [&_s]:line-through","[&_hr]:border-gray-300 [&_hr]:my-3"].join(" "),dangerouslySetInnerHTML:{__html:(p=s||"",p.replace(/\{(\d+)\}/g,(e,t)=>`<span style="display:inline-block;min-width:120px;padding:1px 5px;margin:0 4px;background:#eef2ff;border-bottom:2px solid #6366f1;color:#4f46e5;font-weight:700;font-size:0.85em;text-align:center;vertical-align:baseline;letter-spacing:2px">———(${Number(t)+1})———</span>`))}}):e(l,{editor:u})]}):null;var p}export function DocumentGroupCard({groupNumber:n,title:i,subtitle:a="",content:l,imageUrl:o,onTitleChange:r,onSubtitleChange:y,onContentChange:w,onImageChange:_,onImagePresignedUrlChange:C,groupConfig:k,uploadIdPrefix:A="document-group",isReadOnly:T=!1}){const U=k&&k.length>0,H=!U||k.includes("title"),L=!U||k.includes("subtitle"),I=!U||k.includes("content"),$=!U||k.includes("imageUrl"),{previewUrl:j}=x(o),O=j||"";return t(h,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-indigo-500 via-violet-500 to-purple-500"}),e(g,{className:"pb-4",children:t("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 shadow-md",children:e(b,{className:"h-5 w-5 text-white"})}),t("div",{className:"flex-1",children:[t("div",{className:"flex items-center gap-2",children:[e(u,{className:"text-lg font-bold text-gray-900",children:"Đoạn văn nhóm"}),t("span",{className:"inline-flex items-center rounded-full border border-indigo-300 bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700",children:["Nhóm ",n]})]}),t("p",{className:"text-sm text-gray-500",children:["Nội dung định dạng phong phú — dùng chung cho tất cả câu hỏi trong Nhóm ",n]})]})]})}),t(m,{className:"space-y-5",children:[H&&t("div",{className:"space-y-2",children:[t(d,{htmlFor:`${A}-title`,className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(f,{className:"h-4 w-4 text-indigo-500"}),"Tiêu đề nhóm"," ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),e(c,{id:`${A}-title`,value:i,onChange:e=>{T||r(e.target.value)},readOnly:T,placeholder:"Nhập tiêu đề nhóm câu hỏi…",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(T?"cursor-not-allowed border-transparent bg-gray-50 text-gray-500 focus:border-transparent focus:ring-0":"")})]}),L&&t("div",{className:"space-y-2",children:[t(d,{htmlFor:`${A}-subtitle`,className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(v,{className:"h-4 w-4 text-indigo-500"}),"Phụ đề"," ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),e(c,{id:`${A}-subtitle`,value:a,onChange:e=>{T||y?.(e.target.value)},readOnly:T,placeholder:"Nhập phụ đề hoặc mô tả ngắn…",className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(T?"cursor-not-allowed border-transparent bg-gray-50 text-gray-500 focus:border-transparent focus:ring-0":"")})]}),I&&t("div",{className:"space-y-2",children:[t(d,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(P,{className:"h-4 w-4 text-indigo-500"}),"Nội dung đoạn văn"," ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),e(z,{value:l,onChange:w,isReadOnly:T,placeholder:"Nhập đoạn văn, email, thông báo, quảng cáo… dùng chung cho nhóm câu hỏi này",uploadIdPrefix:A}),!T&&t("div",{className:"flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 px-3.5 py-2.5",children:[e(R,{className:"mt-0.5 h-4 w-4 shrink-0 text-amber-500"}),t("div",{className:"text-xs text-amber-800 leading-relaxed",children:[e("span",{className:"font-semibold",children:"Gợi ý (chỉ dành cho dạng điền từ):"})," ","Nếu đoạn văn có khoảng trống cần điền, hãy đánh dấu bằng"," ",e("code",{className:"rounded bg-amber-100 px-1 py-0.5 font-mono font-semibold text-amber-700",children:"{0}"}),","," ",e("code",{className:"rounded bg-amber-100 px-1 py-0.5 font-mono font-semibold text-amber-700",children:"{1}"}),","," ",e("code",{className:"rounded bg-amber-100 px-1 py-0.5 font-mono font-semibold text-amber-700",children:"{2}"}),"… — mỗi số tương ứng thứ tự câu hỏi trong nhóm. Với dạng bài đọc thông thường, bạn không cần dùng ký hiệu này."]})]})]}),$&&t("div",{className:"space-y-2",children:[t(d,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(N,{className:"h-4 w-4 text-indigo-500"}),"Hình ảnh nhóm"," ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn)"})]}),!T&&e(p,{id:`${A}-image`,label:"",accept:"image/*",value:o,onChange:e=>{T||_(e)},onPresignedUrlChange:C,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),O&&e(s,{src:O,alt:"Group image preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]})]})]})}
+'use client';
+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 TextAlign from '@tiptap/extension-text-align';
+import { ImagePreview } from '../../../components/ui/image-preview';
+import { Input } from '../../../components/ui/input';
+import { Label } from '../../../components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
+import { FileUpload } from '../../../components/ui/file-upload';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks';
+import { Layers, Type, Pilcrow, ImageIcon, Bold, Italic, Strikethrough, Heading1, Heading2, Heading3, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Minus, Undo2, Redo2, FileText, Info, } from 'lucide-react';
+// ---------------------------------------------------------------------------
+// Toolbar button
+// ---------------------------------------------------------------------------
+function ToolbarBtn({ onClick, active, disabled, title, children, }) {
+    return (_jsx("button", { type: "button", title: title, onClick: onClick, disabled: disabled, className: `flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors
+        ${active
+            ? 'bg-indigo-500 text-white shadow-sm'
+            : 'text-gray-600 hover:bg-gray-200 hover:text-gray-900'}
+        ${disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'}
+      `, children: children }));
+}
+function ToolbarSep() {
+    return _jsx("div", { className: "mx-0.5 h-5 w-px shrink-0 bg-gray-300" });
+}
+/** Replace `{0}`, `{1}`, … placeholders with a visible blank underline */
+function replacePlaceholdersWithBlanks(html) {
+    return html.replace(/\{(\d+)\}/g, (_match, num) => `<span style="display:inline-block;min-width:120px;padding:1px 5px;margin:0 4px;background:#eef2ff;border-bottom:2px solid #6366f1;color:#4f46e5;font-weight:700;font-size:0.85em;text-align:center;vertical-align:baseline;letter-spacing:2px">———(${Number(num) + 1})———</span>`);
+}
+function DocumentEditor({ value, onChange, isReadOnly = false, placeholder }) {
+    const [mounted, setMounted] = useState(false);
+    const editor = useEditor({
+        immediatelyRender: false,
+        editable: !isReadOnly,
+        extensions: [
+            StarterKit,
+            TextAlign.configure({ types: ['heading', 'paragraph'] }),
+        ],
+        // Always use raw value — never inject replaced HTML into the editor
+        content: value || '',
+        onUpdate: ({ editor }) => {
+            onChange(editor.getHTML());
+        },
+        editorProps: {
+            attributes: {
+                class: [
+                    'focus:outline-none min-h-[200px] max-h-[520px] overflow-y-auto p-4 text-sm text-gray-800 leading-relaxed',
+                    'prose prose-sm max-w-none',
+                    '[&_h1]:text-xl [&_h1]:font-bold [&_h1]:mb-2',
+                    '[&_h2]:text-lg [&_h2]:font-bold [&_h2]:mb-1.5',
+                    '[&_h3]:text-base [&_h3]:font-semibold [&_h3]:mb-1',
+                    '[&_ul]:list-disc [&_ul]:ml-5 [&_ol]:list-decimal [&_ol]:ml-5',
+                    '[&_li]:mb-0.5',
+                    '[&_strong]:font-bold [&_em]:italic [&_s]:line-through',
+                    '[&_hr]:border-gray-300 [&_hr]:my-3',
+                    'bg-white',
+                ].join(' '),
+                ...(placeholder && !value ? { 'data-placeholder': placeholder } : {}),
+            },
+        },
+    });
+    useEffect(() => { setMounted(true); }, []);
+    useEffect(() => {
+        if (editor && value !== undefined && value !== editor.getHTML()) {
+            // Always sync raw value — replacement is handled at render time for read-only display
+            setTimeout(() => editor.commands.setContent(value, { emitUpdate: false }), 0);
+        }
+    }, [value, editor]);
+    useEffect(() => {
+        editor?.setEditable(!isReadOnly);
+    }, [isReadOnly, editor]);
+    if (!mounted)
+        return null;
+    return (_jsxs("div", { className: `overflow-hidden rounded-sm border-2 transition-all ${isReadOnly
+            ? 'border-gray-200'
+            : 'border-gray-200 focus-within:border-indigo-400 focus-within:ring-2 focus-within:ring-indigo-100'}`, children: [!isReadOnly && (_jsxs("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-gray-200 bg-gray-50 px-2 py-1.5", children: [_jsx(ToolbarBtn, { title: "Ho\u00E0n t\u00E1c", onClick: () => editor?.chain().focus().undo().run(), disabled: !editor?.can().undo(), children: _jsx(Undo2, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "L\u00E0m l\u1EA1i", onClick: () => editor?.chain().focus().redo().run(), disabled: !editor?.can().redo(), children: _jsx(Redo2, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { title: "Ti\u00EAu \u0111\u1EC1 1", active: editor?.isActive('heading', { level: 1 }), onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(), children: _jsx(Heading1, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "Ti\u00EAu \u0111\u1EC1 2", active: editor?.isActive('heading', { level: 2 }), onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(), children: _jsx(Heading2, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "Ti\u00EAu \u0111\u1EC1 3", active: editor?.isActive('heading', { level: 3 }), onClick: () => editor?.chain().focus().toggleHeading({ level: 3 }).run(), children: _jsx(Heading3, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { title: "In \u0111\u1EADm", active: editor?.isActive('bold'), onClick: () => editor?.chain().focus().toggleBold().run(), children: _jsx(Bold, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "In nghi\u00EAng", active: editor?.isActive('italic'), onClick: () => editor?.chain().focus().toggleItalic().run(), children: _jsx(Italic, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "G\u1EA1ch ngang", active: editor?.isActive('strike'), onClick: () => editor?.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { title: "Danh s\u00E1ch", active: editor?.isActive('bulletList'), onClick: () => editor?.chain().focus().toggleBulletList().run(), children: _jsx(List, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "Danh s\u00E1ch s\u1ED1", active: editor?.isActive('orderedList'), onClick: () => editor?.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { title: "C\u0103n tr\u00E1i", active: editor?.isActive({ textAlign: 'left' }), onClick: () => editor?.chain().focus().setTextAlign('left').run(), children: _jsx(AlignLeft, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "C\u0103n gi\u1EEFa", active: editor?.isActive({ textAlign: 'center' }), onClick: () => editor?.chain().focus().setTextAlign('center').run(), children: _jsx(AlignCenter, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { title: "C\u0103n ph\u1EA3i", active: editor?.isActive({ textAlign: 'right' }), onClick: () => editor?.chain().focus().setTextAlign('right').run(), children: _jsx(AlignRight, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { title: "\u0110\u01B0\u1EDDng k\u1EBB ngang", onClick: () => editor?.chain().focus().setHorizontalRule().run(), children: _jsx(Minus, { className: "h-3.5 w-3.5" }) })] })), isReadOnly ? (
+            /* Read-only display: render replaced HTML but never push it into the editor */
+            _jsx("div", { className: [
+                    'min-h-[120px] max-h-[520px] overflow-y-auto p-4 text-sm text-gray-800 leading-relaxed bg-gray-50 cursor-not-allowed',
+                    'prose prose-sm max-w-none',
+                    '[&_h1]:text-xl [&_h1]:font-bold [&_h1]:mb-2',
+                    '[&_h2]:text-lg [&_h2]:font-bold [&_h2]:mb-1.5',
+                    '[&_h3]:text-base [&_h3]:font-semibold [&_h3]:mb-1',
+                    '[&_ul]:list-disc [&_ul]:ml-5 [&_ol]:list-decimal [&_ol]:ml-5',
+                    '[&_li]:mb-0.5',
+                    '[&_strong]:font-bold [&_em]:italic [&_s]:line-through',
+                    '[&_hr]:border-gray-300 [&_hr]:my-3',
+                ].join(' '), dangerouslySetInnerHTML: { __html: replacePlaceholdersWithBlanks(value || '') } })) : (_jsx(EditorContent, { editor: editor }))] }));
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * `DocumentGroupCard`
+ *
+ * Group header card that uses TipTap for structured rich-text content.
+ * Ideal for TOEIC Part 6 / Part 7 reading passages, emails, memos,
+ * advertisements and other formatted texts shared across a question group.
+ */
+export function DocumentGroupCard({ groupNumber, title, subtitle = '', content, imageUrl, onTitleChange, onSubtitleChange, onContentChange, onImageChange, onImagePresignedUrlChange, groupConfig, uploadIdPrefix = 'document-group', isReadOnly = false, }) {
+    const hasConfig = groupConfig && groupConfig.length > 0;
+    const showTitle = !hasConfig || groupConfig.includes('title');
+    const showSubtitle = !hasConfig || groupConfig.includes('subtitle');
+    const showContent = !hasConfig || groupConfig.includes('content');
+    const showImage = !hasConfig || groupConfig.includes('imageUrl');
+    const { previewUrl } = usePresignedFileUrl(imageUrl);
+    const displayPreviewUrl = previewUrl || '';
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-indigo-500 via-violet-500 to-purple-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 shadow-md", children: _jsx(Layers, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "\u0110o\u1EA1n v\u0103n nh\u00F3m" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-indigo-300 bg-indigo-100 px-2.5 py-0.5 text-xs font-semibold text-indigo-700", children: ["Nh\u00F3m ", groupNumber] })] }), _jsxs("p", { className: "text-sm text-gray-500", children: ["N\u1ED9i dung \u0111\u1ECBnh d\u1EA1ng phong ph\u00FA \u2014 d\u00F9ng chung cho t\u1EA5t c\u1EA3 c\u00E2u h\u1ECFi trong Nh\u00F3m ", groupNumber] })] })] }) }), _jsxs(CardContent, { className: "space-y-5", children: [showTitle && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-title`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-indigo-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-title`, value: title, onChange: (e) => { if (!isReadOnly)
+                                    onTitleChange(e.target.value); }, readOnly: isReadOnly, placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 nh\u00F3m c\u00E2u h\u1ECFi\u2026", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${isReadOnly ? 'cursor-not-allowed border-transparent bg-gray-50 text-gray-500 focus:border-transparent focus:ring-0' : ''}` })] })), showSubtitle && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: `${uploadIdPrefix}-subtitle`, className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Pilcrow, { className: "h-4 w-4 text-indigo-500" }), "Ph\u1EE5 \u0111\u1EC1", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(Input, { id: `${uploadIdPrefix}-subtitle`, value: subtitle, onChange: (e) => { if (!isReadOnly)
+                                    onSubtitleChange?.(e.target.value); }, readOnly: isReadOnly, placeholder: "Nh\u1EADp ph\u1EE5 \u0111\u1EC1 ho\u1EB7c m\u00F4 t\u1EA3 ng\u1EAFn\u2026", className: `border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${isReadOnly ? 'cursor-not-allowed border-transparent bg-gray-50 text-gray-500 focus:border-transparent focus:ring-0' : ''}` })] })), showContent && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(FileText, { className: "h-4 w-4 text-indigo-500" }), "N\u1ED9i dung \u0111o\u1EA1n v\u0103n", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), _jsx(DocumentEditor, { value: content, onChange: onContentChange, isReadOnly: isReadOnly, placeholder: "Nh\u1EADp \u0111o\u1EA1n v\u0103n, email, th\u00F4ng b\u00E1o, qu\u1EA3ng c\u00E1o\u2026 d\u00F9ng chung cho nh\u00F3m c\u00E2u h\u1ECFi n\u00E0y", uploadIdPrefix: uploadIdPrefix }), !isReadOnly && (_jsxs("div", { className: "flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 px-3.5 py-2.5", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-amber-500" }), _jsxs("div", { className: "text-xs text-amber-800 leading-relaxed", children: [_jsx("span", { className: "font-semibold", children: "G\u1EE3i \u00FD (ch\u1EC9 d\u00E0nh cho d\u1EA1ng \u0111i\u1EC1n t\u1EEB):" }), ' ', "N\u1EBFu \u0111o\u1EA1n v\u0103n c\u00F3 kho\u1EA3ng tr\u1ED1ng c\u1EA7n \u0111i\u1EC1n, h\u00E3y \u0111\u00E1nh d\u1EA5u b\u1EB1ng", ' ', _jsx("code", { className: "rounded bg-amber-100 px-1 py-0.5 font-mono font-semibold text-amber-700", children: '{0}' }), ",", ' ', _jsx("code", { className: "rounded bg-amber-100 px-1 py-0.5 font-mono font-semibold text-amber-700", children: '{1}' }), ",", ' ', _jsx("code", { className: "rounded bg-amber-100 px-1 py-0.5 font-mono font-semibold text-amber-700", children: '{2}' }), "\u2026 \u2014 m\u1ED7i s\u1ED1 t\u01B0\u01A1ng \u1EE9ng th\u1EE9 t\u1EF1 c\u00E2u h\u1ECFi trong nh\u00F3m. V\u1EDBi d\u1EA1ng b\u00E0i \u0111\u1ECDc th\u00F4ng th\u01B0\u1EDDng, b\u1EA1n kh\u00F4ng c\u1EA7n d\u00F9ng k\u00FD hi\u1EC7u n\u00E0y."] })] }))] })), showImage && (_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-indigo-500" }), "H\u00ECnh \u1EA3nh nh\u00F3m", ' ', _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn)" })] }), !isReadOnly && (_jsx(FileUpload, { id: `${uploadIdPrefix}-image`, label: "", accept: "image/*", value: imageUrl, onChange: (url) => { if (!isReadOnly)
+                                    onImageChange(url); }, onPresignedUrlChange: onImagePresignedUrlChange, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" })), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Group image preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] }))] })] }));
+}

package/dist/components/questions/groups/MatchAnswerGroupCard.js

@@ -1 +1,25 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as o}from"react";import{ImagePreview as l}from"../../../components/ui/image-preview";import{Button as n}from"../../../components/ui/button";import{Label as a}from"../../../components/ui/label";import{Input as t}from"../../../components/ui/input";import{Card as i,CardContent as s,CardHeader as p,CardTitle as c}from"../../../components/ui/card";import{FileUpload as d}from"../../../components/ui/file-upload";import{usePresignedFileUrl as m}from"../../../shared/lib/hooks";import{ImageIcon as h,Layers as u,Plus as g,Type as f,X as x}from"lucide-react";function v({option:l,index:a,canRemove:i,onUpdate:s,onRemove:p,groupConfig:c}){const[h,u]=o(""),{previewUrl:g}=m(l.imageUrl||""),f=h||g||"",v=!c||c.includes("answer"),b=c?.includes("content")??!1,N=!c||c.includes("imageUrl");return r("div",{className:"flex items-start gap-3 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/50 to-violet-50/50 p-4",children:[e("div",{className:"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 text-base font-bold text-white shadow-sm",children:a+1}),r("div",{className:"flex-1 space-y-3",children:[r("div",{className:"flex items-end gap-3",children:[v&&e("div",{className:"flex-1",children:e(t,{value:l.answer,onChange:e=>s(a,"answer",e.target.value),placeholder:`Nhãn (ví dụ: ${String.fromCharCode(65+a)} hoặc "a pineapple")`,className:"border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200"})}),b&&e("div",{className:"flex-1",children:e(t,{value:l.content||"",onChange:e=>s(a,"content",e.target.value),placeholder:"Nội dung (mô tả thêm cho đáp án)",className:"border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200"})}),N&&e("div",{className:"flex-1",children:e(d,{id:`option-image-${a}`,label:"",accept:"image/*",value:l.imageUrl||"",onChange:e=>s(a,"imageUrl",e),onPresignedUrlChange:u,maxSize:5,placeholder:"Upload ảnh cho đáp án",autoUpload:!0,prefix:"questions"})})]}),N&&f&&e("div",{className:"relative h-32 w-32 overflow-hidden rounded-lg border border-purple-200 bg-white shadow-sm",children:e("img",{src:f,alt:l.answer||`Option ${a+1}`,className:"h-full w-full object-contain"})})]}),i&&e(n,{variant:"ghost",size:"sm",onClick:()=>p(a),className:"flex-shrink-0 text-red-500 hover:bg-red-50 hover:text-red-700",children:e(x,{className:"h-4 w-4"})})]})}export function MatchAnswerGroupCard({currentGroupNumber:o,groupTitle:x,groupImageUrl:b,groupImagePreviewUrl:N,options:w,groupConfig:U,showGroupTitle:C,showGroupImageUrl:y,onGroupTitleChange:G,onGroupImageChange:j,onGroupImagePreviewUrlChange:R,onUpdateOption:T,onRemoveOption:k,onAddOption:I}){const{previewUrl:z}=m(b||""),O=N||z||"";return r(i,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50",children:[e(p,{className:"pb-3",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 shadow-md",children:e(u,{className:"h-5 w-5 text-white"})}),r("div",{className:"flex-1",children:[r("div",{className:"flex items-center gap-2",children:[e(c,{className:"text-lg font-bold text-gray-900",children:"Đáp án ghép nối"}),r("span",{className:"inline-flex items-center rounded-full border border-purple-300 bg-purple-100 px-2.5 py-0.5 text-xs font-semibold text-purple-700",children:["Nhóm ",o]})]}),e("p",{className:"text-sm text-gray-500",children:"Các đáp án (hình ảnh + nhãn) dùng để ghép nối với từng câu hỏi trong nhóm"})]})]})}),r(s,{className:"space-y-4",children:[C&&r("div",{className:"space-y-2 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/30 to-violet-50/30 p-4",children:[r(a,{htmlFor:"group-title",className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(f,{className:"h-4 w-4 text-purple-500"}),"Tiêu đề nhóm",e("span",{className:"text-xs font-normal text-gray-500",children:"(dùng chung cho cả nhóm)"})]}),e(t,{id:"group-title",value:x,onChange:e=>G(e.target.value),placeholder:"Nhập tiêu đề nhóm...",className:"border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200"})]}),y&&r("div",{className:"space-y-2 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/30 to-violet-50/30 p-4",children:[r(a,{className:"flex items-center gap-2 text-sm font-semibold text-gray-800",children:[e(h,{className:"h-4 w-4 text-purple-500"}),"Hình ảnh nhóm ",e("span",{className:"text-xs font-normal text-gray-500",children:"(Tùy chọn - dùng chung cho cả nhóm)"})]}),e(d,{id:"group-image",label:"",accept:"image/*",value:b||"",onChange:j,onPresignedUrlChange:R,maxSize:5,placeholder:"Upload ảnh nhóm hoặc paste URL",autoUpload:!0,prefix:"questions"}),O&&e(l,{src:O,alt:"Group image preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),e("div",{className:"space-y-4",children:w.map((r,o)=>e(v,{option:r,index:o,canRemove:w.length>2,onUpdate:T,onRemove:k,groupConfig:U},o))}),r(n,{variant:"outline",size:"sm",onClick:I,className:"gap-2 border-purple-300 text-purple-600 hover:bg-purple-50 hover:text-purple-700",children:[e(g,{className:"h-4 w-4"}),"Thêm đáp án (",w.length+1,")"]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ImagePreview } from '../../../components/ui/image-preview';
+import { Button } from '../../../components/ui/button';
+import { Label } from '../../../components/ui/label';
+import { Input } from '../../../components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
+import { FileUpload } from '../../../components/ui/file-upload';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks';
+import { ImageIcon, Layers, Plus, Type, X } from 'lucide-react';
+function OptionRow({ option, index, canRemove, onUpdate, onRemove, groupConfig, }) {
+    const [localPreviewUrl, setLocalPreviewUrl] = useState('');
+    const { previewUrl: presignedUrl } = usePresignedFileUrl(option.imageUrl || '');
+    const displayUrl = localPreviewUrl || presignedUrl || '';
+    const showAnswer = !groupConfig || groupConfig.includes('answer');
+    const showContent = groupConfig?.includes('content') ?? false;
+    const showImageUrl = !groupConfig || groupConfig.includes('imageUrl');
+    return (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/50 to-violet-50/50 p-4", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 text-base font-bold text-white shadow-sm", children: index + 1 }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsxs("div", { className: "flex items-end gap-3", children: [showAnswer && (_jsx("div", { className: "flex-1", children: _jsx(Input, { value: option.answer, onChange: (e) => onUpdate(index, 'answer', e.target.value), placeholder: `Nhãn (ví dụ: ${String.fromCharCode(65 + index)} hoặc "a pineapple")`, className: "border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200" }) })), showContent && (_jsx("div", { className: "flex-1", children: _jsx(Input, { value: option.content || '', onChange: (e) => onUpdate(index, 'content', e.target.value), placeholder: "N\u1ED9i dung (m\u00F4 t\u1EA3 th\u00EAm cho \u0111\u00E1p \u00E1n)", className: "border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200" }) })), showImageUrl && (_jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `option-image-${index}`, label: "", accept: "image/*", value: option.imageUrl || '', onChange: (url) => onUpdate(index, 'imageUrl', url), onPresignedUrlChange: setLocalPreviewUrl, maxSize: 5, placeholder: "Upload \u1EA3nh cho \u0111\u00E1p \u00E1n", autoUpload: true, prefix: "questions" }) }))] }), showImageUrl && displayUrl && (_jsx("div", { className: "relative h-32 w-32 overflow-hidden rounded-lg border border-purple-200 bg-white shadow-sm", children: _jsx("img", { src: displayUrl, alt: option.answer || `Option ${index + 1}`, className: "h-full w-full object-contain" }) }))] }), canRemove && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onRemove(index), className: "flex-shrink-0 text-red-500 hover:bg-red-50 hover:text-red-700", children: _jsx(X, { className: "h-4 w-4" }) }))] }));
+}
+export function MatchAnswerGroupCard({ currentGroupNumber, groupTitle, groupImageUrl, groupImagePreviewUrl, options, groupConfig, showGroupTitle, showGroupImageUrl, onGroupTitleChange, onGroupImageChange, onGroupImagePreviewUrlChange, onUpdateOption, onRemoveOption, onAddOption, }) {
+    const { previewUrl: groupImagePresignedUrl } = usePresignedFileUrl(groupImageUrl || '');
+    const displayGroupImageUrl = groupImagePreviewUrl || groupImagePresignedUrl || '';
+    return (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-violet-600 shadow-md", children: _jsx(Layers, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-bold text-gray-900", children: "\u0110\u00E1p \u00E1n gh\u00E9p n\u1ED1i" }), _jsxs("span", { className: "inline-flex items-center rounded-full border border-purple-300 bg-purple-100 px-2.5 py-0.5 text-xs font-semibold text-purple-700", children: ["Nh\u00F3m ", currentGroupNumber] })] }), _jsx("p", { className: "text-sm text-gray-500", children: "C\u00E1c \u0111\u00E1p \u00E1n (h\u00ECnh \u1EA3nh + nh\u00E3n) d\u00F9ng \u0111\u1EC3 gh\u00E9p n\u1ED1i v\u1EDBi t\u1EEBng c\u00E2u h\u1ECFi trong nh\u00F3m" })] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [showGroupTitle && (_jsxs("div", { className: "space-y-2 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/30 to-violet-50/30 p-4", children: [_jsxs(Label, { htmlFor: "group-title", className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(Type, { className: "h-4 w-4 text-purple-500" }), "Ti\u00EAu \u0111\u1EC1 nh\u00F3m", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(d\u00F9ng chung cho c\u1EA3 nh\u00F3m)" })] }), _jsx(Input, { id: "group-title", value: groupTitle, onChange: (e) => onGroupTitleChange(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 nh\u00F3m...", className: "border-purple-200 bg-white focus:border-purple-400 focus:ring-purple-200" })] })), showGroupImageUrl && (_jsxs("div", { className: "space-y-2 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50/30 to-violet-50/30 p-4", children: [_jsxs(Label, { className: "flex items-center gap-2 text-sm font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-purple-500" }), "H\u00ECnh \u1EA3nh nh\u00F3m ", _jsx("span", { className: "text-xs font-normal text-gray-500", children: "(T\u00F9y ch\u1ECDn - d\u00F9ng chung cho c\u1EA3 nh\u00F3m)" })] }), _jsx(FileUpload, { id: "group-image", label: "", accept: "image/*", value: groupImageUrl || '', onChange: onGroupImageChange, onPresignedUrlChange: onGroupImagePreviewUrlChange, maxSize: 5, placeholder: "Upload \u1EA3nh nh\u00F3m ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }), displayGroupImageUrl && (_jsx(ImagePreview, { src: displayGroupImageUrl, alt: "Group image preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] })), _jsx("div", { className: "space-y-4", children: options.map((option, index) => (_jsx(OptionRow, { option: option, index: index, canRemove: options.length > 2, onUpdate: onUpdateOption, onRemove: onRemoveOption, groupConfig: groupConfig }, index))) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: onAddOption, className: "gap-2 border-purple-300 text-purple-600 hover:bg-purple-50 hover:text-purple-700", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm \u0111\u00E1p \u00E1n (", options.length + 1, ")"] })] })] }));
+}

package/dist/components/questions/index.d.ts

@@ -8,3 +8,4 @@ export * from './groups/DocumentGroupCard';
 export * from './groups/MatchAnswerGroupCard';
 export * from './viewer';
 export * from './_shared';
+export * from './question-bank';

package/dist/components/questions/index.js

@@ -1 +1,11 @@
-export*from"./creator";export*from"./creator/dedicated-component-router";export*from"./creator/question-type-registry";export*from"./components";export*from"./groups/ArticlesGroupCard";export*from"./groups/BasicQuestionGroupCard";export*from"./groups/DocumentGroupCard";export*from"./groups/MatchAnswerGroupCard";export*from"./viewer";export*from"./_shared";
+export * from './creator';
+export * from './creator/dedicated-component-router';
+export * from './creator/question-type-registry';
+export * from './components';
+export * from './groups/ArticlesGroupCard';
+export * from './groups/BasicQuestionGroupCard';
+export * from './groups/DocumentGroupCard';
+export * from './groups/MatchAnswerGroupCard';
+export * from './viewer';
+export * from './_shared';
+export * from './question-bank';

package/dist/components/questions/question-bank/EditQuestionBankDialog.d.ts

@@ -0,0 +1,2 @@
+import type { EditQuestionBankDialogProps } from './types';
+export declare function EditQuestionBankDialog({ open, onOpenChange, question, onSave, saving, }: EditQuestionBankDialogProps): import("react").JSX.Element;