making some good progress

src/InputBlock.tsx

@@ -0,0 +1,149 @@
+import { Double, getType, Int, newDynamic, trie } from "dope2";
+import { focusNextElement, focusPrevElement, getCaretPosition, setRightMostCaretPosition } from "./util/dom_trickery";
+import { parseDouble, parseInt } from "./util/parse";
+
+import { useEffect, useRef, useState } from "react";
+import { Type } from "./Type";
+
+import "./InputBlock.css";
+import type { Dynamic, State2Props } from "./util/extra";
+
+export interface InputBlockState {
+  kind: "input";
+  env: any;
+  text: string;
+  resolved: undefined | Dynamic;
+}
+
+interface InputBlockProps extends State2Props<InputBlockState> {
+  filter: (ls: any[]) => boolean;
+  onResolve: (state: InputBlockState) => void;
+}
+
+export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve }: InputBlockProps) {
+  const ref = useRef<any>(null);
+  useEffect(() => {
+    ref.current?.focus();
+    if (ref.current) {
+      ref.current.textContent = text;
+    }
+  }, []);
+
+  const [i, setI] = useState(0); // selected suggestion
+  const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
+
+  const setText = (text: string) => {
+    setState({kind, env, text, resolved});
+  }
+  const setResolved = (resolved: Dynamic) => {
+    setState({kind, env, text, resolved});
+  }
+
+  const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
+
+  const asDouble = parseDouble(text);
+  const asInt = parseInt(text);
+
+  const suggestions = [
+    ... (asDouble ? [[asDouble.toString(), newDynamic(asDouble)(Double)]] : []),
+    ... (asInt ? [[asInt.toString(), newDynamic(BigInt(asInt))(Int)]] : []),
+
+    ... (text !== '') ? trie.suggest(env.name2dyn)(text)(Infinity) : [],
+  ].filter(filter);
+
+  useEffect(() => {
+    setI(0); // reset
+    const found = trie.get(env.name2dyn)(text);
+    setResolved(found); // may be undefined
+  }, [text]);
+  
+
+  const onSelectSuggestion = ([name, _dynamic]) => {
+    // setText(name);
+    // ref.current.textContent = name;
+    // setRightMostCaretPosition(ref.current);
+    // setI(0);
+    onResolve({
+      env,
+      kind: "input",
+      resolved: _dynamic,
+      text: name,
+    });
+  };
+
+  const onInput = e => {
+    setText(e.target.textContent);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    const fns = {
+      Tab: () => {
+        if (e.shiftKey) {
+          focusPrevElement();
+          e.preventDefault();
+        }
+        else {
+          // not shift key
+          if (singleSuggestion.length > 0) {
+            const newText = text + singleSuggestion;
+            setText(newText);
+            ref.current.textContent = newText;
+            setRightMostCaretPosition(ref.current);
+            e.preventDefault();  
+          }
+        }
+      },
+      ArrowDown: () => {
+        setI((i + 1) % suggestions.length);
+        e.preventDefault();
+      },
+      ArrowUp: () => {
+        setI((i - 1) % suggestions.length);
+        e.preventDefault();  
+      },
+      ArrowLeft: () => {
+        if (getCaretPosition() === 0) {
+          focusPrevElement();
+          e.preventDefault();
+        }
+      },
+      ArrowRight: () => {
+        if (getCaretPosition() === text.length) {
+          focusNextElement();
+          e.preventDefault();
+        }
+      },
+      Enter: () => {
+        onSelectSuggestion(suggestions[i]);
+        e.preventDefault();
+      },
+    };
+    fns[e.key]?.();
+  };
+
+  return <span>
+    <span className="border-around-input">
+      <span className="editable" ref={ref} contentEditable="plaintext-only" onInput={onInput} onKeyDown={onKeyDown}
+      onFocus={() => setHaveFocus(true)}
+      onBlur={() => {
+        // hacky, but couldn't find another way:
+        // setTimeout(resetFocus, 0);
+        setHaveFocus(false);
+      } } style={{ height: 19 }}></span>
+      {
+        (haveFocus)
+        ? <Suggestions suggestions={suggestions} onSelect={onSelectSuggestion} i={i} setI={setI} />
+        : <></>
+      }
+    <span className="text-block suggest">{singleSuggestion}</span>
+    </span>
+  </span>;
+}
+
+function Suggestions({ suggestions, onSelect, i, setI }) {
+  return (suggestions.length > 0) ?
+    <div className="suggestions">
+      {suggestions.map(([name, dynamic], j) => <div key={`${j}_${name}`} className={i === j ? "selected" : ""} onClick={() => setI(j)} onDoubleClick={() => onSelect(suggestions[i])}>{name} :: <Type type={getType(dynamic)} /></div>)}
+    </div>
+    : <></>;
+}