frontend: add theme + syntax hl

4 files changed, 43 insertions, 8 deletions

diff --git a/www/index.html b/www/index.html
index 55127df..81da9d9 100644
--- a/www/index.html
+++ b/www/index.html
@@ -5,6 +5,9 @@
     <title>CSTea</title>
   </head>
   <style>
+html, body {
+  margin: 0;
+}
 .grid-container {
   width: 100%;
   display: grid;
@@ -13,15 +16,17 @@
 .syntax-node {
   padding-left: 5px;
   margin-left: 20px;
-  border-left: 2px solid white;
+  border-left: 2px solid #2c313a;
 }
 .syntax-node:hover {
-  border-left: 2px solid #ccc;
+  border-left: 2px solid #545c69;
 }
 .syntax-err {
-  color: red;
+  color: #e06c75;
 }
 #cst, #source-code {
+  background-color: #2c313a;
+  color: #a3aab6;
   height: 100vh;
   overflow: scroll;
 }
@@ -38,6 +43,5 @@ pre {
       <div id="cst">
       </div>
     </div>
-    <!-- button id="gen-cst">Generate CST</button -->
   </body>
 </html>
diff --git a/www/index.js b/www/index.js
index f870e92..3e00b9e 100644
--- a/www/index.js
+++ b/www/index.js
@@ -3,6 +3,7 @@ import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup"
 import {Decoration, DecorationSet} from "@codemirror/view"
 import {StateField, StateEffect} from "@codemirror/state"
 import {rust} from "@codemirror/lang-rust"
+import {oneDark, oneDarkTheme, oneDarkHighlightStyle} from "@codemirror/theme-one-dark"
 
 let cst = document.getElementById('cst');
 let view = new EditorView({
@@ -14,10 +15,13 @@ let view = new EditorView({
         if (v.docChanged) {
           doRender()
         }
-      })
+      }),
+      oneDark,
+      oneDarkTheme,
+      oneDarkHighlightStyle.extension
     ]
   }),
-  parent: document.getElementById('source-code')
+  parent: document.getElementById('source-code'),
 })
 
 const doHighlight = StateEffect.define()
@@ -60,6 +64,8 @@ function render_cst(synRoot) {
   let synText = wrap(synRoot.kind() + " @ " + r.to_string() + " " +synRoot.text(), "pre");
   synText.onmouseover = () => {
     highlightArea(view, r);
+    let sourceFile = view.state.doc.toString();
+    view.scrollPosIntoView(r.start());
   }
   nodeDiv.appendChild(synText);
   if (!synRoot.is_token()) {
@@ -80,14 +86,17 @@ function render_err(errorList) {
   let errDiv = document.createElement("div");
   errDiv.className = "syntax-err";
   errorList.forEach(err => {
-    errDiv.appendChild(wrap(err.to_string(), "pre"));
+    let sourceFile = view.state.doc.toString();
+    let line = err.range().line(sourceFile);
+    let col = err.range().col(sourceFile);
+    errDiv.appendChild(wrap(`line ${line}, col ${col}: ` + err.to_string(), "pre"));
     // highlightArea(view, err.range());
   });
   return errDiv;
 }
 
 function doRender() {
-  let sourceFile = view.state.doc.toString();;
+  let sourceFile = view.state.doc.toString();
   cst.innerHTML = "";
   try {
     let synRoot = SynNode.from_str(sourceFile);
diff --git a/www/package-lock.json b/www/package-lock.json
index 3f37204..5f59eda 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@codemirror/basic-setup": "^0.18.2",
         "@codemirror/lang-rust": "^0.18.0",
+        "@codemirror/theme-one-dark": "^0.18.1",
         "cstea": "file:../pkg"
       },
       "bin": {
@@ -240,6 +241,16 @@
       "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.18.0.tgz",
       "integrity": "sha512-HMzHNIAbjCiCf3tEJMRg6ul01KPuXxQGNiHlHgAnqPguq/CX+L4Nvj5JlWQAI91Pupk18zhmM1c6eaazX4YeTg=="
     },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-0.18.1.tgz",
+      "integrity": "sha512-0XRfWYDfwUlPlN8yrO7bDB+EuHFqUNhTJwgp2iIixZWejuZQK0NxKmjuhkiGsEz25w7toM12uUsNJ5mo7iFQcA==",
+      "dependencies": {
+        "@codemirror/highlight": "^0.18.0",
+        "@codemirror/state": "^0.18.0",
+        "@codemirror/view": "^0.18.0"
+      }
+    },
     "node_modules/@codemirror/tooltip": {
       "version": "0.18.4",
       "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.18.4.tgz",
@@ -7426,6 +7437,16 @@
       "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.18.0.tgz",
       "integrity": "sha512-HMzHNIAbjCiCf3tEJMRg6ul01KPuXxQGNiHlHgAnqPguq/CX+L4Nvj5JlWQAI91Pupk18zhmM1c6eaazX4YeTg=="
     },
+    "@codemirror/theme-one-dark": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-0.18.1.tgz",
+      "integrity": "sha512-0XRfWYDfwUlPlN8yrO7bDB+EuHFqUNhTJwgp2iIixZWejuZQK0NxKmjuhkiGsEz25w7toM12uUsNJ5mo7iFQcA==",
+      "requires": {
+        "@codemirror/highlight": "^0.18.0",
+        "@codemirror/state": "^0.18.0",
+        "@codemirror/view": "^0.18.0"
+      }
+    },
     "@codemirror/tooltip": {
       "version": "0.18.4",
       "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.18.4.tgz",
diff --git a/www/package.json b/www/package.json
index 92bd1ff..a7013c4 100644
--- a/www/package.json
+++ b/www/package.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "@codemirror/basic-setup": "^0.18.2",
     "@codemirror/lang-rust": "^0.18.0",
+    "@codemirror/theme-one-dark": "^0.18.1",
     "cstea": "file:../pkg"
   },
   "devDependencies": {