blocks to js

client/src/components/BlockEditor/BlockEditor.tsx

@@ -627,6 +627,27 @@ function generateCodeFromWorkspace(ws: any): string {
   return code.filter(Boolean).join('\n');
 }
 
+// Regenerate the compiled code for a workspace and persist it to the store and
+// file tree. Called on local saves and after remote XML reloads, which skip
+// saveBlocks because its change listener early-returns while remoteUpdateRef
+// is set. Without this, the code panel would not reflect collaborator changes.
+function refreshCodeForWorkspace(ws: any, fileId: string): void {
+  let finalCode = '';
+  try {
+    // Try manual code generation first (uses our compile functions directly)
+    finalCode = generateCodeFromWorkspace(ws);
+    // Fall back to Blockly's generator if manual output is empty but blocks exist
+    if (!finalCode && ws.getTopBlocks(false).length > 0) {
+      finalCode = javascriptGenerator.workspaceToCode(ws) || '';
+    }
+  } catch (e) {
+    finalCode = '';
+  }
+  const store = useEditorStore.getState();
+  store.setBlockCode(fileId, finalCode);
+  store.saveGeneratedCodeToFile(fileId, finalCode);
+}
+
 export default function BlockEditor() {
   const blocklyDiv = useRef<HTMLDivElement>(null);
   const workspaceRef = useRef<Blockly.WorkspaceSvg | null>(null);
@@ -635,8 +656,6 @@ export default function BlockEditor() {
   const activeFileId = useEditorStore((s) => s.activeFileId);
   const getBlocksXml = useEditorStore((s) => s.getBlocksXml);
   const setBlocksXml = useEditorStore((s) => s.setBlocksXml);
-  const setBlockCode = useEditorStore((s) => s.setBlockCode);
-  const saveGeneratedCodeToFile = useEditorStore((s) => s.saveGeneratedCodeToFile);
   const projectIdRef = useRef(currentProject?.id);
   projectIdRef.current = currentProject?.id;
   const lastPointerEmitRef = useRef(0);
@@ -979,6 +998,10 @@ export default function BlockEditor() {
                     Blockly.Xml.domToWorkspace(dom, ws2);
                     try { (ws2 as any).clearSelection(); } catch {}
                     try { ws2.zoomToFit(); } catch {}
+                    // Regenerate the compiled code now that the workspace reflects
+                    // the collaborator's XML (saveBlocks skips during remote loads).
+                    const currentFileId = useEditorStore.getState().activeFileId;
+                    if (currentFileId) refreshCodeForWorkspace(ws2, currentFileId);
                   } catch (e) {
                     console.error('[WS Reload] FAILED to apply deferred XML:', e);
                   }
@@ -1063,19 +1086,7 @@ export default function BlockEditor() {
       console.log('[saveBlocks] SAVING blocks for file:', currentFileId, 'xml length:', xml.length, 'topBlocks:', ws.getTopBlocks(false).length, '(old:', savedXml?.length, ')');
       setBlocksXml(currentFileId, xml);
       emitBlockStateSync(currentFileId, xml);
-      let finalCode = '';
-      try {
-        // Try manual code generation first (uses our compile functions directly)
-        finalCode = generateCodeFromWorkspace(ws);
-        // Fall back to Blockly's generator if manual output is empty but blocks exist
-        if (!finalCode && ws.getTopBlocks(false).length > 0) {
-          finalCode = javascriptGenerator.workspaceToCode(ws) || '';
-        }
-      } catch (e) {
-        // code generation failed - file content stays empty so compileWeb defaults
-      }
-      setBlockCode(currentFileId, finalCode);
-      saveGeneratedCodeToFile(currentFileId, finalCode);
+      refreshCodeForWorkspace(ws, currentFileId);
     };
     ws.addChangeListener(saveBlocks);
 
@@ -1154,6 +1165,9 @@ export default function BlockEditor() {
       Blockly.Xml.domToWorkspace(dom, ws);
       try { (ws as any).clearSelection(); } catch {}
       try { ws.zoomToFit(); } catch {}
+      // Regenerate the compiled code now that the workspace reflects the synced
+      // XML (saveBlocks skips while remoteUpdateRef is set).
+      if (activeFileId) refreshCodeForWorkspace(ws, activeFileId);
     } catch (e) {
       console.error('[WS Reload] FAILED to load blocks from XML:', e);
     }
@@ -1234,6 +1248,9 @@ export default function BlockEditor() {
         useCollaborationStore.setState({ pendingBlockConnects: unprocessed });
       }
       ws.render();
+      // saveBlocks skips while remoteUpdateRef is set, so refresh the compiled
+      // code explicitly after applying remote connections.
+      if (activeFileId) refreshCodeForWorkspace(ws, activeFileId);
     }
     remoteUpdateRef.current = false;
   }, [pendingBlockConnects, blocksXmlForFile]);
@@ -1255,6 +1272,9 @@ export default function BlockEditor() {
       }
     }
     remoteUpdateRef.current = false;
+    // saveBlocks skips while remoteUpdateRef is set, so refresh the compiled
+    // code explicitly after applying remote field value changes.
+    if (ws && activeFileId) refreshCodeForWorkspace(ws, activeFileId);
   }, [pendingBlockChanges]);
 
   // Create blocks on receiver when remote user drags a new block from the toolbox
@@ -1294,6 +1314,9 @@ export default function BlockEditor() {
         const xml = Blockly.Xml.domToText(dom);
         console.log('[PendingCreate] updating blocksXml after creating blocks');
         useEditorStore.getState().setBlocksXml(activeFileId, xml);
+        // saveBlocks skips while remoteUpdateRef is set, so refresh the
+        // compiled code explicitly after creating collaborator blocks.
+        refreshCodeForWorkspace(ws, activeFileId);
         requestAnimationFrame(() => {
           try { syncCustomFunctionBlocks(ws); } catch {}
           try { rebuildToolbox(ws); } catch {}