diff --git a/src/pages/LiveEditor/BasicEditor.tsx b/src/pages/LiveEditor/BasicEditor.tsx new file mode 100644 index 000000000..af316856f --- /dev/null +++ b/src/pages/LiveEditor/BasicEditor.tsx @@ -0,0 +1,59 @@ +import React, { useEffect, useState, useRef } from 'react'; + +const BasicEditor: React.FC = () => { + const [checker, setChecker] = useState({ html: true, css: false, js: false }); + const [html, setHtml] = useState(""); + const [css, setCss] = useState(""); + const [js, setJs] = useState(""); + const iframeRef = useRef(null); + + useEffect(() => { + if (!iframeRef.current) { + alert("iframeRef is not available"); + return; + } + + const iframe = iframeRef.current; + const document = iframe.contentDocument; + + if (!document) { + alert("iframe contentDocument is not available"); + return; + } + + const documentContents = ` + + + + + + + ${html} + + + + `; + + document.open(); + document.write(documentContents); + document.close(); + }, [html, css, js]); + + return ( +
+
+
+ + + +
+ + + +
+ +
+ ); +} + +export default BasicEditor; diff --git a/src/pages/LiveEditor/index.css b/src/pages/LiveEditor/index.css new file mode 100644 index 000000000..db23b8e8c --- /dev/null +++ b/src/pages/LiveEditor/index.css @@ -0,0 +1,43 @@ +.editor_select_container{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:25rem;width:100vw} +.editor_selcet_text{font-family:monospace;position:absolute;top:2%} +.editor_select_imgage_container{display:flex;flex-direction:column;align-items:center} +.editor_select_image{height:10rem} +.editor_container{flex:1 0 20rem;display:flex;gap:1rem;justify-content:center;align-items:center;position:relative;padding:3rem;cursor:pointer} +.editor_container:hover{border: 1px solid;} +.normal_editor{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;width:100vw} +.normal_editor .editor_box,.normal_editor .output_container{ + flex: 1 0 30rem; + height: 35rem; + position:relative; +} +.normal_editor .output_container{background: white;} +.editor_box .editor_nav{position: absolute;z-index: 2;gap: 1rem;display: flex;top: 2%;justify-content: center;align-items: center;right: 1%;} +.editor_nav .btn_activated{padding: 0.3rem 1rem;border: none;font-family: monospace;font-weight: 600;cursor: pointer;} +.editor_nav .html{background: rgb(230,81,0);color: white;} +.editor_nav .css{background:rgb(2,119,189);color: white;} +.editor_nav .js{background:rgb(255,214,0);color: rgb(0, 0, 0);} +.editor_nav .btn_deactivated{display: none;} +.editor_textarea_activate{ + font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; + width: 100%; + min-height: 100%; + float: left; + font-size: 10pt; + line-height: 14pt; + font-weight: 200; + padding: 10px; + border: 1px solid; + background: transparent; + box-shadow: inset rgba(0,0,0,.05) 0 3px 10px; + border-radius: 3px; + transition: all 0.2s ease-in-out; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + } + + .editor_textarea_activate:focus { + border-color: #33dd33; + } + .editor_textarea_deactivate{display: none;} + \ No newline at end of file diff --git a/src/pages/LiveEditor/index.tsx b/src/pages/LiveEditor/index.tsx index ce2ed3a5a..394dc802e 100644 --- a/src/pages/LiveEditor/index.tsx +++ b/src/pages/LiveEditor/index.tsx @@ -1,7 +1,13 @@ -import React,{useEffect, useState} from "react"; +import React,{useState,useEffect} from "react"; import Layout from "@theme/Layout"; - +import "./index.css"; +import BasicEditor from "./BasicEditor"; +const html="/icons/html-5.svg" +const css="/icons/css.svg" +const Js="/icons/js.svg" +const react="/icons/jsx.svg" export default function LiveEditor() { + const [state,setState]=useState("none") const [Theme,setNewTheme]=useState("dark") useEffect(() => { @@ -42,8 +48,34 @@ export default function LiveEditor() { alignItems: "center" }} > -