Highlight errors in the REPL code window

5 files changed, 54 insertions, 12 deletions

diff --git a/docs/fonts.html b/docs/fonts.html
index 0d81fbea..1e44081a 100644
--- a/docs/fonts.html
+++ b/docs/fonts.html
@@ -11,7 +11,7 @@
     div.right { text-align:right; }
     span.ul { text-decoration:underline; }
 
-    textarea { padding:0.2em; }
+    textarea, .highlight { padding:0.2em; }
     .cont { margin-top:0; }
     .run { float:right; margin-left:0.4em; }
     .rslt { border:none; background:none; min-height:8em; }
@@ -288,6 +288,7 @@ Iosevka Term Extended
 <div id="setfont">
   <div class="cont">
     <div class="kb"></div>
+    <div class="highlight"></div>
     <textarea class="code" rows="8" spellcheck="false"></textarea>
     <input class="run" type="submit" value="Run (or shift-enter)"/>
   </div>
diff --git a/docs/index.html b/docs/index.html
index 908d912e..eda3046b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,6 +14,7 @@
 <div class='cont'>
   <div class='kb'></div>
   <div class='rel'>
+    <div class='highlight'></div>
     <textarea class='code' rows='1' spellcheck='false'><⟜'a'⊸/ "Big Questions Notation"</textarea>
     <svg class='demo' viewBox='0 -6 4 12'><path d='M1 -6H0L1 0L0 6H1L4 0z'/></svg>
   </div>
diff --git a/docs/repl.js b/docs/repl.js
index 39cd6ff2..6e7a691a 100644
--- a/docs/repl.js
+++ b/docs/repl.js
@@ -19,7 +19,7 @@ if (doc.count) {
 }
 
 let setExplain = e=>e;
-let repl = ()=>{
+let repl = () => {
   let s=Array.from(doc.code.value), src=str(s);
   doc.rslt.classList.remove('err');
   doc.rslt.textContent=' '; setExplain();
@@ -35,6 +35,7 @@ let repl = ()=>{
     } catch(e) {
       doc.rslt.classList.add('err');
       doc.rslt.textContent=fmtErr(e);
+      highlightErr(s, e);
     }
     sysvals.js=dojs; // In case it was disabled by fragment loading
   }, 0);
@@ -86,6 +87,34 @@ sysvals.plot = (x,w) => {
 }
 sysvals.setplot = (x,w) => { startPlot(); setPlot(x,w); }
 
+let highlightErr = (s, e) => {
+  let h = doc.highlight;
+  h.style.height = doc.code.clientHeight+"px";
+  let clear = doc.code.oninput = () => { h.innerText = ''; }
+  let scroll = doc.code.onscroll = () => {
+    h.scrollTop  = doc.code.scrollTop;
+    h.scrollLeft = doc.code.scrollLeft;
+  }
+  scroll(); clear();
+
+  let w=e.message, is;
+  while (w && (w.loc||(e.kind!=='!'&&w.sh&&w.sh[0]===2))
+           && w.src.join('')===s.join('')) { [is,w]=w; }
+  if (is) {
+    let n, pair=0;
+    if (!is.sh) { n=1; is=[is]; }
+    else { n=is.sh[0]; pair=is.sh.length>1; if(pair)n*=2; }
+    let l=0, sl = j=>s.slice(l,l=j).join('');
+    for (let i=0; i<n; i) {
+      h.append(sl(is[i++]));
+      let m = document.createElement("mark");
+      m.innerText = sl((pair?is[i++]:l)+1);
+      h.append(m);
+    }
+    h.append(sl());
+  }
+}
+
 let keymode=0; // 1 for prefix
 let prefix='\\';
 let modified=ev=>ev.shiftKey||ev.ctrlKey||ev.altKey||ev.metaKey;
diff --git a/docs/style.css b/docs/style.css
index e76956cd..7f0dc388 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -77,11 +77,11 @@ table th {
   font-family: f3270;
   src: url(3270_sub.woff2) format('woff2');
 }
