Merge pull request #5 from chiraag918/development

DEV to PROD Deployment: Fixed issues

README.md

@@ -2,6 +2,8 @@
 
 A responsive CodePen clone built using React. The `@uiw/react-codemirror` package is reponsible for building & customising the code editors. The app is divided into two sections, editor & simulator containers. The editor container consists of 3 editors each for HTML, CSS & JS. The simulator is an iframe view, where the code from the editors, compile down to render website inside it.
 
+### [Deployment Link 🔗](https://websim.chiraag.dev)
+
 ## Table of Contents
 
 - [Features](#features)
@@ -94,9 +96,11 @@ v20.5.0
 ## Screenshots 📸
 
 #### Desktop:
+
 <img width="1792" alt="Screenshot 2023-08-22 at 9 53 17 PM" src="https://github.com/chiraag918/codepen-clone/assets/39455997/f31711aa-7154-4540-bace-df672cdb469d">
 
 #### Mobile:
+
 <img width="313" alt="Screenshot 2023-08-22 at 9 54 50 PM" src="https://github.com/chiraag918/codepen-clone/assets/39455997/9d9bc8de-2688-419f-b27a-0e30405d02a9">
 
 <a name="contributing"></a>

src/components/App.js → src/components/App.jsx

@@ -24,6 +24,17 @@ function App() {
 
 	const [showIframe, setShowIframe] = useState(false);
 	const timerRef = useRef(null);
+	const iframeRef = useRef(null);
+
+	// To set the height of the body of iframe to 100vh by default
+	const handleIframeLoad = () => {
+		const iframe = iframeRef.current;
+		if (iframe) {
+			const iframeDocument =
+				iframe.contentDocument || iframe.contentWindow.document;
+			iframeDocument.body.style.height = "100vh";
+		}
+	};
 
 	// Refresh the iframe content every 250ms instead of re-rendering for every key-stroke on editors
 	useEffect(() => {
@@ -73,12 +84,13 @@ function App() {
 			{showIframe && (
 				<div className="container iframe-container">
 					<iframe
-						srcDoc={srcDoc}
-						title="output"
-						// To only allow scripts to be injected on the iframe
-						sandbox="allow-scripts"
 						width="100%"
 						height="100%"
+						srcDoc={srcDoc}
+						title="sandbox output"
+						sandbox="allow-same-origin allow-scripts"
+						ref={iframeRef}
+						onLoad={handleIframeLoad}
 					/>
 				</div>
 			)}

src/components/Editor.js → src/components/Editor.jsx

@@ -1,5 +1,5 @@
 // React Imports
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 // CodeMirror & its Plugin Imports
 import CodeMirror from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
@@ -17,6 +17,7 @@ import {
 } from "../assets/images";
 // Other Imports
 import { EXTENSION_MAP, INITIAL_CONTENT_MAP } from "../constants";
+import { testUserAgentForMobileDevice } from "../utilities/utilFunctions";
 
 // Language configuration for CodeMirror component based on langauage
 const LANG_CONFIG_MAP = {
@@ -38,17 +39,10 @@ export default function Editor(props) {
 	const [toolBarButtonsHover, setToolBarButtonsHover] = useState(isMobile);
 	// state to open/close reset dropdown
 	const [showResetDropdown, setShowResetDropdown] = useState(false);
-	// timer reference
-	const timerRef = useRef(null);
 
 	// Detecting whether device type is mobile or not using user-agent
 	useEffect(() => {
-		const userAgent = window.navigator.userAgent;
-		// Simple regex check - for large scale apps, better to use third-party libraries
-		const isMobileDevice =
-			/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/.test(userAgent);
-
-		setIsMobile(isMobileDevice);
+		setIsMobile(testUserAgentForMobileDevice());
 	}, []);
 
 	useEffect(() => {
@@ -67,8 +61,6 @@ export default function Editor(props) {
 				if (e.target.id === "reset-button") {
 				} else setShowResetDropdown(false);
 			});
-
-			clearTimeout(timerRef.current);
 		};
 		// eslint-disable-next-line
 	}, []);

src/constants/index.js

@@ -25,7 +25,6 @@ export const initialCssContent = `body {
 	align-content:center;
 	margin: 0;
   padding: 0;
-  min-height: 80vh;
 	overflow:scroll;
 	color: white;
   background-color: black;

src/index.scss

@@ -14,7 +14,6 @@ iframe{
 }
 
 .primary-container {
-  padding: 1rem;
   max-width: 100%;
   overflow-x: scroll;
   overflow-y: hidden;
@@ -23,6 +22,7 @@ iframe{
   background-image: url("./assets/images/Wallpaper.jpg");
 
   .editor-container {
+    margin: .5rem .75rem;
     padding: .5rem;
     min-width: 120px;
     display:flex;
@@ -133,10 +133,23 @@ iframe{
 
 /* Handle for mobile devices  */
 @media only screen and (max-width: 480px){
+  body{
+    overflow-y: scroll;
+  }
   .primary-container {
     flex-direction: column;
-    overflow-y: scroll;
     overflow-x: hidden;
+    overflow-y: scroll;
+
+    .editor-container{
+      margin: .3rem .5rem;
+    }
+  }
+}
+
+@media only screen and (max-height: 400px){
+  body{
+    overflow-y: scroll;
   }
 }
 

src/utilities/utilFunctions.js

@@ -0,0 +1,8 @@
+export const testUserAgentForMobileDevice = () => {
+	const userAgent = window.navigator.userAgent;
+	// Simple regex check - for large scale apps, better to use third-party libraries
+	const isMobileDevice =
+		/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/.test(userAgent);
+
+	return isMobileDevice;
+};