1 files changed, 58 insertions, 11 deletions

diff --git a/www/index.js b/www/index.js
index 2665873..52253c0 100644
--- a/www/index.js
+++ b/www/index.js
@@ -1,5 +1,7 @@
 import {SynNode, put_cst} from "cstea";
 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"
 
 let cst = document.getElementById('cst');
@@ -18,32 +20,77 @@ let view = new EditorView({
   parent: document.getElementById('source-code')
 })
 
+const doHighlight = StateEffect.define()
+
+const highlightField = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(highlight, tr) {
+    for (let e of tr.effects) if (e.is(doHighlight)) {
+      return (Decoration.none).update({
+        add: [hlMark.range(e.value.from, e.value.to)]
+      });
+    }
+  },
+  provide: f => EditorView.decorations.from(f)
+})
+
+const hlMark = Decoration.mark({class: "cm-highlight"})
+
+const hlTheme = EditorView.baseTheme({
+  ".cm-highlight": { textDecoration: "underline 3px red" }
+})
+
+function highlightArea(view, textRange) {
+  let effects = [doHighlight.of({from: textRange.start(), to: textRange.end()})];
+  if (!view.state.field(highlightField, false)) {
+    effects.push(StateEffect.appendConfig.of([highlightField, hlTheme]));
+  }
+  view.dispatch({effects});
+}
+
 function render_cst(synRoot) {
-  cst.innerText += "\n" + synRoot.to_string();
+  let nodeDiv = document.createElement("div");
+  nodeDiv.className = "syntax-node";
+  let r = synRoot.range();
+  let synText = wrap(synRoot.text() + synRoot.range().to_string(), "pre");
+  synText.onmouseover = () => {
+    console.log(r.to_string());
+    highlightArea(view, r);
+  }
+  nodeDiv.appendChild(synText);
   if (!synRoot.is_token()) {
     synRoot.children().forEach(node => {
-      render_cst(node);
-      return;
+      nodeDiv.appendChild(render_cst(node));
     });
-  } else {
-    return;
   }
+  return nodeDiv;
+}
+
+function wrap(s, tag) {
+  let t = document.createElement(tag);
+  t.innerText = s;
+  return t;
 }
 
 function render_err(errorList) {
-  cst.innerText = "";
+  let errDiv = document.createElement("div");
+  errDiv.className = "syntax-err";
   errorList.forEach(err => {
-    cst.innerText += "\n" + err.to_string();
+    errDiv.appendChild(wrap(err.to_string(), "pre"));
+    highlightArea(view, err.range());
   });
+  return errDiv;
 }
 
 function doRender() {
   let sourceFile = view.state.doc.toString();;
-  cst.innerText = "";
+  cst.innerHTML = "";
   try {
-    var synRoot = SynNode.from_str(sourceFile);
-    render_cst(synRoot);
+    let synRoot = SynNode.from_str(sourceFile);
+    cst.appendChild(render_cst(synRoot));
   } catch (synError) {
-    render_err(synError)
+    cst.appendChild(render_err(synError));
   }
 }