Skip to content

Commit 19b1691

Browse files
sivaprasath2004sivaprasath2004
authored
remodify
1 parent cd2dbf8 commit 19b1691

File tree

3 files changed

+169
-0
lines changed

3 files changed

+169
-0
lines changed

‎src/pages/LiveEditor/BasicEditor.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { useEffect, useState, useRef } from 'react';
2+
3+
const BasicEditor: React.FC = () => {
4+
const [checker, setChecker] = useState({ html: true, css: false, js: false });
5+
const [html, setHtml] = useState("");
6+
const [css, setCss] = useState("");
7+
const [js, setJs] = useState("");
8+
const iframeRef = useRef<HTMLIFrameElement | null>(null);
9+
10+
useEffect(() => {
11+
if (!iframeRef.current) {
12+
alert("iframeRef is not available");
13+
return;
14+
}
15+
16+
const iframe = iframeRef.current;
17+
const document = iframe.contentDocument;
18+
19+
if (!document) {
20+
alert("iframe contentDocument is not available");
21+
return;
22+
}
23+
24+
const documentContents = `
25+
<!DOCTYPE html>
26+
<html lang="en">
27+
<head>
28+
<style>${css}</style>
29+
</head>
30+
<body>
31+
${html}
32+
<script>${js}</script>
33+
</body>
34+
</html>
35+
`;
36+
37+
document.open();
38+
document.write(documentContents);
39+
document.close();
40+
}, [html, css, js]);
41+
42+
return (
43+
<div className='normal_editor'>
44+
<div className='editor_box'>
45+
<div className='editor_nav'>
46+
<button className={!checker.html ? 'btn_activated html' : 'btn_deactivated'} onClick={() => setChecker({ html: true, css: false, js: false })}>HTML</button>
47+
<button className={!checker.css ? 'btn_activated css' : 'btn_deactivated'} onClick={() => setChecker({ html: false, css: true, js: false })}>CSS</button>
48+
<button className={!checker.js ? 'btn_activated js' : 'btn_deactivated'} onClick={() => setChecker({ html: false, css: false, js: true })}>JS</button>
49+
</div>
50+
<textarea className={checker.html ? 'editor_textarea_activate' : 'editor_textarea_deactivate'} value={html} placeholder="HTML" onChange={(e) => setHtml(e.target.value)}></textarea>
51+
<textarea className={checker.css ? 'editor_textarea_activate' : 'editor_textarea_deactivate'} value={css} placeholder="CSS" onChange={(e) => setCss(e.target.value)}></textarea>
52+
<textarea className={checker.js ? 'editor_textarea_activate' : 'editor_textarea_deactivate'} value={js} placeholder="JavaScript" onChange={(e) => setJs(e.target.value)}></textarea>
53+
</div>
54+
<iframe ref={iframeRef} className='output_container' id="preview"></iframe>
55+
</div>
56+
);
57+
}
58+
59+
export default BasicEditor;

‎src/pages/LiveEditor/index.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.editor_select_container{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:25rem;width:100vw}
2+
.editor_selcet_text{font-family:monospace;position:absolute;top:2%}
3+
.editor_select_imgage_container{display:flex;flex-direction:column;align-items:center}
4+
.editor_select_image{height:10rem}
5+
.editor_container{flex:1 0 20rem;display:flex;gap:1rem;justify-content:center;align-items:center;position:relative;padding:3rem;cursor:pointer}
6+
.editor_container:hover{border: 1px solid;}
7+
.normal_editor{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;width:100vw}
8+
.normal_editor .editor_box,.normal_editor .output_container{
9+
flex: 1 0 30rem;
10+
height: 35rem;
11+
position:relative;
12+
}
13+
.normal_editor .output_container{background: white;}
14+
.editor_box .editor_nav{position: absolute;z-index: 2;gap: 1rem;display: flex;top: 2%;justify-content: center;align-items: center;right: 1%;}
15+
.editor_nav .btn_activated{padding: 0.3rem 1rem;border: none;font-family: monospace;font-weight: 600;cursor: pointer;}
16+
.editor_nav .html{background: rgb(230,81,0);color: white;}
17+
.editor_nav .css{background:rgb(2,119,189);color: white;}
18+
.editor_nav .js{background:rgb(255,214,0);color: rgb(0, 0, 0);}
19+
.editor_nav .btn_deactivated{display: none;}
20+
.editor_textarea_activate{
21+
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
22+
width: 100%;
23+
min-height: 100%;
24+
float: left;
25+
font-size: 10pt;
26+
line-height: 14pt;
27+
font-weight: 200;
28+
padding: 10px;
29+
border: 1px solid;
30+
background: transparent;
31+
box-shadow: inset rgba(0,0,0,.05) 0 3px 10px;
32+
border-radius: 3px;
33+
transition: all 0.2s ease-in-out;
34+
appearance: none;
35+
-moz-appearance: none;
36+
-webkit-appearance: none;
37+
}
38+
39+
.editor_textarea_activate:focus {
40+
border-color: #33dd33;
41+
}
42+
.editor_textarea_deactivate{display: none;}
43+

‎src/pages/LiveEditor/index.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React,{useState} from "react";
2+
import Layout from "@theme/Layout";
3+
import "./index.css";
4+
import BasicEditor from "./BasicEditor";
5+
const html="/icons/html-5.svg"
6+
const css="/icons/css.svg"
7+
const Js="/icons/js.svg"
8+
const react="/icons/jsx.svg"
9+
export default function LiveEditor() {
10+
const [state,setState]=useState("none")
11+
return (
12+
<Layout>
13+
<div
14+
style={{
15+
margin: "1rem",
16+
display: "flex",
17+
justifyContent: "center",
18+
alignItems: "center"
19+
}}
20+
>
21+
{state==="none"?
22+
<div className="editor_select_container">
23+
<div className="editor_container" onClick={()=>setState("basic")}>
24+
<h2 className="editor_selcet_text">HTML CSS JS Editor</h2>
25+
<div className="editor_select_imgage_container">
26+
<img src={html} alt="html" className="editor_select_image" />
27+
<h2>HTML</h2>
28+
</div>
29+
<div className="editor_select_imgage_container">
30+
<img src={css} alt="css" className="editor_select_image" />
31+
<h2>CSS</h2>
32+
</div>
33+
<div className="editor_select_imgage_container">
34+
<img src={Js} alt="js" className="editor_select_image" />
35+
<h2>JavaScript</h2>
36+
</div>
37+
</div>
38+
<div className="editor_container" onClick={()=>setState("advance")}>
39+
<h2 className="editor_selcet_text">React.Js Editor</h2>
40+
<div className="editor_select_imgage_container">
41+
<img src={react} alt="react" className="editor_select_image"/>
42+
<h2>React.JS</h2>
43+
</div>
44+
</div>
45+
</div>
46+
:state==="advance"?
47+
<iframe
48+
src="https://codesandbox.io/embed/github/Ajay-Dhangar/my-react-app/main?fontsize=14&hidenavigation=1&theme=dark"
49+
style={{
50+
width: "100%",
51+
height: "600px",
52+
border: "0",
53+
borderRadius: 8,
54+
overflow: "hidden",
55+
position: "static",
56+
zIndex: 0,
57+
}}
58+
className="shadow-2xl"
59+
title="dazzling-swanson-wne32"
60+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
61+
sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
62+
/> :<BasicEditor />
63+
}
64+
</div>
65+
</Layout>
66+
);
67+
}

0 commit comments

Comments
 (0)