janedev
/
project-codepen


			
				
					
						
						
							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>
    </>
  );
};