[Feature]: Add to live editor settings

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,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 
-const BasicEditor: React.FC = () => {
-  const [checker, setChecker] = useState({ html: true, css: false, js: false });
+const BasicEditor: React.FC= () => {
+  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,9 +47,38 @@ 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>
       <iframe ref={iframeRef} className='output_container' id="preview"></iframe>
     </div>

src/pages/LiveEditor/index.css

@@ -17,12 +17,21 @@
 .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; 

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>