janedev
/
project-codepen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
							import { useState, useEffect } from "react";

import { SelectTheme } from "helpers/SelectTheme";
import { SelectFontSize } from "helpers/SelectFontSize";

import "./EditorsPage.css";
import { Editor } from "./Editor";

const datas = [
	{
		type: "html",
		name: "",
		text: `<!DOCTYPE html> 
    <h1 id="codepen">Welcome to the Codepen</h1>`,
	},
	{
		type: "css",
		name: "",
		text: `#codepen {
    color: blue;
    font-size: 25px;
    font-family: Times New Roman;
}`,
	},
	{
		type: "javascript",
		name: "",
		text: `let btn = document.createElement('button');
    btn.innerHTML = 'Change color';
    btn.style.color = 'red';
    btn.style.fontSize = '20px';
    document.body.append(btn);
    btn.style.cursor = 'pointer';
    btn.onclick = () => {
    document.getElementById('codepen').style.color = 'red'};`,
	},
];

export const EditorsPage = ({ onSave }) => {
	const [editors, setEditors] = useState(datas);
	const [title, setTitle] = useState("");
	const [description, setDescription] = useState("");
	const [srcDoc, setSrcDoc] = useState("");
	const [theme, setTheme] = useState();
	const [font, setFont] = useState();

	useEffect(() => {
		const timeout = setTimeout(() => {
			let html, css, javascript;
			editors.forEach(e => {
				if (e.type === "html") html = e.text;
				if (e.type === "css") css = e.text;
				if (e.type === "javascript") javascript = e.text;
			});
			setSrcDoc(`
            <html>
              <body>${html}</body>
              <style>${css}</style>
              <script>${javascript}</script>
            </html>
          `);
		}, 250);

		return () => clearTimeout(timeout);
	}, [editors]);

	return (
		<>
			<div className='styles'>
				{"Theme: "}
				<SelectTheme onChange={setTheme} value={theme} />
				<br />
				{"FontSize: "}
				<SelectFontSize onChange={setFont} value={font} />
				<br />
			</div>
			{editors.map((data, index) => {
				return (
					<Editor
						data={data}
						key={index}
						theme={theme}
						font={font}
						onChange={newData => {
							let editor = [...editors];
							editor.splice(index, 1, newData);
							setEditors(editor);
						}}
					/>
				);
			})}

			<button
				className='button_plus'
				onClick={newArray => {
					let editors2 = [...editors];
					editors2.push(newArray);
					setEditors(editors2);
				}}
			>
				+
			</button>

			<button
				className='button_plus'
				onClick={newArray => {
					let editors2 = [...editors];
					editors2.pop(newArray);
					setEditors(editors2);
				}}
			>
				-
			</button>

			<div className='pane'>
				<iframe srcDoc={srcDoc} title='output' sandbox='allow-scripts' frameBorder='0' width='100%' height='100%' />
			</div>
			<p className='text'>Name of your project: </p>
			<input
				className='input_title'
				placeholder='Name of your project'
				value={title}
				onChange={e => setTitle(e.target.value)}
			/>
			<p className='text'>Description: </p>
			<textarea
				className='text_desc'
				placeholder='Description'
				value={description}
				onChange={e => setDescription(e.target.value)}
			/>
			<button className='button_submit' onClick={() => onSave(title, description, editors)}>
				Submit this Editor
			</button>
		</>
	);
};