Switched code box in playground to use CodeMirror

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 built/
 web/js/
+web/css/

package.json

@@ -5,7 +5,7 @@
   "main": "built/main.js",
   "scripts": {
     "build": "tsc",
-    "build-playground": "npm run-script build && webpack",
+    "build-playground": "npm run-script build && webpack && cp node_modules/codemirror/lib/codemirror.css web/css/",
     "lint": "eslint . --ext .js,.ts",
     "format": "eslint . --ext .js,.ts --fix",
     "test": "npm run-script build && jest",
@@ -29,6 +29,7 @@
   "license": "UNLICENSED",
   "homepage": "https://github.com/davidtimms/loxdown#readme",
   "devDependencies": {
+    "@types/codemirror": "0.0.98",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.11.1",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
@@ -45,5 +46,8 @@
       "built/",
       "tests/"
     ]
+  },
+  "dependencies": {
+    "codemirror": "^5.57.0"
   }
 }

src/web/playground.ts

@@ -1,12 +1,19 @@
 /// <reference lib="dom" />
 
+import * as CodeMirror from "codemirror";
 import Lox, { RunStatus } from "../Lox.js";
 
 const sourceCodeBox = document.getElementById("source-code-box") as HTMLTextAreaElement;
 const runButton = document.getElementById("run-button") as HTMLButtonElement;
 const outputBox = document.getElementById("output") as HTMLButtonElement;
 const outputTitle = document.getElementById("output-title") as HTMLHeadingElement;
 
+const codeMirror = CodeMirror.fromTextArea(sourceCodeBox, {
+    mode: "null",
+    lineNumbers: true,
+    autofocus: true,
+});
+
 const output = {
     clear(): void {
         outputBox.innerText = "";
@@ -37,10 +44,10 @@ const output = {
 
 function run(): void {
     output.clear();
-    const source = sourceCodeBox.value;
+    const source = codeMirror.getValue();
     const lox = new Lox(output);
     const status = lox.run(source);
     output.setStatus(status);
 }
 
-runButton.addEventListener("click", run);
+runButton.addEventListener("click", run);

web/playground.html

@@ -7,6 +7,8 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#fafafa">
+
+  <link rel="stylesheet" href="css/codemirror.css">
   <style type="text/css">
     body {
       height: 100vh;
@@ -19,7 +21,7 @@
       flex-direction: row;
       flex-wrap: wrap;
       width: 100%;
-      height: 95vh;
+      height: 100vh;
     }
 
     .column {
@@ -32,8 +34,8 @@
     .control-bar {
       display: flex;
       height: 50px;
-      background-color: lightgrey;
-      border-bottom: 1px solid grey;
+      border-bottom: 1px solid #ddd;
+      background-color: #f7f7f7;
     }
 
     .control-bar button {
@@ -52,7 +54,7 @@
       margin-left: auto;
     }
 
-    .code-box, .output {
+    .output {
       height: 100%;
       padding: 5px;
       font-family: monospace;
@@ -63,6 +65,10 @@
       resize: none;
     }
 
+    .CodeMirror {
+      height: 100%;
+    }
+
     .output .error {
       color: maroon;
     }