Navigation rework, added prompt edit to components that were missing

src/components/ExamEditor/Exercises/Blanks/index.tsx

@@ -19,6 +19,7 @@ import clsx from "clsx";
 import { Card, CardContent } from "@/components/ui/card";
 import { Blank, DropZone } from "./DragNDrop";
 import { getTextSegments, BlankState, BlanksState, BlanksAction, BlankToken } from "./BlanksReducer";
+import PromptEdit from "../Shared/PromptEdit";
 
 
 interface Props {
@@ -30,6 +31,8 @@ interface Props {
     editing: boolean;
     showBlankBank: boolean;
     alerts: AlertItem[];
+    prompt: string;
+    updatePrompt: (prompt: string) => void;
     setEditing: React.Dispatch<React.SetStateAction<boolean>>;
     blanksDispatcher: React.Dispatch<BlanksAction>
     onBlankSelect?: (blankId: number | null) => void;
@@ -42,25 +45,27 @@ interface Props {
     children: ReactNode;
 }
 
-const BlanksEditor: React.FC<Props> = ({ 
+const BlanksEditor: React.FC<Props> = ({
     title = "Fill Blanks",
     initialText,
     description,
     state,
     editing,
     module,
-    children, 
+    children,
     showBlankBank = true,
     alerts,
-    blanksDispatcher, 
+    blanksDispatcher,
     onBlankSelect,
     onBlankRemove,
-    onSave, 
-    onDiscard, 
+    onSave,
+    onDiscard,
     onDelete,
     onPractice,
     isEvaluationEnabled,
-    setEditing
+    setEditing,
+    prompt,
+    updatePrompt
 }) => {
 
     useEffect(() => {
@@ -105,21 +110,21 @@ const BlanksEditor: React.FC<Props> = ({
     const handleTextChange = useCallback(
         (newText: string) => {
             const processedText = newText.replace(/\[(\d+)\]/g, "{{$1}}");
-            
+
             const existingBlankIds = getTextSegments(state.text)
                 .filter(token => token.type === 'blank')
                 .map(token => (token as BlankToken).id);
-                
+
             const newBlankIds = getTextSegments(processedText)
                 .filter(token => token.type === 'blank')
                 .map(token => (token as BlankToken).id);
-                
+
             const removedBlankIds = existingBlankIds.filter(id => !newBlankIds.includes(id));
-            
+
             removedBlankIds.forEach(id => {
                 onBlankRemove(id);
             });
-    
+
             blanksDispatcher({ type: "SET_TEXT", payload: processedText });
         },
         [blanksDispatcher, state.text, onBlankRemove]
@@ -171,10 +176,11 @@ const BlanksEditor: React.FC<Props> = ({
                 isEvaluationEnabled={isEvaluationEnabled}
             />
             {alerts.length > 0 && <Alert alerts={alerts} />}
+            <PromptEdit value={prompt} onChange={(text: string) => updatePrompt(text)} />
             <Card>
                 <CardContent className="p-4 text-white font-semibold flex gap-2">
                     <button
-                        onClick={() => blanksDispatcher({ type: "ADD_BLANK" }) }
+                        onClick={() => blanksDispatcher({ type: "ADD_BLANK" })}
                         className={`px-3 py-1.5 bg-ielts-${module} rounded-md hover:bg-ielts-${module}/50 transition-colors`}
                     >
                         Add Blank
@@ -203,7 +209,7 @@ const BlanksEditor: React.FC<Props> = ({
                         {state.textMode ? (
                             <AutoExpandingTextArea
                                 value={state.text.replace(/{{(\d+)}}/g, "[$1]")}
-                                onChange={(text) => { handleTextChange(text); if (!editing) setEditing(true) } }
+                                onChange={(text) => { handleTextChange(text); if (!editing) setEditing(true) }}
                                 className="w-full h-full min-h-[200px] p-2 bg-white border rounded-md"
                                 placeholder="Enter text here. Use [1], [2], etc. for blanks..."
                             />