From 57f32dc1d36650a5f282f1ba3906e9772b89709d Mon Sep 17 00:00:00 2001
From: Brian Cully <bjc@spork.org>
Date: Sun, 24 Aug 2025 12:19:45 -0400
Subject: use css custom highlights for in-text blinken

---
 main.mjs | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

(limited to 'main.mjs')

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);
-
-    while (src.lastChild) { src.removeChild(src.lastChild) }
-    src.appendChild(pre);
-    src.appendChild(high);
-    src.appendChild(post);
+    const src = document.querySelector('#src');
+
+    // 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) {
-- 
cgit v1.3