Add a language selector for testing the other available languages.

openwebwork · Oct 7, 2024 · 1de46ba · 1de46ba
1 parent c202afa
commit 1de46ba
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/public/editor.js b/public/editor.js
@@ -18,6 +18,11 @@ if (codeMirrorElt instanceof HTMLElement) {
         }
     });
 
+    const languageSelector = document.getElementById('select-language');
+    languageSelector?.addEventListener('change', () => {
+        pgEditor.setLanguage(languageSelector.value);
+    });
+
     document.getElementById('get-source')?.addEventListener('click', () => {
         const element = document.createElement('a');
         element.href = `data:text/plain;charset=utf-8,${encodeURIComponent(pgEditor.source)}`;

diff --git a/public/index.html b/public/index.html
@@ -15,11 +15,22 @@
             <h1>PG CodeMirror Editor Playground</h1>
             <div class="input-group mb-3">
                 <button class="btn btn-primary" id="load-file" type="button">Load File</button>
-                <input type="file" name="problem-file" class="form-control" accept="*">
+                <input type="file" name="problem-file" class="form-control">
                 <button class="btn btn-primary" id="get-source" type="button">Download Source</button>
             </div>
             <input type="hidden" name="editor-source">
             <div class="pg-codemirror-editor"></div>
+            <div class="row mt-3">
+                <label for="select-language" class="col-form-label col-2">Language:</label>
+                <div class="col-10">
+                    <select id="select-language" name="select-language" class="form-select">
+                        <option value="pg" selected>pg</option>
+                        <option value="perl">perl</option>
+                        <option value="html">html</option>
+                        <option value="xml">xml</option>
+                    </select>
+                </div>
+            </div>
         </div>
     </body>
 </html>