123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- import { useState, useEffect } from "react";
- import { Editor } from "../components/Editor";
- import { SelectTheme } from "../helpers/SelectTheme";
- import { SelectFontSize } from "../helpers/SelectFontSize";
- import "./EditorsPage.css";
- 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>
- </>
- );
- };
|