From ba57e51cd7bc65ec5c9383137beada653aa08a50 Mon Sep 17 00:00:00 2001 From: David Timms Date: Sat, 19 Sep 2020 16:05:08 +0100 Subject: [PATCH] Switched code box in playground to use CodeMirror --- .gitignore | 1 + package-lock.json | 59 ++++++++++++++++++++++++++++++++++++++++++- package.json | 6 ++++- src/web/playground.ts | 11 ++++++-- web/playground.html | 14 +++++++--- 5 files changed, 83 insertions(+), 8 deletions(-) diff --git a/.gitignore b/.gitignore index 572fe23..a93e711 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules/ built/ web/js/ +web/css/ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d93eb38..ea78560 100644 --- a/package-lock.json +++ b/package-lock.json @@ -887,6 +887,15 @@ "@babel/types": "^7.3.0" } }, + "@types/codemirror": { + "version": "0.0.98", + "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.98.tgz", + "integrity": "sha512-cbty5LPayy2vNSeuUdjNA9tggG+go5vAxmnLDRWpiZI5a+RDBi9dlozy4/jW/7P/gletbBWbQREEa7A81YxstA==", + "dev": true, + "requires": { + "@types/tern": "*" + } + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -899,6 +908,12 @@ "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==", "dev": true }, + "@types/estree": { + "version": "0.0.45", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz", + "integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==", + "dev": true + }, "@types/istanbul-lib-coverage": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", @@ -964,6 +979,15 @@ "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==", "dev": true }, + "@types/tern": { + "version": "0.23.3", + "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.3.tgz", + "integrity": "sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==", + "dev": true, + "requires": { + "@types/estree": "*" + } + }, "@types/yargs": { "version": "15.0.4", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.4.tgz", @@ -1687,6 +1711,16 @@ "dev": true, "optional": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -2083,6 +2117,11 @@ "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", "dev": true }, + "codemirror": { + "version": "5.57.0", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.57.0.tgz", + "integrity": "sha512-WGc6UL7Hqt+8a6ZAsj/f1ApQl3NPvHY/UQSzG6fB6l4BjExgVdhFaxd7mRTw1UCiYe/6q86zHP+kfvBQcZGvUg==" + }, "collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -3068,6 +3107,13 @@ "flat-cache": "^2.0.1" } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -5790,6 +5836,13 @@ "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", "dev": true }, + "nan": { + "version": "2.14.1", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz", + "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==", + "dev": true, + "optional": true + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -8160,7 +8213,11 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, - "optional": true + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } }, "glob-parent": { "version": "3.1.0", diff --git a/package.json b/package.json index e1fa7ef..323b8cc 100644 --- a/package.json +++ b/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" } } diff --git a/src/web/playground.ts b/src/web/playground.ts index 37efae7..387204a 100644 --- a/src/web/playground.ts +++ b/src/web/playground.ts @@ -1,5 +1,6 @@ /// +import * as CodeMirror from "codemirror"; import Lox, { RunStatus } from "../Lox.js"; const sourceCodeBox = document.getElementById("source-code-box") as HTMLTextAreaElement; @@ -7,6 +8,12 @@ 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); \ No newline at end of file diff --git a/web/playground.html b/web/playground.html index 55541ad..d154281 100644 --- a/web/playground.html +++ b/web/playground.html @@ -7,6 +7,8 @@ + +