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..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';
@@ -8,219 +7,277 @@ 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';
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 || ''}
+