Skip to content

Commit 61bbf2a

Browse files
sivaprasath2004sivaprasath2004
authored
added settings option
1 parent 1e3137d commit 61bbf2a

File tree

3 files changed

+237
-0
lines changed

3 files changed

+237
-0
lines changed

‎src/pages/LiveEditor/BasicEditor.tsx

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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,settings:false,fontSize:10,fontColor:false,backcolor: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+
<div className='editor_settings_nav'>
51+
<div className={`editor_settings_menu_con ${checker.settings?"activate_menu":"deactivate_menu"}`}>
52+
<div className='editor_settings_menu'>
53+
<p>Font Size</p>
54+
<button onClick={()=>setChecker(pre=>({...pre,fontSize:pre.fontSize!==30?pre.fontSize+1:pre.fontSize}))}>+</button>
55+
<p>{checker.fontSize}</p>
56+
<button onClick={()=>setChecker(pre=>({...pre,fontSize:pre.fontSize!==10?pre.fontSize-1:pre.fontSize}))}>-</button>
57+
</div>
58+
<div className='editor_settings_menu'>
59+
<p>color</p>
60+
<input
61+
type="color"
62+
value={checker.fontColor}
63+
onChange={(e)=>setChecker(pre=>({...pre,fontColor:e.target.value}))}
64+
/>
65+
</div>
66+
<div className='editor_settings_menu'>
67+
<p>Bakcground color</p>
68+
<input
69+
type="color"
70+
value={checker.backcolor}
71+
onChange={(e)=>setChecker(pre=>({...pre,backcolor:e.target.value}))}
72+
/>
73+
</div>
74+
</div>
75+
<div className='editor_setting_icon'>
76+
<img src="https://cdn-icons-png.flaticon.com/128/9333/9333993.png" onClick={()=>setChecker(pre => ({...pre, settings: !pre.settings}))} alt='settings'/>
77+
</div>
78+
</div>
79+
<textarea style={{fontSize:`${checker.fontSize}pt`,color:checker.fontColor==false?"unset":checker.fontColor,background:checker.backcolor==false?"transparent":checker.backcolor}} className={checker.html ? 'editor_textarea_activate' : 'editor_textarea_deactivate'} value={html} placeholder="HTML" onChange={(e) => setHtml(e.target.value)}></textarea>
80+
<textarea style={{fontSize:`${checker.fontSize}pt`,color:checker.fontColor==false?"unset":checker.fontColor,background:checker.backcolor==false?"transparent":checker.backcolor}} className={checker.css ? 'editor_textarea_activate' : 'editor_textarea_deactivate'} value={css} placeholder="CSS" onChange={(e) => setCss(e.target.value)}></textarea>
81+
<textarea style={{fontSize:`${checker.fontSize}pt`,color:checker.fontColor==false?"unset":checker.fontColor,background:checker.backcolor==false?"transparent":checker.backcolor}} className={checker.js ? 'editor_textarea_activate' : 'editor_textarea_deactivate'} value={js} placeholder="JavaScript" onChange={(e) => setJs(e.target.value)}></textarea>
82+
</div>
83+
<iframe ref={iframeRef} className='output_container' id="preview"></iframe>
84+
</div>
85+
);
86+
}
87+
88+
export default BasicEditor;

‎src/pages/LiveEditor/index.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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_settings_nav{position: absolute;bottom: 1%;right: 1%;}
21+
.editor_settings_nav img{height: 1.5rem;cursor: pointer;filter: var(--image-filter);}
22+
.editor_settings_nav .editor_setting_icon{display: flex;justify-content: flex-end;}
23+
.editor_settings_menu_con{border: 1px solid;padding: 0.3rem;margin-bottom: 0.2rem;transition: 0.3s ease-in;background: var(--docsearch-hit-background);}
24+
.editor_settings_menu_con.activate_menu{opacity: 1;}
25+
.editor_settings_menu_con.deactivate_menu{display: none;}
26+
.editor_settings_menu{display: flex;gap: 1rem;justify-content: space-between;align-items: center;margin: 0.5rem;}
27+
.editor_settings_menu p{margin: 0;}
28+
.editor_settings_menu button{height: 1.5rem; width: 1.5rem;display: flex;justify-content: center;font-family: monospace;font-weight: 900;background:rgb(2,119,189);color: white;border: none;align-items: center;}
29+
.editor_settings_menu input{height: 3rem;width: 3rem;}
30+
.editor_textarea_activate{
31+
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
32+
width: 100%;
33+
min-height: 100%;
34+
float: left;
35+
line-height: 14pt;
36+
font-weight: 200;
37+
padding: 10px;
38+
border: 1px solid;
39+
background: transparent;
40+
box-shadow: inset rgba(0,0,0,.05) 0 3px 10px;
41+
border-radius: 3px;
42+
transition: all 0.2s ease-in-out;
43+
appearance: none;
44+
-moz-appearance: none;
45+
-webkit-appearance: none;
46+
}
47+
48+
.editor_textarea_activate:focus {
49+
border-color: #33dd33;
50+
}
51+
.editor_textarea_deactivate{display: none;}
52+

‎src/pages/LiveEditor/index.tsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React,{useState,useEffect} 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+
const [Theme,setNewTheme]=useState("dark")
12+
13+
useEffect(() => {
14+
const htmlElement = document.documentElement;
15+
16+
// Function to update theme
17+
const updateTheme = () => {
18+
const newTheme = htmlElement.getAttribute('data-theme');
19+
20+
if (newTheme === 'dark') {
21+
setNewTheme("dark")
22+
} else {
23+
setNewTheme("light")
24+
}
25+
};
26+
27+
// Initial theme setup
28+
updateTheme();
29+
const observer = new MutationObserver(() => {
30+
updateTheme();
31+
});
32+
33+
observer.observe(htmlElement, {
34+
attributes: true,
35+
attributeFilter: ['data-theme'],
36+
});
37+
return () => {
38+
observer.disconnect();
39+
};
40+
}, []);
41+
return (
42+
<Layout>
43+
<div
44+
style={{
45+
margin: "1rem",
46+
display: "flex",
47+
justifyContent: "center",
48+
alignItems: "center"
49+
}}
50+
>
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"}`}
79+
style={{
80+
width: "100%",
81+
height: "600px",
82+
border: "0",
83+
borderRadius: 8,
84+
overflow: "hidden",
85+
position: "static",
86+
zIndex: 0,
87+
}}
88+
className="shadow-2xl"
89+
title="dazzling-swanson-wne32"
90+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
91+
sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
92+
/> :<BasicEditor />
93+
}
94+
</div>
95+
</Layout>
96+
);
97+
}

0 commit comments

Comments
 (0)