Merge pull request #4061 from sivaprasath2004/sivaprasath-closes-issue-4047

[Feature]: Add to live editor settings

Author: ajay-dhangar

src/css/custom.css

@@ -30,6 +30,7 @@
   --ifm-task-complete-color: #2e9e32e1;
   --ifm-task-incomplete-color: #3d78cbe1;
   --ifm-bg-color: #f8f9fa;
+  --image-filter:invert(0);
   --site-color-svg-icon-favorite: #ff1100cb;
 }
 
@@ -45,6 +46,7 @@
   --ifm-task-complete-color: #25c2a0;
   --ifm-task-incomplete-color: #3d78cbe1;
   --ifm-bg-color: #1a202c;
+  --image-filter:invert(1);
   --site-color-svg-icon-favorite: #ff9100e5;
 }
 

src/pages/LiveEditor/BasicEditor.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState, useRef } from 'react';
+import style from '../../components/BrowserWindow/BrowserWindow.module.css'; 
 
-const BasicEditor: React.FC = () => {
-  const [checker, setChecker] = useState({ html: true, css: false, js: false });
+const BasicEditor= () => {
+  const [checker, setChecker] = useState({ html: true, css: false, js: false,settings:false,fontSize:10,fontColor:false,backcolor:false });
   const [html, setHtml] = useState("");
   const [css, setCss] = useState("");
   const [js, setJs] = useState("");
@@ -47,11 +48,57 @@ const BasicEditor: React.FC = () => {
           <button className={!checker.css ? 'btn_activated css' : 'btn_deactivated'} onClick={() => setChecker({ html: false, css: true, js: false })}>CSS</button>
           <button className={!checker.js ? 'btn_activated js' : 'btn_deactivated'} onClick={() => setChecker({ html: false, css: false, js: true })}>JS</button>
         </div>
-        <textarea className={checker.html ? 'editor_textarea_activate' : 'editor_textarea_deactivate'} value={html} placeholder="HTML" onChange={(e) => setHtml(e.target.value)}></textarea>
-        <textarea className={checker.css ? 'editor_textarea_activate' : 'editor_textarea_deactivate'} value={css} placeholder="CSS" onChange={(e) => setCss(e.target.value)}></textarea>
-        <textarea className={checker.js ? 'editor_textarea_activate' : 'editor_textarea_deactivate'} value={js} placeholder="JavaScript" onChange={(e) => setJs(e.target.value)}></textarea>
+        <div className='editor_settings_nav'>
+          <div className={`editor_settings_menu_con  ${checker.settings?"activate_menu":"deactivate_menu"}`}>
+               <div className='editor_settings_menu'>
+                 <p>Font Size</p>
+                 <button onClick={()=>setChecker(pre=>({...pre,fontSize:pre.fontSize!==30?pre.fontSize+1:pre.fontSize}))}>+</button>
+                 <p>{checker.fontSize}</p>
+                 <button onClick={()=>setChecker(pre=>({...pre,fontSize:pre.fontSize!==10?pre.fontSize-1:pre.fontSize}))}>-</button>
+               </div>
+               <div className='editor_settings_menu'>
+                <p>color</p>
+                <input
+                  type="color"
+                  value={checker.fontColor}
+                  onChange={(e)=>setChecker(pre=>({...pre,fontColor:e.target.value}))} 
+                />
+               </div>
+               <div className='editor_settings_menu'>
+               <p>Bakcground color</p>
+                <input
+                  type="color"
+                  value={checker.backcolor}
+                  onChange={(e)=>setChecker(pre=>({...pre,backcolor:e.target.value}))}
+                />
+               </div>
+          </div>
+          <div className='editor_setting_icon'>
+          <img src="https://cdn-icons-png.flaticon.com/128/9333/9333993.png" onClick={()=>setChecker(pre => ({...pre, settings: !pre.settings}))}  alt='settings'/>
+          </div>
+        </div>
+        <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>
+        <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>
+        <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>
+      </div>
+      <div className={style.browserWindow} style={{height:"35.3rem",flex:"1 0 30rem",marginTop:"1.3rem"}}>
+      <div className={style.browserWindowHeader}>
+        <div className={style.buttons}>
+          <span className={style.dot} style={{background: '#f25f58'}} />
+          <span className={style.dot} style={{background: '#fbbe3c'}} />
+          <span className={style.dot} style={{background: '#58cb42'}} />
+        </div> 
+        <div className={style.browserWindowMenuIcon}>
+          <div>
+            <span className={style.bar} />
+            <span className={style.bar} />
+            <span className={style.bar} />
+          </div>
+        </div>
       </div>
-      <iframe ref={iframeRef} className='output_container' id="preview"></iframe>
+ 
+      <iframe ref={iframeRef} className='output_container' id="preview"></iframe> 
+    </div>
     </div>
   );
 }

src/pages/LiveEditor/index.css

@@ -5,24 +5,34 @@
 .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;}
 .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;
-        font-size: 10pt;
+        float: left; 
         line-height: 14pt;
         font-weight: 200;
         padding: 10px; 
@@ -40,4 +50,4 @@
         border-color: #33dd33;
       }
       .editor_textarea_deactivate{display: none;}
-      
+      

src/pages/LiveEditor/index.tsx

@@ -89,7 +89,7 @@ export default function LiveEditor() {
           title="dazzling-swanson-wne32"
           allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
           sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-        /> :<BasicEditor />
+        /> :<BasicEditor  />
 }
       </div>
     </Layout>