use css custom highlights for in-text blinken

1 files changed, 8 insertions, 16 deletions

diff --git a/main.mjs b/main.mjs
index 801736e..701659f 100644
--- a/main.mjs
+++ b/main.mjs
@@ -55,26 +55,18 @@ function renderCallStack(interp) {
     });
 }
 
+const highRange = new Range();
+const highlight = new Highlight(highRange);
+CSS.highlights.set('exec', highlight);
+
 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);
+    const src = document.querySelector('#src');
 
-    while (src.lastChild) { src.removeChild(src.lastChild) }
-    src.appendChild(pre);
-    src.appendChild(high);
-    src.appendChild(post);
+    // this assumes the text node is the first child, maybe it isn't?
+    highRange.setStart(src.childNodes[0], anno.start);
+    highRange.setEnd(src.childNodes[0], anno.end);
 }
 
 function tick(interp) {