fix: debounce, blur update type on persistence

Author: Mridul Dhiman

src/components/editor/CollaborativeMonacoEditor.jsx

@@ -12,7 +12,7 @@ import { snakeCase } from "./MonacoEditor";
 import { useSocket } from "@/src/hooks/useSocket";
 // import { debounce } from "@/src/lib/utils";
 
-const CollaborativeMonacoEditor = ({ theme, roomId, readOnly = false }) => {
+const CollaborativeMonacoEditor = ({ theme, roomId, roomFiles, readOnly = false }) => {
   const {
     sendMessage,
     latestData,
@@ -175,18 +175,21 @@ const CollaborativeMonacoEditor = ({ theme, roomId, readOnly = false }) => {
       propagateRoomState({
           roomId: roomId,
           fileName: activeFile,
-          code: latestData[activeFile]?.code ?? files[activeFile]?.code
+          code: node.getValue(),
+          updateType : "debounce"
         });
       }, 5000); // save after 5s of inactivity
     });
 
-    node.onDidBlurEditorText(() => {
-      propagateRoomState({
-        roomId: roomId,
-        fileName: activeFile,
-        code: latestData[activeFile]?.code ?? files[activeFile]?.code
-      });
-    });
+    // unnecessary doing it twice
+    // node.onDidBlurEditorText(() => {
+    //   propagateRoomState({
+    //     roomId: roomId,
+    //     fileName: activeFile,
+    //     code: node.getValue(),
+    //     updateType : "blur"
+    //   });
+    // });
   });
 
 

src/components/editor/CollaborativeSandpackEditor.jsx

@@ -152,7 +152,7 @@ export default function CollaborativeSandpackEditor({
             template={template}
             addNewFile={addNewFile}
           />
-          <CollaborativeMonacoEditor roomId={id} theme={theme} readOnly={userRole?.role === RoomRole.VIEWER} />
+          <CollaborativeMonacoEditor roomFiles={files} roomId={id} theme={theme} readOnly={userRole?.role === RoomRole.VIEWER} />
           <SandpackPreview
             showOpenInCodeSandbox={false}
             showOpenNewtab={true}

src/context/SocketContext.jsx

@@ -82,16 +82,18 @@ const SocketProvider = ({ children }) => {
   );
 
   const propagateRoomState = useCallback(
-    ({ roomId, fileName, code }) => {
+    ({ roomId, fileName, code, updateType }) => {
       console.log("propagateRoomState() is getting called");
       console.log("roomId: ", roomId);
       console.log("fileName: ", fileName);
       console.log("code: ", code);
+      console.log("updateType: ", updateType);
       if(socket) {
         socket.emit("event:propagate-room-state", {
           roomId: roomId,
           fileName: fileName,
           code: code,
+          updateType: updateType,
         });
       }
     },