janedev
/
project-codepen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							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> 
  <div id="codepen" 
    class="buttonProps blue" 
    onclick="toggleColor()">
    Welcome to the Codepen
  </div>`,
	},
	{
		type: "css",
		name: "",
		text: `.blue { 
  color: blue;
  font-size: 27px;
  margin-bottom: 10px;
  font-family: Sans-Serif;
}
.red {
  color: red;
}`,
	},
	{
		type: "javascript",
		name: "",
		text: `const btn = document.createElement('button');
    btn.innerHTML = 'Change color';
    btn.style.color = 'black';
    btn.style.fontSize = '18px';
    document.body.append(btn);
    btn.style.cursor = 'pointer';
    btn.onclick = () => {
      document.getElementById('codepen').classList.toggle("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(() => {
			const source = { html: "", css: "", javascript: "" };
			editors.forEach(({ type, text }) => (source[type] = text));
			setSrcDoc(`
            <html>
              <body>${source.html}</body>
              <style>${source.css}</style>
              <script>${source.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={() => setEditors([...editors, { type: "", name: "", text: "" }])}>
				+
			</button>

			<button
				className='button_plus'
				onClick={() => {
					editors.pop();
					setEditors([...editors]);
				}}
			>
				-
			</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>
		</>
	);
};