-pre.DejaVu , .DejaVu  .key, .DejaVu  .code, .DejaVu  .rslt { font-family:BQNMod,monospace; }
-pre.BQN386 , .BQN386  .key, .BQN386  .code, .BQN386  .rslt { font-family:BQN,monospace; }
-pre.Iosevka, .Iosevka .key, .Iosevka .code, .Iosevka .rslt { font-family:Iosevka,f3270,monospace; }
-pre.Julia  , .Julia   .key, .Julia   .code, .Julia   .rslt { font-family:JuliaMono,monospace; }
-pre.Fairfax, .Fairfax .key, .Fairfax .code, .Fairfax .rslt { font-family:FFHD,monospace; font-size:1.1rem; line-height:1.01; }
+pre.DejaVu , .DejaVu  .key, .DejaVu  .code, .DejaVu  .highlight, .DejaVu  .rslt { font-family:BQNMod,monospace; }
+pre.BQN386 , .BQN386  .key, .BQN386  .code, .BQN386  .highlight, .BQN386  .rslt { font-family:BQN,monospace; }
+pre.Iosevka, .Iosevka .key, .Iosevka .code, .Iosevka .highlight, .Iosevka .rslt { font-family:Iosevka,f3270,monospace; }
+pre.Julia  , .Julia   .key, .Julia   .code, .Julia   .highlight, .Julia   .rslt { font-family:JuliaMono,monospace; }
+pre.Fairfax, .Fairfax .key, .Fairfax .code, .Fairfax .highlight, .Fairfax .rslt { font-family:FFHD,monospace; font-size:1.1rem; line-height:1.01; }
 .Fairfax .key { line-height:1.25; }
 pre.f3270  , .f3270   .key, .f3270   .code, .f3270   .rslt { font-family:f3270,monospace; font-size:1rem; line-height:1.1; }
 .f3270 .key { line-height:1.4; }
@@ -93,7 +93,7 @@ pre, code, textarea, .primitives tr td:first-child {
   background-color: #e3e7e7;
   color: #292929;
 }
-pre, code, textarea, .kb {
+pre, code, textarea, .highlight, .kb {
   font-family: BQN, monospace;
   font-weight: normal;
   font-size: 0.94em;
@@ -112,16 +112,16 @@ code {
   padding: 0.15em 0.1em 0.05em;
   border-width: 0.3px;
 }
-pre, textarea, .kb {
+pre, textarea, .highlight, .kb {
   line-height: 1.2;
 }
 pre {
   margin: 1.6em 0.4em;
   overflow-x: auto;
 }
-pre, textarea { padding: 0.8em; }
+pre, textarea, .highlight { padding: 0.8em; }
 textarea { width: 100%; outline: none; resize: vertical; margin: 0; }
-.cont { margin: 1.3em 0; }
+.cont { margin: 1.3em 0; position: relative; }
 .rslt { background: none; border-top: none; margin: 0; overflow-x: initial; }
 .rslt.err { color: #d11; }
 .kb {
@@ -156,6 +156,16 @@ a.key { text-decoration:none; }
   fill: #272e30;
   cursor: pointer;
 }
+.highlight {
+  width: 100%; position: absolute; overflow: auto;
+  margin: 0; border: 1px solid transparent;
+  color: transparent; pointer-events: none;
+  white-space: pre-wrap; word-wrap: break-word;
+}
+.highlight mark {
+  color: transparent; background: none;
+  text-decoration: underline #d11 3px;
+}
 .clickable { cursor: pointer; }
 
 .replLink {
diff --git a/docs/try.html b/docs/try.html
index 916bbbbc..2515f188 100644
--- a/docs/try.html
+++ b/docs/try.html
@@ -7,7 +7,7 @@
   <link href="style.css" rel="stylesheet"/>
   <style>
     li { margin:0.7em 0; }
-    textarea { padding:0.2em; }
+    textarea, .highlight { padding:0.2em; }
     .perm, .count { font-size:0.7em; margin:-0.2em 0.8em 0 0; }
     .run, .doexplain, .perm { float:right; margin-left:0.4em; }
     .doexplain.selected { background:#777; }
@@ -19,6 +19,7 @@
   <a href="https://mlochbaum.github.io/BQN/" title='BQN homepage'>BQN</a>
   <div class="cont">
     <div class="kb"></div>
+    <div class="highlight"></div>
     <textarea class="code" rows="8" spellcheck="false" autofocus></textarea>
     <div class="count"></div>
     <input class="run" type="submit" value="Run (or shift-enter)"/>