From 1e3137dad45e0d648724fa54a0710a23f33f5303 Mon Sep 17 00:00:00 2001 From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com> Date: Mon, 29 Jul 2024 18:23:56 +0530 Subject: [PATCH 1/6] Delete --- src/pages/LiveEditor/BasicEditor.tsx | 59 ----------------- src/pages/LiveEditor/index.css | 43 ------------ src/pages/LiveEditor/index.tsx | 97 ---------------------------- 3 files changed, 199 deletions(-) delete mode 100644 src/pages/LiveEditor/BasicEditor.tsx delete mode 100644 src/pages/LiveEditor/index.css delete mode 100644 src/pages/LiveEditor/index.tsx diff --git a/src/pages/LiveEditor/BasicEditor.tsx b/src/pages/LiveEditor/BasicEditor.tsx deleted file mode 100644 index af316856f..000000000 --- a/src/pages/LiveEditor/BasicEditor.tsx +++ /dev/null @@ -1,59 +0,0 @@ -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 deleted file mode 100644 index db23b8e8c..000000000 --- a/src/pages/LiveEditor/index.css +++ /dev/null @@ -1,43 +0,0 @@ -.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 deleted file mode 100644 index 394dc802e..000000000 --- a/src/pages/LiveEditor/index.tsx +++ /dev/null @@ -1,97 +0,0 @@ -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(() => { - const htmlElement = document.documentElement; - - // Function to update theme - const updateTheme = () => { - const newTheme = htmlElement.getAttribute('data-theme'); - - if (newTheme === 'dark') { - setNewTheme("dark") - } else { - setNewTheme("light") - } - }; - - // Initial theme setup - updateTheme(); - const observer = new MutationObserver(() => { - updateTheme(); - }); - - observer.observe(htmlElement, { - attributes: true, - attributeFilter: ['data-theme'], - }); - return () => { - observer.disconnect(); - }; - }, []); - return ( - -
- {state==="none"? -
-
setState("basic")}> -

HTML CSS JS Editor

-
- html -

HTML

-
-
- css -

CSS

-
-
- js -

JavaScript

-
-
-
setState("advance")}> -

React.Js Editor

-
- react -

React.JS

-
-
-
- :state==="advance"? - +
+ ); +} + +export default BasicEditor; diff --git a/src/pages/LiveEditor/index.css b/src/pages/LiveEditor/index.css new file mode 100644 index 000000000..79a80adbc --- /dev/null +++ b/src/pages/LiveEditor/index.css @@ -0,0 +1,52 @@ +.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_settings_nav{position: absolute;bottom: 1%;right: 1%;} +.editor_settings_nav img{height: 1.5rem;cursor: pointer;filter: var(--image-filter);} +.editor_settings_nav .editor_setting_icon{display: flex;justify-content: flex-end;} +.editor_settings_menu_con{border: 1px solid;padding: 0.3rem;margin-bottom: 0.2rem;transition: 0.3s ease-in;background: var(--docsearch-hit-background);} +.editor_settings_menu_con.activate_menu{opacity: 1;} +.editor_settings_menu_con.deactivate_menu{display: none;} +.editor_settings_menu{display: flex;gap: 1rem;justify-content: space-between;align-items: center;margin: 0.5rem;} +.editor_settings_menu p{margin: 0;} +.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;} +.editor_settings_menu input{height: 3rem;width: 3rem;} +.editor_textarea_activate{ + font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; + width: 100%; + min-height: 100%; + float: left; + 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 new file mode 100644 index 000000000..55781a536 --- /dev/null +++ b/src/pages/LiveEditor/index.tsx @@ -0,0 +1,97 @@ +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(() => { + const htmlElement = document.documentElement; + + // Function to update theme + const updateTheme = () => { + const newTheme = htmlElement.getAttribute('data-theme'); + + if (newTheme === 'dark') { + setNewTheme("dark") + } else { + setNewTheme("light") + } + }; + + // Initial theme setup + updateTheme(); + const observer = new MutationObserver(() => { + updateTheme(); + }); + + observer.observe(htmlElement, { + attributes: true, + attributeFilter: ['data-theme'], + }); + return () => { + observer.disconnect(); + }; + }, []); + return ( + +
+ {state==="none"? +
+
setState("basic")}> +

HTML CSS JS Editor

+
+ html +

HTML

+
+
+ css +

CSS

+
+
+ js +

JavaScript

+
+
+
setState("advance")}> +

React.Js Editor

+
+ react +

React.JS

+
+
+
+ :state==="advance"? + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + +
); } From 54911ab325235b10e8ae01ca6ac6ab7eda642dbd Mon Sep 17 00:00:00 2001 From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:31:05 +0530 Subject: [PATCH 5/6] remodify css --- src/pages/LiveEditor/index.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/LiveEditor/index.css b/src/pages/LiveEditor/index.css index 79a80adbc..d45cbc4ed 100644 --- a/src/pages/LiveEditor/index.css +++ b/src/pages/LiveEditor/index.css @@ -5,11 +5,12 @@ .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{ +.normal_editor .editor_box{ flex: 1 0 30rem; height: 35rem; position:relative; } +.normal_editor .output_container{height: 32.3rem;width: 100%;} .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;} @@ -49,4 +50,4 @@ border-color: #33dd33; } .editor_textarea_deactivate{display: none;} - \ No newline at end of file + From a52aaf1c9fa8ea9b7f0be93079834ec8e3052c43 Mon Sep 17 00:00:00 2001 From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:31:42 +0530 Subject: [PATCH 6/6] modify