Homepage: lazy CodeMirror init, editor hidden until arrow clicked

Author: pepc84

index.html

@@ -596,15 +596,8 @@ <h3>New to C++ Mode?</h3>
   }
 }`;
 
-const heroEditor = CodeMirror.fromTextArea(document.getElementById('hero-editor'), {
-  mode: 'cppmode', theme: 'cppmode', lineNumbers: true,
-  indentUnit: 2, tabSize: 2, autofocus: false, lineWrapping: false,
-});
-heroEditor.setValue(HERO_DEFAULT);
-heroEditor.setSize('100%', '300px');
-
+let heroEditor = null;
 let heroEditorOpen = false;
-let heroEditorMoved = false;
 
 function toggleHeroEditor() {
   heroEditorOpen = !heroEditorOpen;
@@ -616,14 +609,17 @@ <h3>New to C++ Mode?</h3>
     overlay.style.display = 'flex';
     arrow.style.transform = 'rotate(180deg)';
     runBtn.style.display = 'block';
-    // Move CodeMirror into the overlay on first open
-    if (!heroEditorMoved) {
-      document.getElementById('hero-cm-wrap').appendChild(heroEditor.getWrapperElement());
-      heroEditorMoved = true;
+    document.body.style.overflow = 'hidden';
+    // Init CodeMirror lazily on first open
+    if (!heroEditor) {
+      heroEditor = CodeMirror(document.getElementById('hero-cm-wrap'), {
+        mode: 'cppmode', theme: 'cppmode', lineNumbers: true,
+        indentUnit: 2, tabSize: 2, lineWrapping: false,
+        value: HERO_DEFAULT,
+      });
+      heroEditor.setSize('100%', '100%');
     }
-    heroEditor.setSize('100%', '100%');
     setTimeout(() => heroEditor.refresh(), 50);
-    document.body.style.overflow = 'hidden';
   } else {
     overlay.style.display = 'none';
     arrow.style.transform = '';
@@ -650,7 +646,7 @@ <h3>New to C++ Mode?</h3>
   try {
     const resp = await fetch(HERO_API + '/compile', {
       method: 'POST', headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({code: heroEditor.getValue()}),
+      body: JSON.stringify({code: heroEditor ? heroEditor.getValue() : HERO_DEFAULT}),
     });
     const data = await resp.json();
     if (data.error) { alert('Error:\n' + data.error.substring(0,300)); }