pass annotations to js so we can highlight program text

1 files changed, 26 insertions, 1 deletions

diff --git a/main.mjs b/main.mjs
index dcd2ec7..801736e 100644
--- a/main.mjs
+++ b/main.mjs
@@ -55,6 +55,28 @@ function renderCallStack(interp) {
     });
 }
 
+function renderTextHighlight(interp) {
+    const ip = interp.ip();
+    const anno = interp.annotation_at(ip)
+    const src = document.querySelector('#src')
+    const text = src.textContent;
+
+    // split textcontent into 3 spans: pre-highlight, highlight,
+    // post-highlight
+    const pre = document.createElement('span');
+    pre.textContent = text.substring(0, anno.start);
+    const high = document.createElement('span');
+    high.classList.add('exec');
+    high.textContent = text.substring(anno.start, anno.end);
+    const post = document.createElement('span');
+    post.textContent = text.substring(anno.end);
+
+    while (src.lastChild) { src.removeChild(src.lastChild) }
+    src.appendChild(pre);
+    src.appendChild(high);
+    src.appendChild(post);
+}
+
 function tick(interp) {
     if (!interp.tick()) {
         interp.reset_ip();
@@ -68,6 +90,7 @@ function tick(interp) {
     });
     renderStack(interp);
     renderCallStack(interp);
+    renderTextHighlight(interp);
 }
 
 async function loaded() {
@@ -86,7 +109,8 @@ async function loaded() {
         }
 
         // always add a newline until i decide what to do with the parser.
-        const text = document.querySelector('textarea').value + '\n';
+        const text = document.querySelector('#src').textContent + '\n';
+        console.debug('compiling', text);
         const start = performance.now();
         const res = interp.compile(text);
         const end = performance.now();
@@ -97,6 +121,7 @@ async function loaded() {
             initWordlist();
             renderStack(interp);
             renderCallStack(interp);
+            renderTextHighlight(interp);
         }
     };
     document.querySelector('#tick').onclick = e => {