From f6f372c6a08dc4447d3ba913225672532433fd03 Mon Sep 17 00:00:00 2001 From: sid1651 Date: Sat, 30 Aug 2025 17:56:46 +0530 Subject: [PATCH 1/2] testing --- src/components/preview.js | 41 --------------------------------------- src/pages/EditorPage.js | 4 ++-- 2 files changed, 2 insertions(+), 43 deletions(-) delete mode 100644 src/components/preview.js diff --git a/src/components/preview.js b/src/components/preview.js deleted file mode 100644 index 71b943b..0000000 --- a/src/components/preview.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react"; - -const Preview = ({ htmlCode, cssCode, jsCode }) => { - const openPreview = () => { - // Combine all 3 codes into a single HTML template - const previewWindow = window.open("", "_blank"); // open in new tab - previewWindow.document.open(); - previewWindow.document.write(` - - - - - - Live Preview - - - - ${htmlCode || ""} - - - - `); - previewWindow.document.close(); - }; - - return ( - - ); -}; - -export default Preview; diff --git a/src/pages/EditorPage.js b/src/pages/EditorPage.js index cedd132..459d9ad 100644 --- a/src/pages/EditorPage.js +++ b/src/pages/EditorPage.js @@ -8,7 +8,7 @@ import { initSocketJS, initSocketHTML, initSocketCSS } from '../socket'; import { useLocation, useParams, useNavigate, Navigate } from 'react-router-dom'; import { toast } from 'react-hot-toast'; import ACTIONS from '../Actions'; -import Preview from '../components/preview'; + import './editor-split.css'; import { Rnd } from 'react-rnd'; @@ -171,7 +171,7 @@ const EditorPage = () => {
- + From 1be0b896a82d020cada5a1b37c9e8cff0d565261 Mon Sep 17 00:00:00 2001 From: sid1651 Date: Sat, 30 Aug 2025 19:20:11 +0530 Subject: [PATCH 2/2] test 1 comoit --- src/pages/EditorPage.js | 455 ++++++++++++++++++++++------------------ 1 file changed, 256 insertions(+), 199 deletions(-) diff --git a/src/pages/EditorPage.js b/src/pages/EditorPage.js index 459d9ad..2e495c0 100644 --- a/src/pages/EditorPage.js +++ b/src/pages/EditorPage.js @@ -1,4 +1,3 @@ -// src/pages/EditorPage.jsx import React, { useEffect, useRef, useState } from 'react'; import Client from '../components/Client'; import Editor from '../components/Editor'; @@ -9,218 +8,276 @@ import { useLocation, useParams, useNavigate, Navigate } from 'react-router-dom' import { toast } from 'react-hot-toast'; import ACTIONS from '../Actions'; -import './editor-split.css'; -import { Rnd } from 'react-rnd'; - const EditorPage = () => { - const socketJSRef = useRef(null); - const socketHTMLRef = useRef(null); - const socketCSSRef = useRef(null); - - const codeRef = useRef({ javascript: '', htmlmixed: '', css: '' }); - const [jsCode, setJsCode] = useState(''); - const [htmlCode, setHtmlCode] = useState(''); - const [cssCode, setCssCode] = useState(''); - - const location = useLocation(); - const reactNavigator = useNavigate(); - const { roomId } = useParams(); - const [clients, setClients] = useState([]); - - useEffect(() => { - const initAll = async () => { - try { - socketJSRef.current = await initSocketJS(); - socketHTMLRef.current = await initSocketHTML(); - socketCSSRef.current = await initSocketCSS(); - - function handleErrors(err) { - console.error('Socket connection error:', err); - toast.error('Socket connection failed. Please try again later.'); - reactNavigator('/'); - } - - socketJSRef.current.on('connect_error', handleErrors); - socketHTMLRef.current.on('connect_error', handleErrors); - socketCSSRef.current.on('connect_error', handleErrors); - - const joinPayload = { roomId, username: location.state?.username }; - socketJSRef.current.emit(ACTIONS.JOIN, joinPayload); - socketHTMLRef.current.emit(ACTIONS.JOIN, joinPayload); - socketCSSRef.current.emit(ACTIONS.JOIN, joinPayload); - - socketJSRef.current.on(ACTIONS.JOINED, ({ clients: joinedClients, username, socketId }) => { - if (username !== location.state?.username) { - toast.success(`${username} has joined the room!`); - } - setClients(joinedClients); - socketJSRef.current.emit(ACTIONS.SYNC_CODE, { - code: codeRef.current, - socketId, - }); - }); - - socketJSRef.current.on(ACTIONS.DISCONNECTED, ({ socketId, username }) => { - toast.success(`${username} has left the room`); - setClients(prev => prev.filter(client => client.socketId !== socketId)); - }); - - // SYNC_CODE handlers - socketJSRef.current.on(ACTIONS.SYNC_CODE, payload => { - if (!payload) return; - if (payload.javascript) { - codeRef.current.javascript = payload.javascript; - setJsCode(payload.javascript); - } - }); - socketHTMLRef.current.on(ACTIONS.SYNC_CODE, payload => { - if (!payload) return; - if (payload.htmlmixed) { - codeRef.current.htmlmixed = payload.htmlmixed; - setHtmlCode(payload.htmlmixed); - } - }); - socketCSSRef.current.on(ACTIONS.SYNC_CODE, payload => { - if (!payload) return; - if (payload.css) { - codeRef.current.css = payload.css; - setCssCode(payload.css); - } - }); - - // Live CODE_CHANGE handlers - socketJSRef.current.on(ACTIONS.CODE_CHANGE, payload => { - if (!payload) return; - if (payload.javascript) { - codeRef.current.javascript = payload.javascript; - setJsCode(payload.javascript); - } - }); - socketHTMLRef.current.on(ACTIONS.CODE_CHANGE, payload => { - if (!payload) return; - if (payload.htmlmixed) { - codeRef.current.htmlmixed = payload.htmlmixed; - setHtmlCode(payload.htmlmixed); - } - }); - socketCSSRef.current.on(ACTIONS.CODE_CHANGE, payload => { - if (!payload) return; - if (payload.css) { - codeRef.current.css = payload.css; - setCssCode(payload.css); - } - }); - - } catch (e) { - console.error('Failed to init sockets', e); - toast.error('Failed to connect to collaboration servers.'); - reactNavigator('/'); - } - }; + const socketJSRef = useRef(null); + const socketHTMLRef = useRef(null); + const socketCSSRef = useRef(null); - initAll(); + const codeRef = useRef({ javascript: '', htmlmixed: '', css: '' }); + const [jsCode, setJsCode] = useState(''); + const [htmlCode, setHtmlCode] = useState(''); + const [cssCode, setCssCode] = useState(''); + const [isCollapsed, setIsCollapsed] = useState(false); // sidebar collapsed + const [Colaps, setColaps] = useState(false); // preview collapsed - return () => { - if (socketJSRef.current) { - socketJSRef.current.off(); - socketJSRef.current.disconnect(); - } - if (socketHTMLRef.current) { - socketHTMLRef.current.off(); - socketHTMLRef.current.disconnect(); - } - if (socketCSSRef.current) { - socketCSSRef.current.off(); - socketCSSRef.current.disconnect(); - } - }; - }, []); - - async function copyRoomId() { - try { - await navigator.clipboard.writeText(roomId); - toast.success('Room ID copied!'); - } catch (err) { - toast.error('Failed to copy Room ID'); + const location = useLocation(); + const reactNavigator = useNavigate(); + const { roomId } = useParams(); + const [clients, setClients] = useState([]); + + const iframeRef = useRef(null); + + useEffect(() => { + const initAll = async () => { + try { + socketJSRef.current = await initSocketJS(); + socketHTMLRef.current = await initSocketHTML(); + socketCSSRef.current = await initSocketCSS(); + + function handleErrors(err) { + console.error('Socket connection error:', err); + toast.error('Socket connection failed. Please try again later.'); + reactNavigator('/'); } - } - function leaveRoom() { + socketJSRef.current.on('connect_error', handleErrors); + socketHTMLRef.current.on('connect_error', handleErrors); + socketCSSRef.current.on('connect_error', handleErrors); + + const joinPayload = { roomId, username: location.state?.username }; + socketJSRef.current.emit(ACTIONS.JOIN, joinPayload); + socketHTMLRef.current.emit(ACTIONS.JOIN, joinPayload); + socketCSSRef.current.emit(ACTIONS.JOIN, joinPayload); + + socketJSRef.current.on( + ACTIONS.JOINED, + ({ clients: joinedClients, username, socketId }) => { + if (username !== location.state?.username) { + toast.success(`${username} has joined the room!`); + } + setClients(joinedClients); + + socketJSRef.current.emit(ACTIONS.SYNC_CODE, { + javascript: codeRef.current.javascript, + socketId, + }); + socketHTMLRef.current.emit(ACTIONS.SYNC_CODE, { + htmlmixed: codeRef.current.htmlmixed, + socketId, + }); + socketCSSRef.current.emit(ACTIONS.SYNC_CODE, { + css: codeRef.current.css, + socketId, + }); + } + ); + + socketJSRef.current.on(ACTIONS.DISCONNECTED, ({ socketId, username }) => { + toast.success(`${username} has left the room`); + setClients(prev => prev.filter(client => client.socketId !== socketId)); + }); + + // Sync handlers + socketJSRef.current.on(ACTIONS.SYNC_CODE, payload => { + if (payload?.javascript) { + codeRef.current.javascript = payload.javascript; + setJsCode(payload.javascript); + } + }); + socketHTMLRef.current.on(ACTIONS.SYNC_CODE, payload => { + if (payload?.htmlmixed) { + codeRef.current.htmlmixed = payload.htmlmixed; + setHtmlCode(payload.htmlmixed); + } + }); + socketCSSRef.current.on(ACTIONS.SYNC_CODE, payload => { + if (payload?.css) { + codeRef.current.css = payload.css; + setCssCode(payload.css); + } + }); + + // Code change handlers + socketJSRef.current.on(ACTIONS.CODE_CHANGE, payload => { + if (payload?.javascript) { + codeRef.current.javascript = payload.javascript; + setJsCode(payload.javascript); + } + }); + socketHTMLRef.current.on(ACTIONS.CODE_CHANGE, payload => { + if (payload?.htmlmixed) { + codeRef.current.htmlmixed = payload.htmlmixed; + setHtmlCode(payload.htmlmixed); + } + }); + socketCSSRef.current.on(ACTIONS.CODE_CHANGE, payload => { + if (payload?.css) { + codeRef.current.css = payload.css; + setCssCode(payload.css); + } + }); + } catch (e) { + console.error('Failed to init sockets', e); + toast.error('Failed to connect to collaboration servers.'); reactNavigator('/'); + } + }; + + initAll(); + + return () => { + socketJSRef.current?.disconnect(); + socketHTMLRef.current?.disconnect(); + socketCSSRef.current?.disconnect(); + }; + }, [roomId, location.state, reactNavigator]); + + useEffect(() => { + if (iframeRef.current) { + const documentContent = ` + + + + + + Live Preview + + + + ${htmlCode || ''} +