|
@@ -1,11 +1,11 @@
|
|
-import {useRef, useState} from "react";
|
|
|
|
-import React from 'react'
|
|
|
|
-import {connect} from "react-redux";
|
|
|
|
-import {Redirect} from "react-router";
|
|
|
|
-import {render} from 'react-dom';
|
|
|
|
-import {useEffect} from "react";
|
|
|
|
-import Editor from "./editor";
|
|
|
|
-import {actionSnippetAdd} from "../actions/actionSnippetAdd";
|
|
|
|
|
|
+import { useRef, useState } from "react";
|
|
|
|
+import { useEffect } from "react";
|
|
|
|
+import React from 'react'
|
|
|
|
+import { connect } from "react-redux";
|
|
|
|
+import { Redirect } from "react-router";
|
|
|
|
+import { render } from 'react-dom';
|
|
|
|
+import Editor from "./editor";
|
|
|
|
+import { actionSnippetAdd } from "../actions/actionSnippetAdd";
|
|
|
|
|
|
import {sortableContainer, sortableElement, arrayMove} from 'react-sortable-hoc';
|
|
import {sortableContainer, sortableElement, arrayMove} from 'react-sortable-hoc';
|
|
|
|
|
|
@@ -105,7 +105,7 @@ bluek.onclick = () => {
|
|
const [srcDoc, setSrcDoc] = useState("");
|
|
const [srcDoc, setSrcDoc] = useState("");
|
|
|
|
|
|
const html = files.filter((elem) => {
|
|
const html = files.filter((elem) => {
|
|
- return elem?.type === "html";
|
|
|
|
|
|
+ return elem?.type === "html";
|
|
})[0]?.text;
|
|
})[0]?.text;
|
|
|
|
|
|
const css = files.filter((elem) => {
|
|
const css = files.filter((elem) => {
|
|
@@ -126,41 +126,40 @@ bluek.onclick = () => {
|
|
</html>
|
|
</html>
|
|
`);
|
|
`);
|
|
}, 250);
|
|
}, 250);
|
|
-
|
|
|
|
return () => clearTimeout(timeout);
|
|
return () => clearTimeout(timeout);
|
|
}, [html, css, js]);
|
|
}, [html, css, js]);
|
|
|
|
|
|
|
|
+
|
|
const [click, setClick] = useState(false)
|
|
const [click, setClick] = useState(false)
|
|
|
|
|
|
const SortableItem = sortableElement(({value, index}) => {
|
|
const SortableItem = sortableElement(({value, index}) => {
|
|
return (
|
|
return (
|
|
-
|
|
|
|
<span><ins>{value.name || "new edit "}</ins> </span>
|
|
<span><ins>{value.name || "new edit "}</ins> </span>
|
|
- )
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- const SortableList = sortableContainer(({items})=>{
|
|
|
|
- return(
|
|
|
|
- <div>
|
|
|
|
- {items?.map((value, index) => (
|
|
|
|
- <SortableItem value={value} index={index} />
|
|
|
|
- ))
|
|
|
|
- }
|
|
|
|
- </div>
|
|
|
|
- )
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- const onSortEnd = ({oldIndex, newIndex}) => {
|
|
|
|
- let arr = arrayMove(files, oldIndex, newIndex);
|
|
|
|
- setFiles(arr)
|
|
|
|
- }
|
|
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ const SortableList = sortableContainer(({items})=>{
|
|
|
|
+ return(
|
|
|
|
+ <div>
|
|
|
|
+ {items?.map((value, index) => (
|
|
|
|
+ <SortableItem value={value} index={index} />
|
|
|
|
+ ))
|
|
|
|
+ }
|
|
|
|
+ </div>
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ const onSortEnd = ({oldIndex, newIndex}) => {
|
|
|
|
+ let arr = arrayMove(files, oldIndex, newIndex);
|
|
|
|
+ setFiles(arr)
|
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
return (
|
|
<div>
|
|
<div>
|
|
- <iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%"
|
|
|
|
- height="100%" style={{height: "280px", marginLeft: "2%",marginTop: "10px", border: "5px solid green"}}/>
|
|
|
|
|
|
+ <iframe srcDoc={srcDoc} title="output"
|
|
|
|
+ sandbox="allow-scripts" frameBorder="0" width="95%"
|
|
|
|
+ height="100%"
|
|
|
|
+ style={{height: "280px", marginLeft: "2%",marginTop: "10px", border: "5px solid green"}}/>
|
|
|
|
|
|
<br/>
|
|
<br/>
|
|
<div style={{marginTop:"20px", textAlign:'center'}}>
|
|
<div style={{marginTop:"20px", textAlign:'center'}}>
|
|
@@ -179,10 +178,14 @@ bluek.onclick = () => {
|
|
<br />
|
|
<br />
|
|
<div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
|
|
<div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
|
|
<div>
|
|
<div>
|
|
- <button className="btn btn-primary" style={{}} onClick={()=>setFiles([...files, { type: "html" }])} key={files} style={{marginTop: "10px"}} >
|
|
|
|
|
|
+ <button className="btn btn-primary"
|
|
|
|
+ onClick={() => setFiles([...files, { type: "html" }])}
|
|
|
|
+ key={files}
|
|
|
|
+ style={{marginTop: "10px"}}>
|
|
Add editor
|
|
Add editor
|
|
</button>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
<div className="input-group mb-3 mt-5 ml-auto mr-auto w-50">
|
|
<div className="input-group mb-3 mt-5 ml-auto mr-auto w-50">
|
|
<div className="input-group-prepend">
|
|
<div className="input-group-prepend">
|
|
<span className="input-group-text" id="basic-addon1">
|
|
<span className="input-group-text" id="basic-addon1">
|
|
@@ -192,16 +195,22 @@ bluek.onclick = () => {
|
|
<input value={title} onChange={(e) => setTitle(e.target.value)} type="text" className="form-control"
|
|
<input value={title} onChange={(e) => setTitle(e.target.value)} type="text" className="form-control"
|
|
placeholder="Name of project" aria-label="Name of project" aria-describedby="basic-addon1"/>
|
|
placeholder="Name of project" aria-label="Name of project" aria-describedby="basic-addon1"/>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
<div className="input-group ml-auto mr-auto w-50">
|
|
<div className="input-group ml-auto mr-auto w-50">
|
|
<div className="input-group-prepend">
|
|
<div className="input-group-prepend">
|
|
<span className="input-group-text ">Description</span>
|
|
<span className="input-group-text ">Description</span>
|
|
</div>
|
|
</div>
|
|
- <textarea value={description} onChange={(e) => setDescription(e.target.value)} className="form-control "
|
|
|
|
- aria-label="With textarea" placeholder="Your description"></textarea>
|
|
|
|
|
|
+ <textarea className="form-control"
|
|
|
|
+ value={description}
|
|
|
|
+ onChange={(e) => setDescription(e.target.value)}
|
|
|
|
+ aria-label="With textarea"
|
|
|
|
+ placeholder="Your description">
|
|
|
|
+ </textarea>
|
|
</div>
|
|
</div>
|
|
- <button className="btn btn-success float-center mr-5 mb-5" onClick={() => onSave(title, description, files)} style={{marginTop: '30px'}}>
|
|
|
|
- Save project
|
|
|
|
- </button>
|
|
|
|
|
|
+ <button className="btn btn-success float-center mr-5 mb-5"
|
|
|
|
+ onClick={() => onSave(title, description, files)} style={{marginTop: '30px'}}>
|
|
|
|
+ Save project
|
|
|
|
+ </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|