feat: implement collaborative code editor with real-time cursor tracking and output components

Author: Tharunkunamalla

client/src/components/Editor.jsx

@@ -26,7 +26,7 @@ const Editor = ({ socketRef, roomId, onCodeChange, onEditorClick, language }) =>
             if (onEditorClick) onEditorClick();
         });
 
-        editor.onDidChangeModelContent((event) => {
+        editor.onDidChangeModelContent(() => {
              if (isRemoteUpdate.current) return;
              const code = editor.getValue();
              const cursor = editor.getPosition();
@@ -113,7 +113,7 @@ const Editor = ({ socketRef, roomId, onCodeChange, onEditorClick, language }) =>
                         }
 
                         // Re-apply cursors
-                        Object.entries(lastCursorPositionRef.current).forEach(([socketId, { cursor, username }]) => {
+                        Object.entries(lastCursorPositionRef.current).forEach(([socketId, { cursor }]) => {
                              if (!userColors.current[socketId]) return;
 
                              const model = editorRef.current.getModel();
@@ -228,7 +228,7 @@ const Editor = ({ socketRef, roomId, onCodeChange, onEditorClick, language }) =>
                 socket.off(ACTIONS.DISCONNECTED);
             }
         };
-    }, [socketRef.current]);
+    }, [socketRef, roomId, onCodeChange, onEditorClick]);
 
     return (
         <div style={{ height: '100%', width: '100%' }}>

client/src/components/Output.jsx

@@ -67,7 +67,7 @@ const Output = ({ editorRef, language, isRemoteTyping }) => {
 };
 
 // Piston API helper
-export const executeCode = async (language, sourceCode) => {
+const executeCode = async (language, sourceCode) => {
     // Map moniker to Piston language
     const LANGUAGE_VERSIONS = {
         javascript: "18.15.0",

client/src/pages/EditorPage.jsx

@@ -30,7 +30,7 @@ const EditorPage = () => {
   // But we need the language too. For now hardcode or add selector.
   const [language, setLanguage] = useState("javascript");
   const languageRef = useRef("javascript");
-  const [socketInitialized, setSocketInitialized] = useState(false);
+  // const [socketInitialized, setSocketInitialized] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isLangOpen, setIsLangOpen] = useState(false);
   const [isAboutOpen, setIsAboutOpen] = useState(false);
@@ -81,13 +81,11 @@ const EditorPage = () => {
   useEffect(() => {
     const init = () => {
       socketRef.current = initSocket();
-      socketRef.current.on("connect_error", (err) => handleErrors(err));
-
-      function handleErrors(e) {
-        console.log("socket error", e);
+      socketRef.current.on("connect_error", (err) => {
+        console.log("socket error", err);
         toast.error("Socket connection failed, try again later.");
         setIsClientsLoading(false);
-      }
+      });
 
       socketRef.current.emit(ACTIONS.JOIN, {
         roomId,
@@ -113,7 +111,6 @@ const EditorPage = () => {
         if (socketId !== socketRef.current.id) {
           setIsRemoteTyping(true);
 
-          // Optional: Reset after 3 seconds of inactivity if they don't click
           if (remoteTypingTimeoutRef.current)
             clearTimeout(remoteTypingTimeoutRef.current);
           remoteTypingTimeoutRef.current = setTimeout(() => {
@@ -136,18 +133,21 @@ const EditorPage = () => {
         });
       });
 
-      setSocketInitialized(true);
+      // setSocketInitialized(true);
     };
-    init();
+    if (location.state?.username) {
+      init();
+    }
     return () => {
       if (socketRef.current) {
         socketRef.current.disconnect();
         socketRef.current.off(ACTIONS.JOINED);
         socketRef.current.off(ACTIONS.DISCONNECTED);
         socketRef.current.off(ACTIONS.LANGUAGE_CHANGE);
+        socketRef.current.off(ACTIONS.CODE_CHANGE);
       }
     };
-  }, []);
+  }, [roomId, location.state?.username]);
 
   async function copyRoomId() {
     try {
@@ -169,37 +169,25 @@ const EditorPage = () => {
       clearTimeout(remoteTypingTimeoutRef.current);
   };
 
-  if (!location.state) {
-    return <Navigate to="/" state={{roomId}} />;
-  }
-
-  // Filter for unique usernames to display
-  const uniqueClients = Array.from(new Set(clients.map((c) => c.username))).map(
-    (username) => clients.find((c) => c.username === username),
-  );
-
-  const [outputWidth, setOutputWidth] = useState(300);
-  const isDragging = useRef(false);
-
-  const startResizing = (mouseDownEvent) => {
+  const startResizing = () => {
     isDragging.current = true;
   };
 
   const stopResizing = () => {
     isDragging.current = false;
   };
 
-  const resize = (mouseMoveEvent) => {
-    if (isDragging.current) {
-      // Calculate new width from the right edge of the screen
-      const newWidth = window.innerWidth - mouseMoveEvent.clientX;
-      if (newWidth > 100 && newWidth < window.innerWidth * 0.8) {
-        setOutputWidth(newWidth);
+  useEffect(() => {
+    const resize = (mouseMoveEvent) => {
+      if (isDragging.current) {
+        // Calculate new width from the right edge of the screen
+        const newWidth = window.innerWidth - mouseMoveEvent.clientX;
+        if (newWidth > 100 && newWidth < window.innerWidth * 0.8) {
+          setOutputWidth(newWidth);
+        }
       }
-    }
-  };
+    };
 
-  useEffect(() => {
     window.addEventListener("mousemove", resize);
     window.addEventListener("mouseup", stopResizing);
     return () => {
@@ -208,6 +196,15 @@ const EditorPage = () => {
     };
   }, []);
 
+  if (!location.state) {
+    return <Navigate to="/" state={{roomId}} />;
+  }
+
+  // Filter for unique usernames to display
+  const uniqueClients = Array.from(new Set(clients.map((c) => c.username))).map(
+    (username) => clients.find((c) => c.username === username),
+  );
+
   return (
     <div className="mainWrap">
       <div className="aside">