Update BlockEditor.tsx

client/src/components/BlockEditor/BlockEditor.tsx

@@ -585,27 +585,6 @@ export default function BlockEditor() {
   const remoteUpdateRef = useRef(false);
   const isDraggingRef = useRef(false);
 
-  // Refs to avoid stale closures in Blockly change listeners.
-  // The socket emit functions change when projectId changes, but the
-  // BlockEditor's main useEffect only re-runs on [framework, activeFileId].
-  // By calling through refs, listeners always invoke the latest version.
-  const emitBlockStateSyncRef = useRef(emitBlockStateSync);
-  const emitBlockDragStartRef = useRef(emitBlockDragStart);
-  const emitBlockDragMoveRef = useRef(emitBlockDragMove);
-  const emitBlockDragEndRef = useRef(emitBlockDragEnd);
-  const emitBlockConnectRef = useRef(emitBlockConnect);
-  const emitBlockChangeRef = useRef(emitBlockChange);
-  const emitBlockCreateEventRef = useRef(emitBlockCreateEvent);
-  const emitPointerMoveRef = useRef(emitPointerMove);
-  emitBlockStateSyncRef.current = emitBlockStateSync;
-  emitBlockDragStartRef.current = emitBlockDragStart;
-  emitBlockDragMoveRef.current = emitBlockDragMove;
-  emitBlockDragEndRef.current = emitBlockDragEnd;
-  emitBlockConnectRef.current = emitBlockConnect;
-  emitBlockChangeRef.current = emitBlockChange;
-  emitBlockCreateEventRef.current = emitBlockCreateEvent;
-  emitPointerMoveRef.current = emitPointerMove;
-
   // Modal state for editing variable/function blocks
   const [editingModal, setEditingModal] = useState<EditModalData | null>(null);
   const [editFormValues, setEditFormValues] = useState<Record<string, string>>({});
@@ -747,7 +726,7 @@ export default function BlockEditor() {
           x: (relX - ws.scrollX) / ws.scale,
           y: (relY - ws.scrollY) / ws.scale,
         };
-        emitPointerMoveRef.current(wsCoord.x, wsCoord.y);
+        emitPointerMove(wsCoord.x, wsCoord.y);
       };
       svg.addEventListener('mousemove', handleMouseMove);
       // Store for cleanup
