updates

Author: JustDeveloper1

lib/builder.js

@@ -37,27 +37,39 @@ const Builder = () => {
     const [language, setLanguage] = useState('javascript');
     const randomType = ["redirect", "compress", "docs"];
 
-    useEffect(() => {
-        var h_div = document.getElementById('monaco');
+    const [editorID, setEditorID] = useState(0);
+    const createEditor = (h_div, value, language) => {
         var editor = monaco.editor.create(h_div, {
-            value: [
-                'module.exports = {',
-                `\ttype: "${randomType[Math.floor(Math.random() * randomType.length)]}"`,
-                '}'
-            ].join('\n'),
+            value,
             language,
             fontFamily: "'Source Code Pro', Consolas, 'Courier New', monospace",
             fontSize: 15
         });
+        editor.updateOptions({fontSize: 14});
+        setEditorID(monaco.editor.getEditors().indexOf(editor) || 0);
+        return editor;
+    }
+    useEffect(() => {
+        var h_div = document.getElementById('monaco');
+        var editor = createEditor(h_div, [
+            'module.exports = {',
+            `\ttype: "${randomType[Math.floor(Math.random() * randomType.length)]}"`,
+            '}'
+        ].join('\n'), language);
         window.addEventListener('resize', () => {
             editor.layout();
         });
-        editor.updateOptions({fontSize: 14});
-        document.body.addEventListener('click', () => {
-            setLanguage(document.body.style.getPropertyValue('--l'));
-            editor.updateOptions({language});
-        });
     }, []);
+    useEffect(() => {
+        monaco.editor.getEditors()[editorID].updateOptions({
+            language
+        });
+        return () => {
+            monaco.editor.getEditors()[editorID].updateOptions({
+                language
+            });
+        }
+    }, [language]);
 
     return (
         <>
@@ -76,6 +88,7 @@ const Builder = () => {
                         titles={[translate.raw('builder-langdropup-collapsed'), translate.raw('builder-langdropup-expanded'), translate.raw('builder-langdropup-switchToLang')]} 
                         items={[['JavaScript', '/img/js.svg', 'javascript'], ['HTML', '/img/html.svg', 'html']]} 
                         variable="l"
+                        setVar={setLanguage}
                         addItemNameToTitles2={true}
                     />
                 </div>

lib/ui/select.js

@@ -31,7 +31,7 @@ const GoogleFonts_Icons_ArrowDropUp = (props) => (
         <path d="M328-400q-9 0-14.5-6t-5.5-14q0-2 6-14l145-145q5-5 10-7t11-2q6 0 11 2t10 7l145 145q3 3 4.5 6.5t1.5 7.5q0 8-5.5 14t-14.5 6H328Z" />
     </svg>
 );
-const Img = ({ item }) => (<img src={item[1]} title={item[0]} alt="" className='fi r2px ow' />);
+const Img = ({ item, className }) => (<img src={item[1]} title={item[0]} alt="" className={'fi r2px ow' + className ? ' '+className : ''} />);
 
 let selectID = 0;
 const ArrowDropUp_Translate = ['none', '0px -1px'];
@@ -40,6 +40,7 @@ const Select = ({
     titles,
     items,
     variable,
+    setVar,
     addItemNameToTitles2 = false
 }) => {
     const [id, setID] = useState(0);
@@ -68,7 +69,7 @@ const Select = ({
                     translate: hover ? ArrowDropUp_Translate[1] : ArrowDropUp_Translate[0], 
                     webkitTranslate: hover ? ArrowDropUp_Translate[1] : ArrowDropUp_Translate[0]
                 }} />
-                <Img item={items[id]} />
+                <Img item={items[id]} className='z1' />
                 {items[id][0]}
                 {switch_ ? <div className='du r5px ob'>{
                     items.map((item, iid) => (
@@ -80,6 +81,7 @@ const Select = ({
                             onClick={() => {
                                 setID(iid);
                                 setHover(false);
+                                if (typeof(setVar) === 'function') { try { setVar(item[2]); } catch (_e) {} }
                             }}
                         >
                             <Img item={item} />

pages/style.css

@@ -194,3 +194,7 @@ button {
     gap: 2px !important;
     background-color: black;
 }
+
+.z1 { /* Z-index - 1 */
+    z-index: 1;
+}