When hitting the tab key, actually indent in the editor. Also add boolean literal support

2 files changed, 18 insertions, 6 deletions

diff --git a/static/js/lang.js b/static/js/lang.js
index 5000e81..fe6f25b 100644
--- a/static/js/lang.js
+++ b/static/js/lang.js
@@ -534,12 +534,10 @@ class Environment {
         const scope = this.scopes[this.scopes.length - 1];
 
         switch (node.type) {
-            case N.NumberLiteral: {
+            case N.NumberLiteral:
+            case N.StringLiteral:
+            case N.BoolLiteral:
                 return node.val;
-            }
-            case N.StringLiteral: {
-                return node.val;
-            }
             case N.FnDecl: {
                 scope[node.name] = node;
                 return node;
diff --git a/static/js/main.js b/static/js/main.js
index 7774bba..6dc22d3 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -50,6 +50,19 @@ class Editor extends Component {
             this.prog = evt.target.value;
             this.render();
         }
+        this.handleKeydown = evt => {
+            if (evt.key === 'Tab') {
+                evt.preventDefault();
+                const idx = evt.target.selectionStart;
+                if (idx !== null) {
+                    const front = this.prog.substr(0, idx);
+                    const back = this.prog.substr(idx);
+                    this.prog = front + '    ' + back;
+                    this.render();
+                    evt.target.setSelectionRange(idx + 4, idx + 4);
+                }
+            }
+        }
     }
     eval() {
         this.output = '';
@@ -85,7 +98,8 @@ class Editor extends Component {
                 </div>
                 <textarea class="editor-input" cols="30" rows="10"
                     value=${this.prog}
-                    oninput=${this.handleInput}>
+                    oninput=${this.handleInput}
+                    onkeydown=${this.handleKeydown}>
                 </textarea>
             </div>
             <div class="output">