@@ -770,7 +749,7 @@ export default function BlockEditor() {
             dragEndId++;
             isDraggingRef.current = true;
             draggedBlockId = e.blockId;
-            emitBlockDragStartRef.current(e.blockId, xy.x, xy.y);
+            emitBlockDragStart(e.blockId, xy.x, xy.y);
             // Poll block position during drag (BLOCK_MOVE may not fire)
             dragPoll = setInterval(() => {
               if (remoteUpdateRef.current || !isDraggingRef.current) {
@@ -780,14 +759,14 @@ export default function BlockEditor() {
               const b = ws.getBlockById(draggedBlockId!);
               if (b) {
                 const pos = b.getRelativeToSurfaceXY();
-                emitBlockDragMoveRef.current(draggedBlockId!, pos.x, pos.y);
+                emitBlockDragMove(draggedBlockId!, pos.x, pos.y);
               }
             }, 100);
           } else if (e.isEnd) {
             const endedBlockId = e.blockId;
             draggedBlockId = null;
             if (dragPoll) { clearInterval(dragPoll); dragPoll = null; }
-            emitBlockDragEndRef.current(endedBlockId);
+            emitBlockDragEnd(endedBlockId);
             // Defer isDraggingRef=false + saveBlocks until after Blockly
             // applies the connection (which fires BLOCK_MOVE next)
             const thisId = ++dragEndId;
@@ -803,12 +782,12 @@ export default function BlockEditor() {
       // fires BLOCK_MOVE synchronously with newParentId/newInputName.
       // isDraggingRef.current ensures we only emit for user-initiated drags.
       if (e.type === Blockly.Events.BLOCK_MOVE && e.newParentId && isDraggingRef.current) {
-        emitBlockConnectRef.current(e.blockId, e.newParentId, e.newInputName || undefined);
+        emitBlockConnect(e.blockId, e.newParentId, e.newInputName || undefined);
       }
       // Broadcast field value changes (dropdowns, text inputs, etc.)
       // Only emit for user-initiated changes, not during remote updates or workspace load.
       if (e.type === Blockly.Events.BLOCK_CHANGE && e.element === 'field' && !remoteUpdateRef.current) {
-        emitBlockChangeRef.current(e.blockId, e.name, e.newValue, e.element);
+        emitBlockChange(e.blockId, e.name, e.newValue, e.element);
       }
       // Broadcast block creation (toolbox drag-out, paste, duplicate) so collaborator
       // screens can create the block immediately instead of waiting for XML sync.
@@ -818,7 +797,7 @@ export default function BlockEditor() {
           try {
             const dom = Blockly.Xml.blockToDom(block, { xy: true } as any);
             const xml = Blockly.Xml.domToText(dom);
-            emitBlockCreateEventRef.current(e.blockId, xml);
+            emitBlockCreateEvent(e.blockId, xml);
           } catch {}
         }
       }
@@ -843,7 +822,7 @@ export default function BlockEditor() {
       const currentFileId = useEditorStore.getState().activeFileId;
       if (currentFileId) {
         setBlocksXml(currentFileId, xml);
-        emitBlockStateSyncRef.current(currentFileId, xml);
+        emitBlockStateSync(currentFileId, xml);
         let finalCode = '';
         try {
           // Try manual code generation first (uses our compile functions directly)
@@ -934,11 +913,8 @@ export default function BlockEditor() {
     remoteUpdateRef.current = true;
     const ws = workspaceRef.current;
     if (ws) {
-      // Snapshot and clear atomically so no items are lost
-      const queue = useCollaborationStore.getState().pendingBlockConnects;
-      useCollaborationStore.setState({ pendingBlockConnects: [] });
       const unprocessed: Array<{ childId: string; parentId: string; inputName?: string }> = [];
-      for (const connect of queue) {
+      for (const connect of pendingBlockConnects) {
         const child = ws.getBlockById(connect.childId);
         const parent = ws.getBlockById(connect.parentId);
         if (!child || !parent) {
@@ -972,8 +948,8 @@ export default function BlockEditor() {
           }
         }
       }
-      // Put back any items that couldn't be processed yet
-      if (unprocessed.length > 0) {
+      // Only update store when items were actually consumed (blocks existed)
+      if (unprocessed.length < pendingBlockConnects.length) {
         useCollaborationStore.setState({ pendingBlockConnects: unprocessed });
       }
       ws.render();
@@ -987,10 +963,8 @@ export default function BlockEditor() {
     remoteUpdateRef.current = true;
     const ws = workspaceRef.current;
     if (ws) {
-      // Snapshot and clear atomically
-      const queue = useCollaborationStore.getState().pendingBlockChanges;
-      useCollaborationStore.setState({ pendingBlockChanges: [] });
-      for (const change of queue) {
+      let change;
+      while ((change = useCollaborationStore.getState().shiftPendingBlockChange())) {
         const block = ws.getBlockById(change.blockId);
         if (!block) continue;
         try {
@@ -1008,11 +982,10 @@ export default function BlockEditor() {
     remoteUpdateRef.current = true;
     const ws = workspaceRef.current;
     if (ws) {
-      // Snapshot the queue and clear atomically so no items are lost
-      const queue = useCollaborationStore.getState().pendingBlockCreates;
-      useCollaborationStore.setState({ pendingBlockCreates: [] });
       const unprocessed: Array<{ blockId: string; xml: string }> = [];
-      for (const create of queue) {
+      let create;
+      while ((create = useCollaborationStore.getState().shiftPendingBlockCreate())) {
+        // Skip if block already exists (e.g. already created by XML sync)
         if (ws.getBlockById(create.blockId)) continue;
         try {
           const dom = Blockly.utils.xml.textToDom(create.xml);
@@ -1021,7 +994,7 @@ export default function BlockEditor() {
           unprocessed.push(create);
         }
       }
-      if (unprocessed.length > 0) {
+      if (unprocessed.length < pendingBlockCreates.length) {
         useCollaborationStore.setState({ pendingBlockCreates: unprocessed });
       }
     }