From 1de46ba9131735c929f5e7db729e0e6cc0071cb6 Mon Sep 17 00:00:00 2001
From: Glenn Rice <grice1@missouriwestern.edu>
Date: Mon, 7 Oct 2024 07:30:37 -0500
Subject: [PATCH] Add a language selector for testing the other available
 languages.

---
 public/editor.js  |  5 +++++
 public/index.html | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/public/editor.js b/public/editor.js
index dbb2ddd..157ec9b 100644
--- 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
index 1e28036..3d5cd32 100644
--- 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>