POC debug aid to target words in the source code

src/3x5.ts

@@ -1,9 +1,10 @@
-import { Card, CardVm, GetField } from "./lib/card";
-import { Expr } from "./lib/expr";
-import { ALL as HTML } from "./lib/html";
-import { parse } from "./parser";
-import { runNoctl } from "./vm";
-import { AsHtml, AsText, TextPiece } from "./words";
+import { Card, CardVm, GetField } from './lib/card';
+import { Here, RegisterJumpHere } from './lib/debug';
+import { Expr } from './lib/expr';
+import { ALL as HTML } from './lib/html';
+import { parse } from './parser';
+import { runNoctl } from './vm';
+import { AsHtml, AsText, TextPiece } from './words';
 
 /**
  * Updates a card's fields
@@ -120,7 +121,7 @@ function render() {
 
   const vm: CardVm = {
     mode: "render",
-    commands: { ...HTML, get: GetField, expr: Expr },
+    commands: { ...HTML, get: GetField, expr: Expr, here: Here },
     output: "",
     card: theCard,
   };
@@ -140,3 +141,5 @@ document.body.append(
   state,
   debugDisplay
 );
+
+RegisterJumpHere(codeInput);

src/lib/debug.ts

@@ -0,0 +1,31 @@
+import { WordPattern } from '../parser';
+import { ProcResult, TextPiece } from '../words';
+import { CardVm } from './card';
+import { getOpt } from './options';
+
+export function Here(vm: CardVm, argv: TextPiece[]): ProcResult {
+  return getOpt(argv, { $max: 0 }, ({}) => ({
+    html:
+      "pos" in argv[0] && argv[0].pos != undefined
+        ? `<b data-pos="${argv[0].pos}">${argv[0].pos}</b>`
+        : "<b>???</b>",
+  }));
+}
+
+export function RegisterJumpHere(textarea: HTMLTextAreaElement) {
+  document.body.addEventListener(
+    "click",
+    (evt) => {
+      const dataPos = (evt.target as HTMLElement)?.getAttribute?.("data-pos");
+      if (dataPos !== null) {
+        const start = Number(dataPos);
+        const [match] = WordPattern.match(textarea.value, start);
+        if (match) {
+          textarea.focus();
+          textarea.setSelectionRange(start, match[1]);
+        }
+      }
+    },
+    { passive: true }
+  );
+}

src/parser.ts

@@ -84,6 +84,8 @@ function wordTmpl(bareWordCharRegex: RegExp): Pattern<WordType> {
   );
 }
 
+export const WordPattern = wordTmpl(BARE_BRACKET_WORD_CHAR);
+
 const CommandTerminator = Regex(/[\n;]/y)
   .expects("NEWLINE | ;")
   .map(() => true);