|
@@ -55,17 +55,13 @@ export const EditorsPage = ({ onSave }) => {
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
const timeout = setTimeout(() => {
|
|
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;
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ const source = { html: "", css: "", javascript: "" };
|
|
|
|
|
+ editors.forEach(({ type, text }) => (source[type] = text));
|
|
|
setSrcDoc(`
|
|
setSrcDoc(`
|
|
|
<html>
|
|
<html>
|
|
|
- <body>${html}</body>
|
|
|
|
|
- <style>${css}</style>
|
|
|
|
|
- <script>${javascript}</script>
|
|
|
|
|
|
|
+ <body>${source.html}</body>
|
|
|
|
|
+ <style>${source.css}</style>
|
|
|
|
|
+ <script>${source.javascript}</script>
|
|
|
</html>
|
|
</html>
|
|
|
`);
|
|
`);
|
|
|
}, 250);
|
|
}, 250);
|
|
@@ -99,23 +95,15 @@ export const EditorsPage = ({ onSave }) => {
|
|
|
);
|
|
);
|
|
|
})}
|
|
})}
|
|
|
|
|
|
|
|
- <button
|
|
|
|
|
- className='button_plus'
|
|
|
|
|
- onClick={newArray => {
|
|
|
|
|
- let editors2 = [...editors];
|
|
|
|
|
- editors2.push(newArray);
|
|
|
|
|
- setEditors(editors2);
|
|
|
|
|
- }}
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <button className='button_plus' onClick={() => setEditors([...editors, { type: "", name: "", text: "" }])}>
|
|
|
+
|
|
+
|
|
|
</button>
|
|
</button>
|
|
|
|
|
|
|
|
<button
|
|
<button
|
|
|
className='button_plus'
|
|
className='button_plus'
|
|
|
- onClick={newArray => {
|
|
|
|
|
- let editors2 = [...editors];
|
|
|
|
|
- editors2.pop(newArray);
|
|
|
|
|
- setEditors(editors2);
|
|
|
|
|
|
|
+ onClick={() => {
|
|
|
|
|
+ editors.pop();
|
|
|
|
|
+ setEditors([...editors]);
|
|
|
}}
|
|
}}
|
|
|
>
|
|
>
|
|
|
-
|
|
-
|
Yevheniia Akinshyna