Listening preview and some more patches

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

@@ -17,6 +17,7 @@ import setEditingAlert from '../Shared/setEditingAlert';
 import { toast } from 'react-toastify';
 import { DragEndEvent } from '@dnd-kit/core';
 import { handleMatchSentencesReorder } from '@/stores/examEditor/reorder/local';
+import PromptEdit from '../Shared/PromptEdit';
 
 const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: number }> = ({ exercise, sectionId }) => {
   const { currentModule, dispatch } = useExamEditorStore();
@@ -31,6 +32,11 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
   const [showReference, setShowReference] = useState(false);
   const [alerts, setAlerts] = useState<AlertItem[]>([]);
 
+  const updateLocal = (exercise: MatchSentencesExercise) => {
+    setLocal(exercise);
+    setEditing(true);
+  };
+
   const { editing, setEditing, handleSave, handleDiscard, modeHandle } = useSectionEdit({
     sectionId,
     onSave: () => {
@@ -73,9 +79,8 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
   }, [local.sentences]);
 
   const addHeading = () => {
-    setEditing(true);
     const newId = (parseInt(local.sentences[local.sentences.length - 1].id) + 1).toString();
-    setLocal({
+    updateLocal({
       ...local,
       sentences: [
         ...local.sentences,
@@ -89,7 +94,6 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
   };
 
   const updateHeading = (index: number, field: string, value: string) => {
-    setEditing(true);
     const newSentences = [...local.sentences];
 
     if (field === 'solution') {
@@ -100,11 +104,10 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
     }
 
     newSentences[index] = { ...newSentences[index], [field]: value };
-    setLocal({ ...local, sentences: newSentences });
+    updateLocal({ ...local, sentences: newSentences });
   };
 
   const deleteHeading = (index: number) => {
-    setEditing(true);
     if (local.sentences.length <= 1) {
       toast.error(`There needs to be at least one ${exercise.variant && exercise.variant == "ideaMatch" ? "idea/opinion" : "heading"}!`);
       return;
@@ -116,7 +119,7 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
     }
 
     const newSentences = local.sentences.filter((_, i) => i !== index);
-    setLocal({ ...local, sentences: newSentences });
+    updateLocal({ ...local, sentences: newSentences });
   };
 
   useEffect(() => {
@@ -129,8 +132,7 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
 
 
   const handleDragEnd = (event: DragEndEvent) => {
-    setEditing(true);
-    setLocal(handleMatchSentencesReorder(event, local));
+    updateLocal(handleMatchSentencesReorder(event, local));
   }
 
   return (
@@ -154,6 +156,10 @@ const MatchSentences: React.FC<{ exercise: MatchSentencesExercise, sectionId: nu
 
       <div className="space-y-4">
         {alerts.length > 0 && <Alert alerts={alerts} />}
+        <PromptEdit
+          value={local.prompt}
+          onChange={(text) => updateLocal({ ...local, prompt: text })}
+        />
         <QuestionsList
           ids={local.sentences.map(s => s.id)}
           handleDragEnd={handleDragEnd}