From 9e7e779c028e9233226158d07dff098b25acc954 Mon Sep 17 00:00:00 2001
From: Arseny Kapoulkine <arseny.kapoulkine@gmail.com>
Date: Mon, 20 Dec 2021 15:36:41 -0800
Subject: [PATCH] Quality of life improvements to web demo (#297)

- Upgrade CodeMirror to 5.65
- Enable matching paren highlighting via an addon
- Remove extra buttons and replace clear output with a checkbox
- Highlight error line on parsing/execution error
- Change demo layout to wide to increase available width
---
 docs/_includes/repl.html | 76 +++++++++++++++-------------------------
 docs/_pages/demo.md      |  1 +
 2 files changed, 29 insertions(+), 48 deletions(-)

diff --git a/docs/_includes/repl.html b/docs/_includes/repl.html
index 2c6b8f7..caeda82 100644
--- a/docs/_includes/repl.html
+++ b/docs/_includes/repl.html
@@ -4,66 +4,38 @@
         <br>
         <textarea rows="10" cols="70" id="script"></textarea>
         <div class="button-group">
-            <button class="demo-button negative" style="margin: 8px 8px" onclick="clearInput(); return false;">
-                Clear Input
-            </button>
-            <button class="demo-button positive" onclick="executeScript(); return false;">
-                Run
-            </button>
+            <button onclick="executeScript(); return false;" class="demo-button">Run</button>
+            <input type="checkbox" checked="true" class="demo-button" id="output-clear">Clear Output</input>
         </div>
     </div>
     <div>
-        <!-- centered header saying Output -->
         <label class="header-center"><b>Output</b></label>
         <br>
         <textarea readonly rows="10" cols="70" id="output"></textarea>
-        <div class="button-group">
-            <button class="demo-button negative" onclick="clearOutput(); return false;">
-                Clear Output
-            </button>
-        </div>
     </div>
 </form>
 
 <!-- Styles for editor -->
 <style>
-    .button-group {
-        display: flex;
-        justify-content: right;
-    }
-
     .header-center {
         text-align: center;
     }
 
     .demo-button {
-        color: white;
-        padding: 14px 20px;
-        margin: 8px 0;
-        border: none;
-        cursor: pointer;
-        width: 30%;
-        display: inline;
+        padding: 7px 7px;
+        vertical-align: middle;
     }
-
-    .demo-button-rightmost {
-        margin: inherit 2px;
-    }
-
-    .positive {
-        background-color: #4CAF50;
-    }
-
-    .negative {
-        background-color: #f44336;
+    .line-error {
+        background: #e65f55;
     }
 </style>
 
 <!-- Luau WASM (async fetch) -->
 <script async src="https://github.com/Roblox/luau/releases/latest/download/Luau.Web.js"></script>
 <!-- CodeMirror -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/addon/edit/matchbrackets.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css" />
 <!-- Luau Parser for CodeMirror -->
 <script src="assets/js/luau_mode.js"></script>
 <!-- CodeMirror Luau Editor (MUST BE LOADED AFTER CODEMIRROR!) -->
@@ -88,9 +60,14 @@
         }
     });
 
-    // Misc Functions
+    var lastError = undefined;
+
     function output(text) {
-        output_box = document.getElementById("output");
+        var output_clear = document.getElementById("output-clear");
+        var output_box = document.getElementById("output");
+        if (output_clear.checked) {
+            output_box.value = '';
+        }
         output_box.value += text.replace('stdin:', '') + "\n";
         // scroll to bottom
         output_box.scrollTop = output_box.scrollHeight;
@@ -100,18 +77,21 @@
         'print': function (msg) { output(msg) }
     };
 
-    function clearInput() {
-        editor.setValue("");
-    }
-
-    function clearOutput() {
-        document.getElementById("output").value = "";
-    }
-
     function executeScript() {
+        if (lastError) {
+            editor.removeLineClass(lastError, "background", "line-error");
+            lastError = undefined;
+        }
+
         var err = Module.ccall('executeScript', 'string', ['string'], [editor.getValue()]);
         if (err) {
-            output('Error:' + err.replace('stdin:', ''));
+            var err_text = err.replace('stdin:', '');
+            output('Error:' + err_text);
+
+            var err_line = parseInt(err_text);
+            if (err_line) {
+                lastError = editor.addLineClass(err_line-1, "background", "line-error");
+            }
         }
     }
 </script>
diff --git a/docs/_pages/demo.md b/docs/_pages/demo.md
index fefa4b2..dbba8e6 100644
--- a/docs/_pages/demo.md
+++ b/docs/_pages/demo.md
@@ -1,6 +1,7 @@
 ---
 permalink: /demo
 title: Demo
+classes: wide
 ---
 
 {% include repl.html %}