decent progress

src/InputBlock.tsx

@@ -7,25 +7,28 @@ import { Type } from "./Type";
 
 import "./InputBlock.css";
 import type { Dynamic, State2Props } from "./util/extra";
+import type { EditorState } from "./Editor";
 
 export interface InputBlockState {
   kind: "input";
   env: any;
   text: string;
   resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 interface InputBlockProps extends State2Props<InputBlockState> {
   filter: (ls: any[]) => boolean;
   onResolve: (state: InputBlockState) => void;
+  onCancel: () => void;
 }
 
-export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve }: InputBlockProps) {
+export function InputBlock({ state: {kind, env, text, resolved, rollback}, setState, filter, onResolve, onCancel }: InputBlockProps) {
   const ref = useRef<any>(null);
   useEffect(() => {
     ref.current?.focus();
     if (ref.current) {
-      ref.current.textContent = text;
+      // ref.current.textContent = text;
     }
   }, []);
 
@@ -33,10 +36,10 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
   const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
 
   const setText = (text: string) => {
-    setState({kind, env, text, resolved});
+    setState({kind, env, text, resolved, rollback});
   }
   const setResolved = (resolved: Dynamic) => {
-    setState({kind, env, text, resolved});
+    setState({kind, env, text, resolved, rollback});
   }
 
   const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
@@ -53,28 +56,45 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
 
   useEffect(() => {
     setI(0); // reset
-    const found = trie.get(env.name2dyn)(text);
-    setResolved(found); // may be undefined
+    if (ref.current) {
+      ref.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
+    }
   }, [text]);
-  
 
-  const onSelectSuggestion = ([name, _dynamic]) => {
+  const onSelectSuggestion = ([name, dynamic]) => {
+    console.log(name);
     // setText(name);
     // ref.current.textContent = name;
     // setRightMostCaretPosition(ref.current);
     // setI(0);
+    // setResolved(dynamic);
+    console.log("onResolve inputblock..")
     onResolve({
-      env,
       kind: "input",
-      resolved: _dynamic,
+      env,
       text: name,
+      resolved: dynamic,
+      rollback,
     });
   };
 
   const onInput = e => {
-    setText(e.target.textContent);
+    setText(e.target.value);
+    if (resolved) {
+      onResolve({
+        kind: "input",
+        env,
+        text: e.target.value,
+        resolved: undefined,
+        rollback,
+      });
+    }
   };
 
+  const getCaretPosition = () => {
+    return ref.current.selectionStart;
+  }
+
   const onKeyDown = (e: React.KeyboardEvent) => {
     const fns = {
       Tab: () => {
@@ -87,7 +107,7 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
           if (singleSuggestion.length > 0) {
             const newText = text + singleSuggestion;
             setText(newText);
-            ref.current.textContent = newText;
+            // ref.current.textContent = newText;
             setRightMostCaretPosition(ref.current);
             e.preventDefault();  
           }
@@ -117,33 +137,33 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
         onSelectSuggestion(suggestions[i]);
         e.preventDefault();
       },
+      Backspace: () => {
+        if (text.length === 0) {
+          onCancel();
+          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>
+    <span className="">
+      <input ref={ref} placeholder="start typing..." autoFocus={true} className="editable" value={text} onInput={onInput} onKeyDown={onKeyDown} onFocus={() => setHaveFocus(true)} onBlur={() => setHaveFocus(false)}/>
+      <span className="text-block suggest">{singleSuggestion}</span>
+      </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>)}
+      {suggestions.map(([name, dynamic], j) => <div key={`${j}_${name}`} className={i === j ? "selected" : ""} onClick={() => onSelect(suggestions[i])}>{name} :: <Type type={getType(dynamic)} /></div>)}
     </div>
     : <></>;
 }