@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/types/word-fill-structured-form/WordFillStructuredFormCreator.d.ts

@@ -1,2 +1,4 @@
+import { Mark } from '@tiptap/core';
 import type { WordFillStructuredFormCreatorProps } from '../../_shared/types/word-fill-structured-form.type';
+export declare const TextStyleColor: Mark<any, any>;
 export declare function WordFillStructuredFormCreator({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange: _onUnsavedChangesChange, validationRef, externalErrors, groupConfig, groupType, groups, questionIndexInPart, partId, viewMode: viewModeProp, }: WordFillStructuredFormCreatorProps): import("react").JSX.Element;

package/dist/components/questions/types/word-fill-structured-form/WordFillStructuredFormCreator.js

@@ -1 +1,484 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as n,useEffect as r,useRef as a,useMemo as i,useCallback as s}from"react";import{useEditor as l,EditorContent as o}from"@tiptap/react";import c from"@tiptap/starter-kit";import d from"@tiptap/extension-text-align";import m from"@tiptap/extension-underline";import{Table as h,TableRow as g,TableCell as u,TableHeader as p}from"@tiptap/extension-table";import{List as f,ListOrdered as x,Bold as b,Italic as N,Underline as w,Strikethrough as v,AlignLeft as y,AlignCenter as C,AlignRight as k,TableIcon as I,Plus as S,Minus as T,Trash2 as O,Undo2 as A,Redo2 as B,BookOpen as H,Eye as U,Pencil as j,CheckCircle2 as W,PenLine as D,Info as P,MessageSquare as R,ImageIcon as _}from"lucide-react";import{Button as G}from"../../../../components/ui/button";import{Label as J}from"../../../../components/ui/label";import{Input as F}from"../../../../components/ui/input";import{Textarea as L}from"../../../../components/ui/textarea";import{Switch as E}from"../../../../components/ui/switch";import{PointsInput as K}from"../../../../components/ui/points-input";import{Card as M,CardContent as z,CardHeader as $,CardTitle as q}from"../../../../components/ui/card";import{FileUpload as V}from"../../../../components/ui/file-upload";import{ImagePreview as X}from"../../../../components/ui/image-preview";import{WordFillStructuredFormClient as Q}from"./WordFillStructuredFormClient";import{WfsfWordBankEditor as Y}from"./WfsfWordBankEditor";import{useDebouncedCallback as Z,usePresignedFileUrl as ee}from"../../../../shared/lib/hooks";import{BasicQuestionGroupCard as te}from"../../groups/BasicQuestionGroupCard";import{DocumentGroupCard as ne}from"../../groups/DocumentGroupCard";import{useBasicQuestionGroup as re,getGroupNumberForIndex as ae}from"../../_shared/hooks/useBasicQuestionGroup";import{bankPayloadForMode as ie,detectWfsfBankMode as se,emptySharedBank as le,normalizeOptionsWordBank as oe,normalizeSharedWordBank as ce}from"./wfsf-word-bank.utils";const de=({onClick:t,active:n,disabled:r,title:a,children:i,className:s=""})=>e("button",{type:"button",onClick:t,disabled:r,title:a,className:`inline-flex h-7 min-w-7 items-center justify-center rounded px-1.5 text-sm transition-colors disabled:opacity-30\n      ${n?"bg-teal-100 text-teal-700":"text-gray-500 hover:bg-gray-100 hover:text-gray-800"}\n      ${s}`,children:i}),me=()=>e("div",{className:"mx-1 h-4 w-px bg-gray-200"}),he=({editor:n})=>n?t("div",{className:"flex flex-wrap items-center gap-0.5 border-b border-gray-100 bg-gray-50/70 px-2 py-1.5 rounded-t-lg",children:[e(de,{onClick:()=>n.chain().focus().undo().run(),disabled:!n.can().chain().focus().undo().run(),title:"Hoàn tác",children:e(A,{className:"h-3.5 w-3.5"})}),e(de,{onClick:()=>n.chain().focus().redo().run(),disabled:!n.can().chain().focus().redo().run(),title:"Làm lại",children:e(B,{className:"h-3.5 w-3.5"})}),e(me,{}),e(de,{onClick:()=>n.chain().focus().toggleBold().run(),active:n.isActive("bold"),title:"Đậm",children:e(b,{className:"h-3.5 w-3.5"})}),e(de,{onClick:()=>n.chain().focus().toggleItalic().run(),active:n.isActive("italic"),title:"Nghiêng",children:e(N,{className:"h-3.5 w-3.5"})}),e(de,{onClick:()=>n.chain().focus().toggleUnderline().run(),active:n.isActive("underline"),title:"Gạch dưới",children:e(w,{className:"h-3.5 w-3.5"})}),e(de,{onClick:()=>n.chain().focus().toggleStrike().run(),active:n.isActive("strike"),title:"Gạch ngang",children:e(v,{className:"h-3.5 w-3.5"})}),e(me,{}),e(de,{onClick:()=>n.chain().focus().toggleHeading({level:2}).run(),active:n.isActive("heading",{level:2}),className:"px-2 text-xs font-bold",children:"H2"}),e(de,{onClick:()=>n.chain().focus().toggleHeading({level:3}).run(),active:n.isActive("heading",{level:3}),className:"px-2 text-xs font-bold",children:"H3"}),e(de,{onClick:()=>n.chain().focus().toggleHeading({level:4}).run(),active:n.isActive("heading",{level:4}),className:"px-2 text-xs font-bold",children:"H4"}),e(me,{}),e(de,{onClick:()=>n.chain().focus().toggleBulletList().run(),active:n.isActive("bulletList"),title:"Danh sách",children:e(f,{className:"h-3.5 w-3.5"})}),e(de,{onClick:()=>n.chain().focus().toggleOrderedList().run(),active:n.isActive("orderedList"),title:"Danh sách có số",children:e(x,{className:"h-3.5 w-3.5"})}),e(me,{}),e(de,{onClick:()=>n.chain().focus().setTextAlign("left").run(),active:n.isActive({textAlign:"left"}),title:"Trái",children:e(y,{className:"h-3.5 w-3.5"})}),e(de,{onClick:()=>n.chain().focus().setTextAlign("center").run(),active:n.isActive({textAlign:"center"}),title:"Giữa",children:e(C,{className:"h-3.5 w-3.5"})}),e(de,{onClick:()=>n.chain().focus().setTextAlign("right").run(),active:n.isActive({textAlign:"right"}),title:"Phải",children:e(k,{className:"h-3.5 w-3.5"})}),e(me,{}),t(de,{onClick:()=>n.chain().focus().insertTable({rows:5,cols:2,withHeaderRow:!1}).run(),title:"Chèn bảng 2 cột × 5 hàng",className:"gap-1 px-2 text-xs",children:[e(I,{className:"h-3.5 w-3.5"}),e("span",{className:"hidden sm:inline",children:"Bảng 2 cột"})]}),t(de,{onClick:()=>n.chain().focus().addRowAfter().run(),disabled:!n.can().addRowAfter(),title:"Thêm hàng",className:"gap-1 px-2 text-xs",children:[e(S,{className:"h-3 w-3"}),e("span",{className:"hidden sm:inline",children:"Hàng"})]}),t(de,{onClick:()=>n.chain().focus().deleteRow().run(),disabled:!n.can().deleteRow(),title:"Xóa hàng",className:"gap-1 px-2 text-xs",children:[e(T,{className:"h-3 w-3"}),e("span",{className:"hidden sm:inline",children:"Hàng"})]}),t(de,{onClick:()=>n.chain().focus().deleteTable().run(),disabled:!n.can().deleteTable(),title:"Xóa bảng",className:"gap-1 px-2 text-xs text-red-400 hover:text-red-600",children:[e(O,{className:"h-3 w-3"}),e("span",{className:"hidden sm:inline",children:"Bảng"})]})]}):null;export function WordFillStructuredFormCreator({initialData:f,onSave:b,onCancel:N,onChange:w,onUnsavedChangesChange:v,validationRef:y,externalErrors:C,groupConfig:k,groupType:I,groups:S,questionIndexInPart:T=0,partId:O="",viewMode:A}){const[B,de]=n(!1),[me,ge]=n(f?.points??1),[ue,pe]=n(f?.caseSensitive??!1),[fe,xe]=n(f?.instruction||f?.explanation||""),[be,Ne]=n(f?.explanation||""),[we,ve]=n(""),[ye,Ce]=n(f?.blankStyle),ke=se(f?.viewMode??A,f?.wordBank),[Ie,Se]=n(ke),[Te,Oe]=n(()=>"WITH_WORD_BANK"===ke?ce(f?.wordBank):[]),[Ae,Be]=n(()=>"WITH_OPTIONS"===ke?oe(f?.wordBank,Object.keys(f?.answers||{})):[]),{isGrouped:He,isFirstInGroup:Ue,currentGroupNumber:je,groupTitle:We,groupSubtitle:De,groupContent:Pe,imageUrl:Re,setGroupTitle:_e,setGroupSubtitle:Ge,setGroupContent:Je,setImageUrl:Fe}=re({partId:O,groups:S,questionIndexInPart:T,initialData:{title:f?.groupTitle||"",subtitle:f?.groupSubtitle||"",content:f?.groupContent||"",imageUrl:f?.groupImageUrl||""}}),Le=(I||"BASIC").toUpperCase(),Ee=!(k&&k.length>0)||k.includes("content"),Ke=je||ae(T,S),[Me,ze]=n(f?.title||""),[$e,qe]=n(f?.imageUrl||""),Ve=Me,Xe=$e,Qe=ze,Ye=qe,{previewUrl:Ze}=ee(Xe),et=we||Ze||"",tt=f?.content||"<p></p>",[nt,rt]=n(tt),[at,it]=n(f?.answers||{}),st=a(""),lt=a(f),ot=a(!1),ct=a(nt),dt=a(w);r(()=>{dt.current=w},[w]);const mt=i(()=>[c.configure({heading:{levels:[2,3,4]}}),m,d.configure({types:["heading","paragraph"]}),h.configure({resizable:!0}),g,u,p],[]),ht=i(()=>({attributes:{class:"tiptap-editor prose prose-sm max-w-none p-4 focus:outline-none min-h-[400px]"}}),[]),gt=s(({editor:e})=>{const t=e.getHTML();t!==ct.current&&(ct.current=t,rt(t))},[]),ut=l({immediatelyRender:!1,extensions:mt,content:nt,editorProps:ht,onUpdate:gt});r(()=>{ct.current=nt},[nt]),r(()=>{if(!(JSON.stringify(lt.current)!==JSON.stringify(f)))return;if(lt.current=f,!f?.content||"<p></p>"===f.content)return;ot.current=!0,ze(f?.title||""),qe(f?.imageUrl||""),ge(f?.points??1),pe(f?.caseSensitive??!1),xe(f?.instruction||f?.explanation||"");{const e=String(f?.instruction||f?.explanation||"").trim(),t=String(f?.explanation||"").trim();Ne(t&&t!==e?t:"")}it(f?.answers||{}),Ce(f?.blankStyle);const e=se(f?.viewMode??A,f?.wordBank);Se(e),"WITH_WORD_BANK"===e?Oe(ce(f?.wordBank)):"WITH_OPTIONS"===e?Be(oe(f?.wordBank,Object.keys(f?.answers||{}))):(Oe([]),Be([]));const t=f.content;t!==ct.current&&(ct.current=t,rt(t),ut&&!ut.isDestroyed&&ut.commands.setContent(t)),setTimeout(()=>{ot.current=!1},150)},[f,ut,A]);const pt=Z(e=>{dt.current?.(e)},300),ft=JSON.stringify(at),xt=i(()=>{const e=new Set,t=/\{([\w\d]+)\}/g;let n;for(;null!==(n=t.exec(nt));)e.add(n[1]);return Array.from(e).sort((e,t)=>{const n=parseInt(e),r=parseInt(t);return isNaN(n)||isNaN(r)?e.localeCompare(t):n-r})},[nt]);r(()=>{it(e=>{let t=!1;const n={...e};return Object.keys(n).forEach(e=>{xt.includes(e)||(delete n[e],t=!0)}),xt.forEach(e=>{e in n||(n[e]="",t=!0)}),t?n:e})},[xt]),r(()=>{"WITH_OPTIONS"===Ie&&Be(e=>{const t=oe(e,xt);return 0===e.length&&xt.length>0?xt.map(()=>null):JSON.stringify(e)===JSON.stringify(t)?e:t})},[Ie,xt]);const bt=JSON.stringify(Te),Nt=JSON.stringify(Ae),wt=s(()=>{const e=ie(Ie,Te,Ae);return{title:Ve,imageUrl:Xe,content:nt,answers:at,points:me,caseSensitive:ue,instruction:fe,explanation:be,blankStyle:ye,...e,groupTitle:We,groupSubtitle:De,groupContent:Pe,groupImageUrl:Re,groupNumber:Ke}},[Ie,Te,Ae,Ve,Xe,nt,at,me,ue,fe,be,ye,We,De,Pe,Re,Ke]),vt=s(e=>{Se(e),"WITH_WORD_BANK"===e?Oe(e=>e.length>0?e:le()):"WITH_OPTIONS"===e&&Be(e=>e.length===xt.length?e:e.length>0?oe(e,xt):xt.map(()=>({options:["",""]})))},[xt]);return r(()=>{const e=wt();if(ot.current)return void(st.current=JSON.stringify(e));const t=JSON.stringify(e);t!==st.current&&(st.current=t,pt(e))},[wt,ft,bt,Nt,Ie,ye]),r(()=>{y&&(y.current={triggerValidation:async()=>{if(!nt||"<p></p>"===nt)return!1;if(0===xt.length)return!1;for(const e of xt)if(!at[e]||""===at[e].trim())return!1;if("WITH_WORD_BANK"===Ie){if(Te.map(e=>e.word.trim()).filter(Boolean).length<1)return!1}if("WITH_OPTIONS"===Ie)for(let e=0;e<xt.length;e+=1){const t=Ae[e];if(null==t)continue;const n=t.options.map(e=>e.trim()).filter(Boolean);if(n.length<2)return!1;const r=xt[e],a=(at[r]||"").trim();if(a&&!n.includes(a))return!1}return!0},getFormData:()=>wt()})},[y,wt,nt,xt,at,Ie,Te,Ae]),t("div",B?{className:"space-y-4",children:[e(M,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:e($,{className:"px-4 py-3",children:t("div",{className:"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-cyan-600 shadow-sm",children:e(U,{className:"h-4 w-4 text-white"})}),t("div",{children:[e(q,{className:"text-base font-bold text-gray-900",children:"Điền từ – Xem trước"}),e("p",{className:"text-xs text-gray-500",children:"Chế độ xem trước với đáp án đúng đã được điền sẵn"})]})]}),t(G,{variant:"outline",size:"sm",onClick:()=>de(!1),className:"gap-2 border-teal-200 text-teal-700 hover:bg-teal-50",children:[e(j,{className:"h-4 w-4"}),"Quay lại Edit"]})]})})}),e(Q,{questionData:wt(),isReviewMode:!0,userAnswer:at,instruction:fe})]}:{className:"space-y-4",children:[He&&"BASIC"===Le&&e(te,{groupNumber:Ke,title:We,subtitle:De,content:Pe,imageUrl:Re,onTitleChange:_e,onSubtitleChange:Ge,onContentChange:Je,onImageChange:Fe,groupConfig:I?k:void 0,isReadOnly:!Ue,uploadIdPrefix:`word-fill-structured-${O??"group"}`}),He&&"DOCUMENT"===Le&&e(ne,{groupNumber:Ke,title:We,subtitle:De,content:Pe,imageUrl:Re,onTitleChange:_e,onSubtitleChange:Ge,onContentChange:Je,onImageChange:Fe,groupConfig:I?k:void 0,isReadOnly:!Ue,uploadIdPrefix:`word-fill-structured-${O??"document"}`}),t(M,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-teal-500 via-cyan-500 to-emerald-500"}),e($,{className:"px-4 py-3",children:t("div",{className:"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-gray-100",children:e(D,{className:"h-4 w-4 text-teal-600"})}),t("div",{children:[e(q,{className:"text-base font-bold text-gray-900",children:"Điền từ vào biểu mẫu có cấu trúc"}),t("p",{className:"text-xs text-gray-500",children:["Nhập nội dung, đặt chỗ trống bằng ","{0}"," ","{1}","… rồi điền đáp án bên dưới"]})]})]}),t(G,{variant:"outline",size:"sm",onClick:()=>de(!0),disabled:0===xt.length||xt.some(e=>!at[e]?.trim()),className:"gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700",children:[e(U,{className:"h-4 w-4"}),"Xem trước"]})]})}),t(z,{className:"space-y-4 px-4 pb-4",children:[t("div",{className:"space-y-2",children:[t(J,{htmlFor:"wfsf-instruction",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(P,{className:"h-4 w-4 text-teal-500"}),"Instruction",e("span",{className:"text-sm font-normal text-gray-500",children:"(hướng dẫn bài tập)"})]}),e(L,{id:"wfsf-instruction",value:fe,onChange:e=>xe(e.target.value),placeholder:"VD: Complete the words in the sentences. Use the words in the box.",rows:2,className:"min-h-[64px] resize-y border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100"})]}),t("div",{className:"flex flex-wrap items-center gap-3",children:[e(K,{value:me,onChange:e=>ge(Number(e.target.value)||1)}),t("div",{role:"button",tabIndex:0,onClick:()=>pe(!ue),onKeyDown:e=>{" "!==e.key&&"Enter"!==e.key||pe(!ue)},style:{paddingBlock:"calc(var(--spacing) * 1)"},className:"inline-flex cursor-pointer items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none "+(ue?"border-teal-300 bg-teal-50 text-teal-700":"border-gray-200 bg-white text-gray-400 hover:text-gray-600"),children:[e(E,{checked:ue,onCheckedChange:pe,className:ue?"data-[state=checked]:bg-teal-500 pointer-events-none":"pointer-events-none",tabIndex:-1}),"Phân biệt Hoa / thường"]})]}),t("div",{className:"space-y-2",children:[t(J,{htmlFor:"wfsf-title",className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(R,{className:"h-4 w-4 text-teal-500"}),"Tiêu đề",e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn)"})]}),e(F,{id:"wfsf-title",value:Ve,onChange:e=>Qe(e.target.value),placeholder:"Nhập tiêu đề câu hỏi...",className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100"})]}),t("div",{className:"space-y-2",children:[t(J,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(_,{className:"h-4 w-4 text-teal-500"}),"Hình ảnh",e("span",{className:"text-sm font-normal text-gray-500",children:"(tuỳ chọn)"})]}),e(V,{id:"wfsf-image",label:"",accept:"image/*",value:Xe||"",onChange:e=>Ye(e),onPresignedUrlChange:ve,maxSize:5,placeholder:"Upload ảnh hoặc paste URL",autoUpload:!0,prefix:"questions"}),et&&e(X,{src:et,alt:"Preview",className:"mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200"})]}),C&&C.length>0&&t("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:[e("div",{className:"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100",children:e("span",{className:"text-lg",children:"❌"})}),t("div",{className:"text-sm",children:[e("p",{className:"font-semibold text-red-800",children:"Lỗi:"}),e("ul",{className:"mt-1 list-inside list-disc text-red-700",children:C.map((t,n)=>e("li",{children:t},n))})]})]})]})]}),Ee&&t(M,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e($,{className:"px-4 py-3",children:t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-teal-100",children:e(x,{className:"h-3.5 w-3.5 text-teal-600"})}),e(q,{className:"text-base font-semibold text-gray-800",children:"Nội dung cấu trúc"})]}),xt.length>0&&t("span",{className:"inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-0.5 text-xs font-semibold text-teal-700",children:[xt.length," chỗ trống"]})]})}),t(z,{className:"space-y-3 px-4 pb-4",children:[t("div",{className:"overflow-hidden rounded-xl border border-gray-200 transition-all focus-within:border-teal-300 focus-within:ring-2 focus-within:ring-teal-100",children:[e(he,{editor:ut}),e(o,{editor:ut})]}),t("div",{className:"flex items-start gap-2 rounded-lg border border-teal-100 bg-teal-50/60 px-3 py-2.5",children:[e(P,{className:"mt-0.5 h-4 w-4 shrink-0 text-teal-500"}),t("p",{className:"text-xs text-teal-700",children:["Nhập ",e("strong",{children:"{0}"}),", ",e("strong",{children:"{1}"}),", ",e("strong",{children:"{2}"}),"… vào văn bản để tạo ô trống. Đáp án sẽ tự động xuất hiện bên dưới để bạn nhập."]})]})]})]}),e(Y,{mode:Ie,onModeChange:vt,sharedBank:Te,onSharedBankChange:Oe,optionsBank:Ae,onOptionsBankChange:Be,blankKeys:xt,answers:at,onAnswerChange:(e,t)=>it(n=>({...n,[e]:t}))}),xt.length>0&&"WITH_OPTIONS"!==Ie&&t(M,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50",children:[e($,{className:"px-4 py-3",children:t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-teal-100",children:e(W,{className:"h-3.5 w-3.5 text-teal-600"})}),t(q,{className:"text-base font-semibold text-gray-800",children:["Đáp án ",t("span",{className:"text-xs font-normal text-gray-500",children:["(",xt.length," chỗ trống)"]})]})]})}),t(z,{className:"px-4 pb-4",children:[e("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4",children:xt.map(n=>{const r=!at[n]||""===at[n].trim();return t("div",{className:"rounded-xl border-2 p-3 transition-all duration-200 "+(r?"border-gray-200 bg-white":"border-teal-200 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm shadow-teal-100"),children:[t(J,{className:"mb-1.5 flex items-center justify-between text-sm font-semibold text-gray-700",children:[t("span",{children:["Chỗ trống ",e("code",{className:"rounded bg-gray-100 px-1 text-teal-700",children:`{${n}}`})]}),r&&e("span",{className:"text-[10px] font-normal italic text-red-500",children:"*Bắt buộc"})]}),e(F,{value:at[n]||"",onChange:e=>it(t=>({...t,[n]:e.target.value})),placeholder:"Đáp án đúng...",className:"border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100 "+(r?"":"border-teal-200")}),!r&&t("span",{className:"mt-1.5 inline-flex items-center gap-1 rounded-full bg-teal-100 px-2 py-0.5 text-[10px] font-semibold text-teal-700",children:[e(W,{className:"h-3 w-3"}),"Đã nhập"]})]},n)})}),xt.some(e=>!at[e]?.trim())&&t("div",{className:"mt-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:[e("div",{className:"flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100",children:e("span",{className:"text-lg",children:"⚠️"})}),t("div",{className:"text-sm text-amber-800",children:[e("p",{className:"font-semibold",children:"Còn chỗ trống chưa có đáp án"}),t("p",{className:"mt-0.5 text-amber-700",children:["Vui lòng điền đáp án đúng cho tất cả các ô được đánh dấu ",e("span",{className:"text-red-500 font-medium",children:"*Bắt buộc"}),"."]})]})]})]})]}),t(M,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50",children:[e($,{className:"px-4 py-3",children:t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm",children:e(H,{className:"h-3.5 w-3.5 text-white"})}),t("div",{children:[t("div",{className:"flex items-center gap-2",children:[e(q,{className:"text-base font-semibold text-gray-800",children:"Giải thích"}),e("span",{className:"inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600",children:"Không bắt buộc"})]}),e("p",{className:"mt-0.5 text-xs text-gray-500",children:"Giải thích cho đáp án đúng — hiển thị sau khi học sinh hoàn thành câu hỏi"})]})]})}),e(z,{className:"px-4 pb-4",children:e(L,{value:be,onChange:e=>Ne(e.target.value),placeholder:"VD: Câu trả lời đúng là... vì...",rows:3,className:"min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200"})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
+import { Mark, mergeAttributes } from '@tiptap/core';
+import { List, ListOrdered, Bold, Italic, Underline as UnderlineIcon, Strikethrough, AlignLeft, AlignCenter, AlignRight, TableIcon, Plus, Minus, Trash2, Undo2, Redo2, BookOpen, Eye, Pencil, CheckCircle2, PenLine, Info, MessageSquare, ImageIcon, Volume2, Quote, Code, MinusSquare, Eraser, Palette } from 'lucide-react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Switch } from '../../../../components/ui/switch';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { ImagePreview } from '../../../../components/ui/image-preview';
+import { WordFillStructuredFormClient } from './WordFillStructuredFormClient';
+import { WfsfWordBankEditor } from './WfsfWordBankEditor';
+import { useDebouncedCallback, usePresignedFileUrl } from '../../../../shared/lib/hooks';
+import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
+import { DocumentGroupCard } from '../../groups/DocumentGroupCard';
+import { useBasicQuestionGroup, getGroupNumberForIndex } from '../../_shared/hooks/useBasicQuestionGroup';
+import { bankPayloadForMode, detectWfsfBankMode, emptySharedBank, normalizeOptionsWordBank, normalizeSharedWordBank, } from './wfsf-word-bank.utils';
+// ─────────────────────────────────────────────────────────────────────────────
+// TipTap Toolbar
+// ─────────────────────────────────────────────────────────────────────────────
+const ToolbarBtn = ({ onClick, active, disabled, title, children, className = '', }) => (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, title: title, className: `inline-flex h-7 min-w-7 items-center justify-center rounded px-1.5 text-sm transition-colors disabled:opacity-30
+      ${active
+        ? 'bg-teal-100 text-teal-700'
+        : 'text-gray-500 hover:bg-gray-100 hover:text-gray-800'}
+      ${className}`, children: children }));
+export const TextStyleColor = Mark.create({
+    name: 'textColor',
+    addAttributes() {
+        return {
+            color: {
+                default: null,
+                parseHTML: (element) => element.style.color || null,
+                renderHTML: (attributes) => {
+                    if (!attributes.color) {
+                        return {};
+                    }
+                    return {
+                        style: `color: ${attributes.color}`,
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'span[style]',
+                getAttrs: (element) => {
+                    const el = element;
+                    return el.style.color ? { color: el.style.color } : false;
+                },
+            },
+            {
+                tag: 'font[color]',
+                getAttrs: (element) => {
+                    const el = element;
+                    return el.getAttribute('color') ? { color: el.getAttribute('color') } : false;
+                },
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['span', mergeAttributes(HTMLAttributes), 0];
+    },
+});
+const COLOR_PRESETS = [
+    { label: 'Pearson Blue', color: '#0284c7' },
+    { label: 'Xanh dương', color: '#2563eb' },
+    { label: 'Đỏ', color: '#dc2626' },
+    { label: 'Xanh lá', color: '#16a34a' },
+    { label: 'Cam / Vàng', color: '#d97706' },
+    { label: 'Tím', color: '#9333ea' },
+    { label: 'Đen / Tối', color: '#0f172a' },
+];
+const ColorToolbarBtn = ({ editor }) => {
+    const currentColor = editor.getAttributes('textColor')?.color || '';
+    const [showMenu, setShowMenu] = useState(false);
+    const handleSetColor = (color) => {
+        if (!color) {
+            editor.chain().focus().unsetMark('textColor').run();
+        }
+        else {
+            editor.chain().focus().setMark('textColor', { color }).run();
+        }
+        setShowMenu(false);
+    };
+    return (_jsxs("div", { className: "relative inline-flex items-center", children: [_jsxs("button", { type: "button", onClick: () => setShowMenu((prev) => !prev), title: "\u0110\u1ED5i m\u00E0u ch\u1EEF", className: `inline-flex h-7 items-center justify-center gap-1.5 rounded px-2 text-xs transition-colors ${currentColor
+                    ? 'bg-amber-100 text-amber-800 font-semibold'
+                    : 'text-gray-600 hover:bg-gray-200 hover:text-gray-900'}`, children: [_jsx(Palette, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "h-3.5 w-3.5 rounded-full border border-gray-300 shadow-sm", style: { backgroundColor: currentColor || '#0f172a' } })] }), showMenu && (_jsxs("div", { className: "absolute left-0 top-full z-50 mt-1 flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-2.5 shadow-xl min-w-[170px]", children: [_jsx("div", { className: "text-[11px] font-medium text-gray-500 px-0.5", children: "M\u00E0u ch\u1EEF nhanh" }), _jsx("div", { className: "grid grid-cols-4 gap-1.5", children: COLOR_PRESETS.map((p) => (_jsx("button", { type: "button", title: p.label, onClick: () => handleSetColor(p.color), className: "h-6 w-6 rounded-full border border-gray-200 shadow-xs transition-transform hover:scale-110 focus:outline-none", style: { backgroundColor: p.color } }, p.color))) }), _jsxs("div", { className: "flex items-center justify-between gap-2 pt-1.5 border-t border-gray-100", children: [_jsxs("label", { className: "flex items-center gap-1.5 text-[11px] text-gray-600 cursor-pointer", children: [_jsx("span", { children: "T\u00F9y ch\u1ECDn:" }), _jsx("input", { type: "color", value: currentColor || '#000000', onChange: (e) => handleSetColor(e.target.value), className: "h-5 w-5 cursor-pointer rounded border-0 p-0" })] }), _jsx("button", { type: "button", onClick: () => handleSetColor(''), className: "text-[11px] font-medium text-red-500 hover:underline", children: "M\u1EB7c \u0111\u1ECBnh" })] })] }))] }));
+};
+const ToolbarSep = () => _jsx("div", { className: "mx-1 h-4 w-px bg-gray-200" });
+const EditorToolbar = ({ editor }) => {
+    if (!editor)
+        return null;
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-gray-100 bg-gray-50/70 px-2 py-1.5 rounded-t-lg", children: [_jsx(ToolbarBtn, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().chain().focus().undo().run(), title: "Ho\u00E0n t\u00E1c", children: _jsx(Undo2, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().chain().focus().redo().run(), title: "L\u00E0m l\u1EA1i", children: _jsx(Redo2, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive('bold'), title: "\u0110\u1EADm", children: _jsx(Bold, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive('italic'), title: "Nghi\u00EAng", children: _jsx(Italic, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleUnderline().run(), active: editor.isActive('underline'), title: "G\u1EA1ch d\u01B0\u1EDBi", children: _jsx(UnderlineIcon, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive('strike'), title: "G\u1EA1ch ngang", children: _jsx(Strikethrough, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive('code'), title: "M\u00E3 n\u1ED9i tuy\u1EBFn", children: _jsx(Code, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().unsetAllMarks().run(), title: "X\u00F3a \u0111\u1ECBnh d\u1EA1ng", children: _jsx(Eraser, { className: "h-3.5 w-3.5" }) }), _jsx(ColorToolbarBtn, { editor: editor }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), active: editor.isActive('heading', { level: 2 }), className: "px-2 text-xs font-bold", children: "H2" }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), active: editor.isActive('heading', { level: 3 }), className: "px-2 text-xs font-bold", children: "H3" }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleHeading({ level: 4 }).run(), active: editor.isActive('heading', { level: 4 }), className: "px-2 text-xs font-bold", children: "H4" }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleBulletList().run(), active: editor.isActive('bulletList'), title: "Danh s\u00E1ch", children: _jsx(List, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleOrderedList().run(), active: editor.isActive('orderedList'), title: "Danh s\u00E1ch c\u00F3 s\u1ED1", children: _jsx(ListOrdered, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().toggleBlockquote().run(), active: editor.isActive('blockquote'), title: "Tr\u00EDch d\u1EABn", children: _jsx(Quote, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().setHorizontalRule().run(), title: "\u0110\u01B0\u1EDDng k\u1EBB ngang", children: _jsx(MinusSquare, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().setTextAlign('left').run(), active: editor.isActive({ textAlign: 'left' }), title: "Tr\u00E1i", children: _jsx(AlignLeft, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().setTextAlign('center').run(), active: editor.isActive({ textAlign: 'center' }), title: "Gi\u1EEFa", children: _jsx(AlignCenter, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarBtn, { onClick: () => editor.chain().focus().setTextAlign('right').run(), active: editor.isActive({ textAlign: 'right' }), title: "Ph\u1EA3i", children: _jsx(AlignRight, { className: "h-3.5 w-3.5" }) }), _jsx(ToolbarSep, {}), _jsxs(ToolbarBtn, { onClick: () => editor.chain().focus().insertTable({ rows: 5, cols: 2, withHeaderRow: false }).run(), title: "Ch\u00E8n b\u1EA3ng 2 c\u1ED9t \u00D7 5 h\u00E0ng", className: "gap-1 px-2 text-xs", children: [_jsx(TableIcon, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "hidden sm:inline", children: "B\u1EA3ng 2 c\u1ED9t" })] }), _jsxs(ToolbarBtn, { onClick: () => editor.chain().focus().addRowAfter().run(), disabled: !editor.can().addRowAfter(), title: "Th\u00EAm h\u00E0ng", className: "gap-1 px-2 text-xs", children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: "H\u00E0ng" })] }), _jsxs(ToolbarBtn, { onClick: () => editor.chain().focus().deleteRow().run(), disabled: !editor.can().deleteRow(), title: "X\u00F3a h\u00E0ng", className: "gap-1 px-2 text-xs", children: [_jsx(Minus, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: "H\u00E0ng" })] }), _jsxs(ToolbarBtn, { onClick: () => editor.chain().focus().deleteTable().run(), disabled: !editor.can().deleteTable(), title: "X\u00F3a b\u1EA3ng", className: "gap-1 px-2 text-xs text-red-400 hover:text-red-600", children: [_jsx(Trash2, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: "B\u1EA3ng" })] })] }));
+};
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Creator
+function ImageUploadItem({ index, imageUrl, onChange, onRemove, }) {
+    const [previewOverride, setPreviewOverride] = useState('');
+    const { previewUrl: fetchedPreviewUrl } = usePresignedFileUrl(imageUrl);
+    const displayUrl = previewOverride ||
+        fetchedPreviewUrl ||
+        (typeof imageUrl === 'string' && (imageUrl.startsWith('http') || imageUrl.startsWith('blob:'))
+            ? imageUrl
+            : '');
+    return (_jsxs("div", { className: "rounded-lg border border-gray-200 bg-gray-50/40 p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `wfsf-image-${index}`, label: "", accept: "image/*", value: imageUrl, onChange: onChange, onPresignedUrlChange: setPreviewOverride, maxSize: 5, placeholder: "Upload \u1EA3nh ho\u1EB7c paste URL", autoUpload: true, prefix: "questions" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: onRemove, title: "Xo\u00E1 \u1EA3nh n\u00E0y", className: "h-8 w-8 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), displayUrl && (_jsx("div", { className: "pl-8", children: _jsx(ImagePreview, { src: displayUrl, alt: `Hình ảnh ${index + 1}`, className: "h-40 w-full max-w-sm rounded-lg border border-gray-200 object-contain bg-white" }) }))] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Creator
+// ─────────────────────────────────────────────────────────────────────────────
+export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange: _onUnsavedChangesChange, validationRef, externalErrors, groupConfig, groupType, groups, questionIndexInPart = 0, partId = '', viewMode: viewModeProp, }) {
+    const [isPreviewMode, setIsPreviewMode] = useState(false);
+    const [points, setPoints] = useState(initialData?.points ?? 1);
+    const [caseSensitive, setCaseSensitive] = useState(initialData?.caseSensitive ?? false);
+    // Page rubric (Pearson draft.instruction). Prefer instruction; legacy load may use explanation.
+    const [instruction, setInstruction] = useState(initialData?.instruction || initialData?.explanation || '');
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [blankStyle, setBlankStyle] = useState(initialData?.blankStyle);
+    // ── Multiple Images & Audios ────────────────────────────────────────────────
+    const [imageUrls, setImageUrls] = useState(() => {
+        if (Array.isArray(initialData?.imageUrls) && initialData.imageUrls.length > 0) {
+            return initialData.imageUrls.filter(Boolean);
+        }
+        if (initialData?.imageUrl)
+            return [initialData.imageUrl];
+        return [];
+    });
+    const [audioUrls, setAudioUrls] = useState(() => {
+        if (Array.isArray(initialData?.audioUrls) && initialData.audioUrls.length > 0) {
+            return initialData.audioUrls.filter(Boolean);
+        }
+        if (initialData?.audioUrl)
+            return [initialData.audioUrl];
+        return [];
+    });
+    const initialBankMode = detectWfsfBankMode(initialData?.viewMode ?? viewModeProp, initialData?.wordBank);
+    const [bankMode, setBankMode] = useState(initialBankMode);
+    const [sharedBank, setSharedBank] = useState(() => initialBankMode === 'WITH_WORD_BANK'
+        ? normalizeSharedWordBank(initialData?.wordBank)
+        : []);
+    const [optionsBank, setOptionsBank] = useState(() => initialBankMode === 'WITH_OPTIONS'
+        ? normalizeOptionsWordBank(initialData?.wordBank, Object.keys(initialData?.answers || {}))
+        : []);
+    // ── GROUP ──────────────────────────────────────────────────────────────────
+    const { isGrouped, isFirstInGroup, currentGroupNumber: hookGroupNumber, groupTitle, groupSubtitle, groupContent, imageUrl: groupImageUrl, setGroupTitle, setGroupSubtitle, setGroupContent, setImageUrl: setGroupImageUrl, } = useBasicQuestionGroup({
+        partId,
+        groups,
+        questionIndexInPart,
+        initialData: {
+            title: initialData?.groupTitle || '',
+            subtitle: initialData?.groupSubtitle || '',
+            content: initialData?.groupContent || '',
+            imageUrl: initialData?.groupImageUrl || '',
+        },
+    });
+    const effectiveGroupType = (groupType || 'BASIC').toUpperCase();
+    const hasGroupConfig = groupConfig && groupConfig.length > 0;
+    const showContent = !hasGroupConfig || groupConfig.includes('content');
+    const currentGroupNumber = hookGroupNumber || getGroupNumberForIndex(questionIndexInPart, groups);
+    const [localTitle, setLocalTitle] = useState(initialData?.title || '');
+    const effectiveTitle = localTitle;
+    const setEffectiveTitle = setLocalTitle;
+    // ── TipTap ─────────────────────────────────────────────────────────────────
+    const initialContent = initialData?.content || '<p></p>';
+    const [content, setContent] = useState(initialContent);
+    const [answers, setAnswers] = useState(initialData?.answers || {});
+    const previousPayloadRef = useRef('');
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    const contentRef = useRef(content);
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Stable TipTap options: @tiptap/react calls `editor.setOptions` whenever the
+    // passed options object differs from the editor instance. Inline `extensions`
+    // / `editorProps` are new references every render → spurious `setOptions` →
+    // document update → `onUpdate` → payload change → question flips to "Chưa lưu"
+    // when an unrelated parent re-render happens (e.g. part audio upload).
+    const tiptapExtensions = useMemo(() => [
+        StarterKit.configure({ heading: { levels: [2, 3, 4] } }),
+        Underline,
+        TextStyleColor,
+        TextAlign.configure({ types: ['heading', 'paragraph'] }),
+        Table.configure({ resizable: true }),
+        TableRow,
+        TableCell,
+        TableHeader,
+    ], []);
+    const tiptapEditorProps = useMemo(() => ({
+        attributes: {
+            class: 'tiptap-editor prose prose-sm max-w-none p-4 focus:outline-none min-h-[400px]',
+        },
+    }), []);
+    const handleEditorUpdate = useCallback(({ editor: ed }) => {
+        const html = ed.getHTML();
+        if (html !== contentRef.current) {
+            contentRef.current = html;
+            setContent(html);
+        }
+    }, []);
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: tiptapExtensions,
+        content,
+        editorProps: tiptapEditorProps,
+        onUpdate: handleEditorUpdate,
+    });
+    useEffect(() => {
+        contentRef.current = content;
+    }, [content]);
+    // Sync when initialData changes
+    useEffect(() => {
+        const changed = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (!changed)
+            return;
+        previousInitialDataRef.current = initialData;
+        if (!initialData?.content || initialData.content === '<p></p>')
+            return;
+        isInitializingRef.current = true;
+        setLocalTitle(initialData?.title || '');
+        const nextImages = Array.isArray(initialData?.imageUrls) && initialData.imageUrls.length > 0
+            ? initialData.imageUrls.filter(Boolean)
+            : (initialData?.imageUrl ? [initialData.imageUrl] : []);
+        setImageUrls(nextImages);
+        const nextAudios = Array.isArray(initialData?.audioUrls) && initialData.audioUrls.length > 0
+            ? initialData.audioUrls.filter(Boolean)
+            : (initialData?.audioUrl ? [initialData.audioUrl] : []);
+        setAudioUrls(nextAudios);
+        setPoints(initialData?.points ?? 1);
+        setCaseSensitive(initialData?.caseSensitive ?? false);
+        setInstruction(initialData?.instruction || initialData?.explanation || '');
+        // Only keep teacher explanation when distinct from page instruction
+        {
+            const nextInstruction = String(initialData?.instruction || initialData?.explanation || '').trim();
+            const nextExplanation = String(initialData?.explanation || '').trim();
+            setExplanation(nextExplanation && nextExplanation !== nextInstruction
+                ? nextExplanation
+                : '');
+        }
+        setAnswers(initialData?.answers || {});
+        setBlankStyle(initialData?.blankStyle);
+        const nextMode = detectWfsfBankMode(initialData?.viewMode ?? viewModeProp, initialData?.wordBank);
+        setBankMode(nextMode);
+        if (nextMode === 'WITH_WORD_BANK') {
+            setSharedBank(normalizeSharedWordBank(initialData?.wordBank));
+        }
+        else if (nextMode === 'WITH_OPTIONS') {
+            setOptionsBank(normalizeOptionsWordBank(initialData?.wordBank, Object.keys(initialData?.answers || {})));
+        }
+        else {
+            setSharedBank([]);
+            setOptionsBank([]);
+        }
+        const newContent = initialData.content;
+        if (newContent !== contentRef.current) {
+            contentRef.current = newContent;
+            setContent(newContent);
+            if (editor && !editor.isDestroyed)
+                editor.commands.setContent(newContent);
+        }
+        setTimeout(() => { isInitializingRef.current = false; }, 150);
+    }, [initialData, editor, viewModeProp]);
+    const debouncedOnChange = useDebouncedCallback((data) => {
+        onChangeRef.current?.(data);
+    }, 300);
+    const answersSerialized = JSON.stringify(answers);
+    // Derive expected blank keys from content
+    const expectedBlankKeys = useMemo(() => {
+        const keys = new Set();
+        const regex = /\{([\w\d]+)\}/g;
+        let match;
+        while ((match = regex.exec(content)) !== null)
+            keys.add(match[1]);
+        return Array.from(keys).sort((a, b) => {
+            const numA = parseInt(a), numB = parseInt(b);
+            if (!isNaN(numA) && !isNaN(numB))
+                return numA - numB;
+            return a.localeCompare(b);
+        });
+    }, [content]);
+    // Keep answers map in sync with blank keys
+    useEffect(() => {
+        setAnswers(prev => {
+            let changed = false;
+            const next = { ...prev };
+            Object.keys(next).forEach(k => { if (!expectedBlankKeys.includes(k)) {
+                delete next[k];
+                changed = true;
+            } });
+            expectedBlankKeys.forEach(k => { if (!(k in next)) {
+                next[k] = '';
+                changed = true;
+            } });
+            return changed ? next : prev;
+        });
+    }, [expectedBlankKeys]);
+    // Keep WITH_OPTIONS bank length aligned to blank keys
+    useEffect(() => {
+        if (bankMode !== 'WITH_OPTIONS')
+            return;
+        setOptionsBank((prev) => {
+            const next = normalizeOptionsWordBank(prev, expectedBlankKeys);
+            // Ensure new blanks default to free-type (null) only when length grew from empty
+            if (prev.length === 0 && expectedBlankKeys.length > 0) {
+                return expectedBlankKeys.map(() => null);
+            }
+            if (JSON.stringify(prev) === JSON.stringify(next))
+                return prev;
+            return next;
+        });
+    }, [bankMode, expectedBlankKeys]);
+    const sharedBankSerialized = JSON.stringify(sharedBank);
+    const optionsBankSerialized = JSON.stringify(optionsBank);
+    const buildFormData = useCallback(() => {
+        const bankSlice = bankPayloadForMode(bankMode, sharedBank, optionsBank);
+        const filteredImages = imageUrls.filter(Boolean);
+        const filteredAudios = audioUrls.filter(Boolean);
+        return {
+            title: effectiveTitle,
+            imageUrl: filteredImages[0] || '',
+            imageUrls: filteredImages,
+            audioUrl: filteredAudios[0] || '',
+            audioUrls: filteredAudios,
+            content,
+            answers,
+            points,
+            caseSensitive,
+            instruction,
+            explanation,
+            blankStyle,
+            ...bankSlice,
+            groupTitle,
+            groupSubtitle,
+            groupContent,
+            groupImageUrl,
+            groupNumber: currentGroupNumber,
+        };
+    }, [
+        bankMode,
+        sharedBank,
+        optionsBank,
+        effectiveTitle,
+        imageUrls,
+        audioUrls,
+        content,
+        answers,
+        points,
+        caseSensitive,
+        instruction,
+        explanation,
+        blankStyle,
+        groupTitle,
+        groupSubtitle,
+        groupContent,
+        groupImageUrl,
+        currentGroupNumber,
+    ]);
+    const handleBankModeChange = useCallback((next) => {
+        setBankMode(next);
+        if (next === 'WITH_WORD_BANK') {
+            setSharedBank((prev) => prev.length > 0 ? prev : emptySharedBank());
+        }
+        else if (next === 'WITH_OPTIONS') {
+            setOptionsBank((prev) => {
+                if (prev.length === expectedBlankKeys.length)
+                    return prev;
+                if (prev.length > 0) {
+                    return normalizeOptionsWordBank(prev, expectedBlankKeys);
+                }
+                return expectedBlankKeys.map(() => ({ options: ['', ''] }));
+            });
+        }
+    }, [expectedBlankKeys]);
+    // Emit changes (unsaved status is driven only by `onChange` → ExamCreator)
+    useEffect(() => {
+        const payload = buildFormData();
+        if (isInitializingRef.current) {
+            previousPayloadRef.current = JSON.stringify(payload);
+            return;
+        }
+        const str = JSON.stringify(payload);
+        if (str !== previousPayloadRef.current) {
+            previousPayloadRef.current = str;
+            debouncedOnChange(payload);
+        }
+    }, [
+        buildFormData,
+        answersSerialized,
+        sharedBankSerialized,
+        optionsBankSerialized,
+        bankMode,
+        blankStyle,
+    ]);
+    // Expose validation
+    useEffect(() => {
+        if (!validationRef)
+            return;
+        validationRef.current = {
+            triggerValidation: async () => {
+                if (!content || content === '<p></p>')
+                    return false;
+                if (expectedBlankKeys.length === 0)
+                    return false;
+                for (const key of expectedBlankKeys) {
+                    if (!answers[key] || answers[key].trim() === '')
+                        return false;
+                }
+                if (bankMode === 'WITH_WORD_BANK') {
+                    const words = sharedBank.map((w) => w.word.trim()).filter(Boolean);
+                    if (words.length < 1)
+                        return false;
+                }
+                if (bankMode === 'WITH_OPTIONS') {
+                    for (let i = 0; i < expectedBlankKeys.length; i += 1) {
+                        const entry = optionsBank[i];
+                        if (entry == null)
+                            continue;
+                        const opts = entry.options
+                            .map((o) => o.trim())
+                            .filter(Boolean);
+                        if (opts.length < 2)
+                            return false;
+                        const key = expectedBlankKeys[i];
+                        const ans = (answers[key] || '').trim();
+                        if (ans && !opts.includes(ans))
+                            return false;
+                    }
+                }
+                return true;
+            },
+            getFormData: () => buildFormData(),
+        };
+    }, [
+        validationRef,
+        buildFormData,
+        content,
+        expectedBlankKeys,
+        answers,
+        bankMode,
+        sharedBank,
+        optionsBank,
+    ]);
+    // ── Preview mode ───────────────────────────────────────────────────────────
+    if (isPreviewMode) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-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-gradient-to-br from-teal-500 to-cyan-600 shadow-sm", children: _jsx(Eye, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB \u2013 Xem tr\u01B0\u1EDBc" }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc v\u1EDBi \u0111\u00E1p \u00E1n \u0111\u00FAng \u0111\u00E3 \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(false), className: "gap-2 border-teal-200 text-teal-700 hover:bg-teal-50", children: [_jsx(Pencil, { className: "h-4 w-4" }), "Quay l\u1EA1i Edit"] })] }) }) }), _jsx(WordFillStructuredFormClient, { questionData: buildFormData(), isReviewMode: true, userAnswer: answers, instruction: instruction })] }));
+    }
+    // ── Edit mode ──────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: "space-y-4", children: [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: `word-fill-structured-${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: `word-fill-structured-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-500 via-cyan-500 to-emerald-500" }), _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(PenLine, { className: "h-4 w-4 text-teal-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o bi\u1EC3u m\u1EABu c\u00F3 c\u1EA5u tr\u00FAc" }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Nh\u1EADp n\u1ED9i dung, \u0111\u1EB7t ch\u1ED7 tr\u1ED1ng b\u1EB1ng ", `{0}`, " ", `{1}`, "\u2026 r\u1ED3i \u0111i\u1EC1n \u0111\u00E1p \u00E1n b\u00EAn d\u01B0\u1EDBi"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(true), disabled: expectedBlankKeys.length === 0 || expectedBlankKeys.some(k => !answers[k]?.trim()), className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-instruction", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Info, { className: "h-4 w-4 text-teal-500" }), "Instruction", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(h\u01B0\u1EDBng d\u1EABn b\u00E0i t\u1EADp)" })] }), _jsx(Textarea, { id: "wfsf-instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "VD: Complete the words in the sentences. Use the words in the box.", rows: 2, className: "min-h-[64px] resize-y border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }), _jsxs("div", { role: "button", tabIndex: 0, onClick: () => setCaseSensitive(!caseSensitive), onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter')
+                                            setCaseSensitive(!caseSensitive); }, style: { paddingBlock: 'calc(var(--spacing) * 1)' }, className: `inline-flex cursor-pointer items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${caseSensitive
+                                            ? 'border-teal-300 bg-teal-50 text-teal-700'
+                                            : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Switch, { checked: caseSensitive, onCheckedChange: setCaseSensitive, className: caseSensitive ? 'data-[state=checked]:bg-teal-500 pointer-events-none' : 'pointer-events-none', tabIndex: -1 }), "Ph\u00E2n bi\u1EC7t Hoa / th\u01B0\u1EDDng"] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Input, { id: "wfsf-title", value: effectiveTitle, onChange: (e) => setEffectiveTitle(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 c\u00E2u h\u1ECFi...", className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-teal-500" }), "File \u00E2m thanh (Audio)", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setAudioUrls((prev) => [...prev, '']), 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 audio"] })] }), audioUrls.length === 0 ? (_jsx("div", { className: "flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: _jsx("span", { children: "Ch\u01B0a c\u00F3 file audio. Nh\u1EA5n \"Th\u00EAm audio\" \u0111\u1EC3 upload file nghe cho c\u00E2u h\u1ECFi." }) })) : (_jsx("div", { className: "space-y-2.5", children: audioUrls.map((audioUrl, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50/30 p-2.5", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `wfsf-audio-${index}`, label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
+                                                            setAudioUrls((prev) => {
+                                                                const next = [...prev];
+                                                                next[index] = url;
+                                                                return next;
+                                                            });
+                                                        }, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, showPlayButton: true, prefix: "audio" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => {
+                                                        setAudioUrls((prev) => prev.filter((_, idx) => idx !== index));
+                                                    }, title: "Xo\u00E1 audio n\u00E0y", className: "h-8 w-8 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))) }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", 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-teal-500" }), "H\u00ECnh \u1EA3nh (Images)", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setImageUrls((prev) => [...prev, '']), 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"] })] }), imageUrls.length === 0 ? (_jsx("div", { className: "flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: _jsx("span", { 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: imageUrls.map((imageUrl, index) => (_jsx(ImageUploadItem, { index: index, imageUrl: imageUrl, onChange: (url) => {
+                                                setImageUrls((prev) => {
+                                                    const next = [...prev];
+                                                    next[index] = url;
+                                                    return next;
+                                                });
+                                            }, onRemove: () => {
+                                                setImageUrls((prev) => prev.filter((_, idx) => idx !== index));
+                                            } }, index))) }))] }), 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 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, i) => _jsx("li", { children: error }, i)) })] })] }))] })] }), showContent && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-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-teal-100", children: _jsx(ListOrdered, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "N\u1ED9i dung c\u1EA5u tr\u00FAc" })] }), expectedBlankKeys.length > 0 && (_jsxs("span", { className: "inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-0.5 text-xs font-semibold text-teal-700", children: [expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng"] }))] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 transition-all focus-within:border-teal-300 focus-within:ring-2 focus-within:ring-teal-100", children: [_jsx(EditorToolbar, { editor: editor }), _jsx(EditorContent, { editor: editor })] }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-teal-100 bg-teal-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-teal-500" }), _jsxs("p", { className: "text-xs text-teal-700", children: ["Nh\u1EADp ", _jsx("strong", { children: `{0}` }), ", ", _jsx("strong", { children: `{1}` }), ", ", _jsx("strong", { children: `{2}` }), "\u2026 v\u00E0o v\u0103n b\u1EA3n \u0111\u1EC3 t\u1EA1o \u00F4 tr\u1ED1ng. \u0110\u00E1p \u00E1n s\u1EBD t\u1EF1 \u0111\u1ED9ng xu\u1EA5t hi\u1EC7n b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 b\u1EA1n nh\u1EADp."] })] })] })] })), _jsx(WfsfWordBankEditor, { mode: bankMode, onModeChange: handleBankModeChange, sharedBank: sharedBank, onSharedBankChange: setSharedBank, optionsBank: optionsBank, onOptionsBankChange: setOptionsBank, blankKeys: expectedBlankKeys, answers: answers, onAnswerChange: (key, value) => setAnswers((prev) => ({ ...prev, [key]: value })) }), expectedBlankKeys.length > 0 && bankMode !== 'WITH_OPTIONS' && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", 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-teal-100", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng)"] })] })] }) }), _jsxs(CardContent, { className: "px-4 pb-4", children: [_jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4", children: expectedBlankKeys.map((key) => {
+                                    const isEmpty = !answers[key] || answers[key].trim() === '';
+                                    return (_jsxs("div", { className: `rounded-xl border-2 p-3 transition-all duration-200 ${isEmpty
+                                            ? 'border-gray-200 bg-white'
+                                            : 'border-teal-200 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm shadow-teal-100'}`, children: [_jsxs(Label, { className: "mb-1.5 flex items-center justify-between text-sm font-semibold text-gray-700", children: [_jsxs("span", { children: ["Ch\u1ED7 tr\u1ED1ng ", _jsx("code", { className: "rounded bg-gray-100 px-1 text-teal-700", children: `{${key}}` })] }), isEmpty && (_jsx("span", { className: "text-[10px] font-normal italic text-red-500", children: "*B\u1EAFt bu\u1ED9c" }))] }), _jsx(Input, { value: answers[key] || '', onChange: e => setAnswers(prev => ({ ...prev, [key]: e.target.value })), placeholder: "\u0110\u00E1p \u00E1n \u0111\u00FAng...", className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100 ${!isEmpty ? 'border-teal-200' : ''}` }), !isEmpty && (_jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 rounded-full bg-teal-100 px-2 py-0.5 text-[10px] font-semibold text-teal-700", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), "\u0110\u00E3 nh\u1EADp"] }))] }, key));
+                                }) }), expectedBlankKeys.some(k => !answers[k]?.trim()) && (_jsxs("div", { className: "mt-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "C\u00F2n ch\u1ED7 tr\u1ED1ng ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n" }), _jsxs("p", { className: "mt-0.5 text-amber-700", children: ["Vui l\u00F2ng \u0111i\u1EC1n \u0111\u00E1p \u00E1n \u0111\u00FAng cho t\u1EA5t c\u1EA3 c\u00E1c \u00F4 \u0111\u01B0\u1EE3c \u0111\u00E1nh d\u1EA5u ", _jsx("span", { className: "text-red-500 font-medium", children: "*B\u1EAFt bu\u1ED9c" }), "."] })] })] }))] })] })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", 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-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] }));
+}

package/dist/components/questions/types/word-fill-structured-form/index.d.ts

@@ -1,2 +1,3 @@
 export { WordFillStructuredFormCreator } from './WordFillStructuredFormCreator';
 export { WordFillStructuredFormClient } from './WordFillStructuredFormClient';
+export { mapQuestionToWfsfData } from './map-wfsf-question-data';

package/dist/components/questions/types/word-fill-structured-form/index.js

@@ -1 +1,3 @@
-export{WordFillStructuredFormCreator}from"./WordFillStructuredFormCreator";export{WordFillStructuredFormClient}from"./WordFillStructuredFormClient";
+export { WordFillStructuredFormCreator } from './WordFillStructuredFormCreator';
+export { WordFillStructuredFormClient } from './WordFillStructuredFormClient';
+export { mapQuestionToWfsfData } from './map-wfsf-question-data';

package/dist/components/questions/types/word-fill-structured-form/map-wfsf-question-data.d.ts

@@ -0,0 +1,7 @@
+import type { WordFillStructuredFormData } from '../../_shared/types/word-fill-structured-form.type';
+export declare function extractWfsfBlankKeys(html: string): string[];
+/**
+ * Map preview / exam / creator payloads onto WordFillStructuredFormClient data.
+ * School preview puts answers on `answer` + `correctAnswer`; creator uses `answer`.
+ */
+export declare function mapQuestionToWfsfData(question: Record<string, unknown> | null | undefined): WordFillStructuredFormData;