Conflicts

Author: vinayakguptaa

config-overrides.js

@@ -0,0 +1,6 @@
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+
+module.exports = function override(config, env) {
+	config.plugins.push(new MonacoWebpackPlugin());
+	return config;
+};

package-lock.json

@@ -9,17 +9,20 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
+    "monaco-editor-webpack-plugin": "^3.0.1",
     "react": "^17.0.1",
+    "react-app-rewired": "^2.1.8",
     "react-dom": "^17.0.1",
+    "react-monaco-editor": "^0.43.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
   },
   "eslintConfig": {
     "extends": [

package.json

@@ -5,6 +5,7 @@ import LandingPage from "./pages/Landing/LandingPage";
 import LoginPage from "./pages/LoginPage/LoginPage";
 import { createMuiTheme, ThemeProvider } from "@material-ui/core";
 import SignupPage from "./pages/SignupPage/SignupPage";
+import Recording from "./pages/Recording/Recording";
 
 const theme = createMuiTheme({
 	typography: {
@@ -44,6 +45,7 @@ function App() {
 						<Route exact path="/" component={LandingPage} />
 						<Route exact path="/login" component={LoginPage} />
 						<Route exact path="/register" component={SignupPage} />
+						<Route exact path="/editor" component={Recording} />
 					</Switch>
 				</Router>
 			</ThemeProvider>

src/App.js

@@ -0,0 +1,3 @@
+/* .recording-editor-section {
+	min-height: 100vh;
+} */

src/pages/Recording/Recording.css

@@ -0,0 +1,48 @@
+import { Grid } from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import MonacoEditor from "react-monaco-editor";
+import "./Recording.css";
+
+const Recording = () => {
+	const [code, setCode] = useState("");
+	const [srcDoc, setSrcDoc] = useState("");
+
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			setSrcDoc(code);
+		}, 250);
+
+		return () => clearTimeout(timeout);
+	}, [code]);
+
+	return (
+		<div className="recording-editor-section">
+			<Grid container spacing={0}>
+				<Grid item md={6}>
+					<MonacoEditor
+						width="100%"
+						height="100vh"
+						language="html"
+						theme="vs-dark"
+						options={{
+							selectOnLineNumbers: true,
+						}}
+						value={code}
+						onChange={(value) => setCode(value)}
+					/>
+				</Grid>
+				<Grid item md={6}>
+					<iframe
+						srcDoc={srcDoc}
+						title="Preview"
+						width="100%"
+						height="100%"
+						style={{ background: "white" }}
+					/>
+				</Grid>
+			</Grid>
+		</div>
+	);
+};
+
+export default Recording;