Blanks Exercises were removing the blanks on the editor and text but not on solutions, added submit and preview to writing and reading

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

@@ -18,7 +18,7 @@ import Alert, { AlertItem } from "../Shared/Alert";
 import clsx from "clsx";
 import { Card, CardContent } from "@/components/ui/card";
 import { Blank, DropZone } from "./DragNDrop";
-import { getTextSegments, BlankState, BlanksState, BlanksAction } from "./FillBlanksReducer";
+import { getTextSegments, BlankState, BlanksState, BlanksAction } from "./BlanksReducer";
 
 
 interface Props {
@@ -33,6 +33,7 @@ interface Props {
     setEditing: React.Dispatch<React.SetStateAction<boolean>>;
     blanksDispatcher: React.Dispatch<BlanksAction>
     onBlankSelect?: (blankId: number | null) => void;
+    onBlankRemove: (blankId: number) => void;
     onSave: () => void;
     onDiscard: () => void;
     onDelete: () => void;
@@ -51,6 +52,7 @@ const BlanksEditor: React.FC<Props> = ({
     alerts,
     blanksDispatcher, 
     onBlankSelect,
+    onBlankRemove,
     onSave, 
     onDiscard, 
     onDelete,
@@ -99,9 +101,24 @@ 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.id);
+                
+            const newBlankIds = getTextSegments(processedText)
+                .filter(token => token.type === 'blank')
+                .map(token => token.id);
+                
+            const removedBlankIds = existingBlankIds.filter(id => !newBlankIds.includes(id));
+            
+            removedBlankIds.forEach(id => {
+                onBlankRemove(id);
+            });
+    
             blanksDispatcher({ type: "SET_TEXT", payload: processedText });
         },
-        [blanksDispatcher]
+        [blanksDispatcher, state.text, onBlankRemove]
     );
 
     useEffect(() => {
@@ -116,8 +133,9 @@ const BlanksEditor: React.FC<Props> = ({
     };
 
     const handleBlankRemove = useCallback((blankId: number) => {
+        onBlankRemove(blankId);
         blanksDispatcher({ type: "REMOVE_BLANK", payload: blankId });
-    }, [blanksDispatcher]);
+    }, [blanksDispatcher, onBlankRemove]);
 
     const sensors = useSensors(
         useSensor(PointerSensor, {