├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── code.png
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── src
    ├── App.css
    ├── App.js
    ├── assets
    │   ├── html.png
    │   └── logo.png
    ├── components
    │   ├── Code.jsx
    │   ├── Editor.jsx
    │   ├── Header.jsx
    │   ├── Home.jsx
    │   └── Result.jsx
    ├── context
    │   └── DataProvide.jsx
    ├── index.css
    └── index.js
└── ui.png


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Code Editor
 2 | 
 3 | Welcome to the React Code Editor! This is a web-based code editor built using React.js that allows users to write and run HTML, CSS, and JavaScript code.
 4 | 
 5 | ## Features
 6 | 
 7 | ✏️ Write and edit HTML, CSS, and JavaScript code in real-time.
 8 | 
 9 | 🚀 Run and preview your code instantly in the browser.
10 | 
11 | 💡 Syntax highlighting for code clarity.
12 | 
13 | 📦 Easy setup and integration with React projects.
14 | 
15 | ## Live Demo
16 | 
17 | Check out  [here](https://code-editor-k5dw.onrender.com/).
18 | ## Getting Started
19 | 
20 | ### Prerequisites
21 | 
22 | Before you begin, ensure you have the following prerequisites:
23 | 
24 | - [Node.js](https://nodejs.org/) installed on your machine.
25 | - [npm](https://www.npmjs.com/) (Node Package Manager) or [yarn](https://yarnpkg.com/) installed.
26 | ## Screenshots
27 | 
28 | ![image](https://github.com/pitabasdev/Notes-app/assets/85897297/40191dbf-fb1a-490b-9351-03575f68cda3)
29 | 
30 | ### Installation
31 | 
32 | 1. Clone this repository to your local machine:
33 | 
34 |    ```bash
35 |    git clone [Github](https://github.com/pitabasdev/code-editor)https://github.com/pitabasdev/code-editor
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "codepen",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.11.0",
 7 |     "@emotion/styled": "^11.11.0",
 8 |     "@mui/icons-material": "^5.11.16",
 9 |     "@mui/material": "^5.13.3",
10 |     "@testing-library/jest-dom": "^5.16.5",
11 |     "@testing-library/react": "^13.4.0",
12 |     "@testing-library/user-event": "^13.5.0",
13 |     "react": "^18.2.0",
14 |     "react-codemirror": "^1.0.0",
15 |     "react-codemirror2": "^7.2.1",
16 |     "react-dom": "^18.2.0",
17 |     "react-scripts": "5.0.1",
18 |     "web-vitals": "^2.1.4"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/public/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pitabasdev/code-editor/90f2c54f28ad10609f0f0ffa074d814ae23b96fd/public/code.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pitabasdev/code-editor/90f2c54f28ad10609f0f0ffa074d814ae23b96fd/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="code.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Code Editor Pitabas</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pitabasdev/code-editor/90f2c54f28ad10609f0f0ffa074d814ae23b96fd/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pitabasdev/code-editor/90f2c54f28ad10609f0f0ffa074d814ae23b96fd/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .CodeMirror {
 3 |   height: 340px !important;
 4 |   color: #fff;
 5 | }
 6 | 
 7 | .CodeMirror-gutters {
 8 |   background: #1d1e22 !important;
 9 | }
10 | 
11 | .CodeMirror-scroll {
12 |   background: #1d1e22;
13 | }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Home from './components/Home';
 3 | import DataProvide from './context/DataProvide';
 4 | function App() {
 5 |   return (
 6 |     <div className="App">
 7 |       <DataProvide>
 8 |         <Home/>
 9 |       </DataProvide>
10 |     </div>
11 |   );
12 | }
13 | 
14 | export default App;
15 | 


--------------------------------------------------------------------------------
/src/assets/html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pitabasdev/code-editor/90f2c54f28ad10609f0f0ffa074d814ae23b96fd/src/assets/html.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pitabasdev/code-editor/90f2c54f28ad10609f0f0ffa074d814ae23b96fd/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Code.jsx:
--------------------------------------------------------------------------------
 1 | import Editor from "./Editor";
 2 | import { Box, styled } from '@mui/material';
 3 | import { useContext } from 'react';
 4 | import { DataConst } from '../context/DataProvide';
 5 | const Container = styled(Box)`
 6 |     background-color: #060606;
 7 |     height: 50vh;
 8 |     display: flex;
 9 | `
10 | 
11 | function Code() {
12 | 	const { html, css, js, setHtml, setCss, setJs } = useContext(DataConst);
13 | 
14 | 	return (
15 | 		<Container>
16 | 			<Editor
17 | 				language="xml"
18 | 				heading="HTML"
19 | 				value={html}
20 | 				onChange={setHtml}
21 | 				icon="/"
22 | 				color="#FF3C41"
23 | 			/>
24 | 			<Editor
25 | 				language="css"
26 | 				heading="CSS"
27 | 				value={css}
28 | 				onChange={setCss}
29 | 				icon="*"
30 | 				color="#0EBEFF"
31 | 			/>
32 | 			<Editor
33 | 				language="javascript"
34 | 				heading="JS"
35 | 				value={js}
36 | 				onChange={setJs}
37 | 				icon="( )"
38 | 				color="#FCD000"
39 | 			/>
40 | 		</Container>
41 | 	);
42 | }
43 | 
44 | export default Code;
45 | 


--------------------------------------------------------------------------------
/src/components/Editor.jsx:
--------------------------------------------------------------------------------
 1 | import styled from "@emotion/styled";
 2 | import { Box } from "@mui/material";
 3 | import { CloseFullscreen } from "@mui/icons-material";
 4 | import { Controlled as ControlledEditor } from "react-codemirror2";
 5 | import "codemirror/lib/codemirror.css";
 6 | import "codemirror/theme/material.css";
 7 | import "codemirror/mode/xml/xml";
 8 | import "codemirror/mode/javascript/javascript";
 9 | import "codemirror/mode/css/css";
10 | import "../App.css";
11 | import { useState } from "react";
12 | 
13 | // import { Typography, Button } from "@mui/material";
14 | const Head = styled(Box)`
15 | 	background: #1d1e22;
16 | 	padding: 9px 12px;
17 | 	display: flex;
18 | `;
19 | const Header = styled(Box)`
20 | 	display: flex;
21 | 	justify-content: space-between;
22 | 	background: #060606;
23 | 	color: #aaaebc;
24 | 	font-weight: 700;
25 | `;
26 | const Container = styled(Box)`
27 | 	flex-grow: 1;
28 | 	flex-basic: 0;
29 | 	display: flex;
30 | 	flex-direction: column;
31 | 	padding: 0 8px 8px;
32 | `;
33 | function Editor({ heading, language, value, onChange, icon, color }) {
34 | 	const [open, setOpen] = useState(true);
35 | 
36 | 	const handleChange = (editor, data, value) => {
37 | 		onChange(value);
38 | 	};
39 | 	return (
40 | 		<Container style={open ? null : { flexGrow: 0 }}>
41 | 			<Header>
42 | 				<Head>
43 | 					<Box
44 | 						component="span"
45 | 						style={{
46 | 							background: "red",
47 | 							borderRadius: 5,
48 | 							marginRight: 5,
49 | 							height: 20,
50 | 							width: 20,
51 | 							display: "flex",
52 | 							placeContent: "center",
53 | 							color: "#000",
54 | 							paddingBottom: 2,
55 | 						}}
56 | 					>
57 | 						{icon}
58 | 					</Box>
59 | 					{heading}
60 | 				</Head>
61 | 				<CloseFullscreen
62 | 					fontSize="small"
63 | 					style={{ alignSelf: "center" }}
64 | 					onClick={() => setOpen((prevState) => !prevState)}
65 | 				/>
66 | 			</Header>
67 | 			<ControlledEditor
68 | 				onBeforeChange={handleChange}
69 | 				value={value}
70 | 				className="controlled-editor"
71 | 				options={{
72 | 					lineWrapping: true,
73 | 					lint: true,
74 | 					mode: language,
75 | 					lineNumbers: true,
76 | 					theme: "material",
77 | 				}}
78 | 			/>
79 | 		</Container>
80 | 	);
81 | }
82 | 
83 | export default Editor;
84 | 


--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import { AppBar,styled } from "@mui/material";
 2 | import Toolbar from "@mui/material/Toolbar/Toolbar";
 3 | import Logo from "../assets/logo.png"
 4 | const Contain=styled(AppBar)`
 5 |       background: #060606;
 6 |       height:9vh;      
 7 | `
 8 | 
 9 | function Header(){
10 |     return(
11 |      
12 |         <Contain position="static">
13 |             <Toolbar>
14 |                 <img src={Logo} alt="code-logo" style={{width:"90px"}} />
15 | 
16 |             </Toolbar>
17 |         </Contain>
18 | 
19 |     );
20 | }
21 | 
22 | 
23 | export default Header;


--------------------------------------------------------------------------------
/src/components/Home.jsx:
--------------------------------------------------------------------------------
 1 | import Header from "./Header";
 2 | import Code from "./Code";
 3 | import Result from "./Result";
 4 | function Home(){
 5 |     return (
 6 |         <>
 7 |         <Header/>
 8 |         <Code/>
 9 |         <Result/>
10 |         
11 |         </>
12 |     );
13 | }
14 | 
15 | export default Home;


--------------------------------------------------------------------------------
/src/components/Result.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useContext } from 'react';
 2 | 
 3 | import { DataConst} from '../context/DataProvide';
 4 | 
 5 | import { Box, styled } from '@mui/material';
 6 | 
 7 | const Container = styled(Box)`
 8 |     height: 41vh;
 9 | `
10 | 
11 | const Result = () => {
12 | 
13 |     const [src, setSrc] = useState('');
14 |     const { html, css, js } = useContext(DataConst);
15 | 
16 |     const srcCode = `
17 |         <html>
18 |             <body>${html}</body>
19 |             <style>${css}</style>
20 |             <script>${js}</script>
21 |         </html>
22 |     `
23 | 
24 |     useEffect(() => {
25 |         const timeout = setTimeout(() => {
26 |             setSrc(srcCode);
27 |         }, 250);
28 | 
29 |         return () => clearTimeout(timeout);
30 |     }, [html, css, js, srcCode])
31 | 
32 |     return (
33 |         <Container style={html || css || js ? null : {background: '#444857' }}>
34 |             <iframe 
35 |                 srcDoc={src}
36 |                 title="output"
37 |                 sandbox="allow-scripts"
38 |                 frameBorder="0"
39 |                 width="100%"
40 |                 height="100%"
41 |             />    
42 |         </Container>
43 |     )
44 | }
45 | 
46 | export default Result;


--------------------------------------------------------------------------------
/src/context/DataProvide.jsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useState } from "react";
 2 | 
 3 | export const DataConst = createContext(null);
 4 | 
 5 | function DataProvide({ children }) {
 6 | 	const [html, setHtml] = useState("");
 7 | 	const [js, setJs] = useState("");
 8 | 	const [css, setCss] = useState("");
 9 | 	return (
10 | 		<DataConst.Provider
11 | 			value={{
12 | 				html,
13 | 				setHtml,
14 | 				css,
15 | 				setCss,
16 | 				js,
17 | 				setJs,
18 | 			}}
19 | 		>
20 | 			{children}
21 | 		</DataConst.Provider>
22 | 	);
23 | }
24 | 
25 | export default DataProvide;
26 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 | 
10 |   <App />
11 | 
12 | );
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/ui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pitabasdev/code-editor/90f2c54f28ad10609f0f0ffa074d814ae23b96fd/ui.png


--------------------------------------------------------------------------------