Skip to content

Commit 22d8282

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #4034 from sivaprasath2004/sivaprasath-issue-closes-4003
[Feature]: Add Basic live Editor
2 parents 9c8419d + b02a035 commit 22d8282

File tree

3 files changed

+141
-6
lines changed

3 files changed

+141
-6
lines changed

‎src/pages/LiveEditor/BasicEditor.tsx

+59
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

+43
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

+39-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import React,{useEffect, useState} from "react";
1+
import React,{useState,useEffect} from "react";
22
import Layout from "@theme/Layout";
3-
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"
49
export default function LiveEditor() {
10+
const [state,setState]=useState("none")
511
const [Theme,setNewTheme]=useState("dark")
612

713
useEffect(() => {
@@ -42,8 +48,34 @@ export default function LiveEditor() {
4248
alignItems: "center"
4349
}}
4450
>
45-
<iframe
46-
src={`https://codesandbox.io/embed/github/Ajay-Dhangar/my-react-app/main?fontsize=14&hidenavigation=1&theme=${Theme==="dark"?"dark":"light"}`}
51+
{state==="none"?
52+
<div className="editor_select_container">
53+
<div className="editor_container" onClick={()=>setState("basic")}>
54+
<h2 className="editor_selcet_text">HTML CSS JS Editor</h2>
55+
<div className="editor_select_imgage_container">
56+
<img src={html} alt="html" className="editor_select_image" />
57+
<h2>HTML</h2>
58+
</div>
59+
<div className="editor_select_imgage_container">
60+
<img src={css} alt="css" className="editor_select_image" />
61+
<h2>CSS</h2>
62+
</div>
63+
<div className="editor_select_imgage_container">
64+
<img src={Js} alt="js" className="editor_select_image" />
65+
<h2>JavaScript</h2>
66+
</div>
67+
</div>
68+
<div className="editor_container" onClick={()=>setState("advance")}>
69+
<h2 className="editor_selcet_text">React.Js Editor</h2>
70+
<div className="editor_select_imgage_container">
71+
<img src={react} alt="react" className="editor_select_image"/>
72+
<h2>React.JS</h2>
73+
</div>
74+
</div>
75+
</div>
76+
:state==="advance"?
77+
<iframe
78+
src={`https://codesandbox.io/embed/github/Ajay-Dhangar/my-react-app/main?fontsize=14&hidenavigation=1&theme=${Theme==="dark"?"dark":"light"}`}
4779
style={{
4880
width: "100%",
4981
height: "600px",
@@ -57,8 +89,9 @@ export default function LiveEditor() {
5789
title="dazzling-swanson-wne32"
5890
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
5991
sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
60-
/>
92+
/> :<BasicEditor />
93+
}
6194
</div>
6295
</Layout>
6396
);
64-
}
97+
}

0 commit comments

Comments
 (0)