editor/web: misc fixes

editor/web/index.html

@@ -29,8 +29,6 @@
 
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
 
-  <link href="https://virt.moe/assets/cloudflare-error-page/bootstrap.min.css" rel="stylesheet">
-
   <script type="module" src="src/index.js"></script>
   <style>
     /* Layout: editor + preview */
@@ -61,6 +59,7 @@
         display: flex;
         flex-direction: column;
       }
+
       iframe.preview-frame {
         height: 100% !important;
       }
@@ -84,7 +83,6 @@
     /* Compact form: label and control same row */
     .form-row {
       display: flex;
-      gap: .3rem;
       align-items: center;
       margin-bottom: .6rem;
     }
@@ -125,7 +123,6 @@
       height: var(--expanded-height);
       border: 1px solid #ddd;
       flex: 1 1 auto;
-      min-height: 360px;
       border-radius: .375rem;
       box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
     }
@@ -200,8 +197,10 @@
               <div class="d-flex justify-content-between align-items-start mb-2">
                 <strong>Browser</strong>
                 <div>
-                  <input class="form-check-input" type="radio" name="error_source" id="err_browser" value="browser" />
+                  <label for="err_browser" class="ms-1 small">
-                  <label for="err_browser" class="ms-1 small">Error here</label>
+                    <input class="form-check-input" type="radio" name="error_source" id="err_browser" value="browser" />
+                    Error here
+                  </label>
                 </div>
               </div>
 
@@ -242,9 +241,11 @@
               <div class="d-flex justify-content-between align-items-start mb-2">
                 <strong>Cloudflare</strong>
                 <div>
-                  <input class="form-check-input" type="radio" name="error_source" id="err_cloudflare"
+                  <label for="err_cloudflare" class="ms-1 small">
-                    value="cloudflare" />
+                    <input class="form-check-input" type="radio" name="error_source" id="err_cloudflare"
-                  <label for="err_cloudflare" class="ms-1 small">Error here</label>
+                      value="cloudflare" />
+                    Error here
+                  </label>
                 </div>
               </div>
 
@@ -285,8 +286,10 @@
               <div class="d-flex justify-content-between align-items-start mb-2">
                 <strong>Host</strong>
                 <div>
-                  <input class="form-check-input" type="radio" name="error_source" id="err_host" value="host" />
+                  <label for="err_host" class="ms-1 small">
-                  <label for="err_host" class="ms-1 small">Error here</label>
+                    <input class="form-check-input" type="radio" name="error_source" id="err_host" value="host" />
+                    Error here
+                  </label>
                 </div>
               </div>
 
@@ -327,8 +330,10 @@
             <div class="d-flex justify-content-between align-items-start mb-2">
               <strong>Visit ...</strong>
               <div>
-                <input id="more_hidden" class="form-check-input" type="checkbox" />
+                <label for="more_hidden" class="ms-1 small">
-                <label for="more_hidden" class="ms-1 small">Hidden</label>
+                  <input id="more_hidden" class="form-check-input" type="checkbox" />
+                  Hidden
+                </label>
               </div>
             </div>
 
@@ -427,4 +432,5 @@
     </div>
   </div>
 </body>
-</html>
+
+</html>

editor/web/src/index.js

@@ -5,8 +5,8 @@
   - inputs call render() on change
   - "Open in new tab" opens the rendered HTML in a new window using a blob URL
 */
-import ejs from 'ejs'
+import ejs from 'ejs';
-import templateContent from './template.ejs?raw'
+import templateContent from './template.ejs?raw';
 
 
 let template = ejs.compile(templateContent);
@@ -139,7 +139,7 @@ function getDefaultPresetName() {
     name = extractUrlParam(window.location.hash.substring(1), key);
   }
   if (name) {
-    name = name.replace(/[^\w\d]/g, '')
+    name = name.replace(/[^\w\d]/g, '');
   }
   return name;
 }
@@ -371,15 +371,6 @@ function setBlockClass(id, cls) {
   el.classList.add(cls);
 }
 
-/* Simple debounce */
-function debounce(fn, wait) {
-  let t;
-  return (...args) => {
-    clearTimeout(t);
-    t = setTimeout(() => fn(...args), wait);
-  };
-}
-
 /* Wire up events */
 // initialize form values from initialConfig
 loadConfig(initialConfig);
@@ -419,18 +410,10 @@ $('btnCopyLink').addEventListener('click', () => {
 // Input change -> render
 const inputs = document.querySelectorAll('#editorForm input, #editorForm textarea, #editorForm select');
 inputs.forEach((inp) => {
-  inp.addEventListener(
+  inp.addEventListener('input', () => render());
-    'input',
-    debounce(() => {
-      // Update status block color classes for quick visual feedback in the editor
-      render();
-    }, 200)
-  );
   // for radio change events (error_source)
   if (inp.type === 'radio')
-    inp.addEventListener('change', () => {
+    inp.addEventListener('change', () => render());
-      render();
-    });
 });
 
 // Automatically update frame height