refactor a bit

src/LambdaBlock.tsx

@@ -1,15 +1,14 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext } from "react";
 
-import { eqType, getSymbol, reduceUnification, trie } from "dope2";
+import { eqType, getSymbol, reduceUnification } from "dope2";
 
 import { ExprBlock, type ExprBlockState, type State2Props } from "./ExprBlock";
 import { EnvContext } from "./EnvContext";
 import { evalEditorBlock, makeInnerEnv, makeTypeVar } from "./eval";
-import { autoInputWidth } from "./util/dom_trickery";
 
 import "./LambdaBlock.css";
 import { Type } from "./Type";
-import type { CallBlockState } from "./CallBlock";
+import { Input } from "./Input";
 
 export interface LambdaBlockState {
   kind: "lambda";
@@ -28,7 +27,6 @@ interface LambdaBlockProps<
 
 export function LambdaBlock({state, setState, suggestionPriority, addParam}: LambdaBlockProps) {
   const env = useContext(EnvContext);
-  const nameRef = useRef<HTMLInputElement>(null);
 
   const setParamName = paramName => setState(state => ({
     ...state,
@@ -39,21 +37,6 @@ export function LambdaBlock({state, setState, suggestionPriority, addParam}: Lam
     expr: callback(state.expr),
   }));
 
-  const onChangeName = (e) => {
-    if (state.paramName === "" && e.key === 'Backspace') {
-      setState(state => state.expr);
-      e.preventDefault();
-    }
-  };
-
-  useEffect(() => {
-    if (state.focus) {
-      nameRef.current?.focus();
-    }
-  }, [state.focus]);
-
-  useEffect(() => autoInputWidth(nameRef, state.paramName, 60), [nameRef, state.paramName]);
-
   const [paramType, staticInnerEnv] = makeTypeVar(env, state.paramName);
 
   const [exprResolved] = evalEditorBlock(state.expr, staticInnerEnv);
@@ -66,23 +49,23 @@ export function LambdaBlock({state, setState, suggestionPriority, addParam}: Lam
       kind: "unknown",
       t: inferredParamType,
       unification: new Map(), // <- is this correct?
-    })
-
-  // const {exprResolved, env: newEnv} = computeLambdaBlockType(state.paramName, state.expr, env);
+    });
   
   return <span className="lambdaBlock">
     <span className="keyword">&#955;</span>
     &nbsp;
     <span className="lambdaInputParam">
-      <input
-          ref={nameRef}
-          className='editable'
-          value={state.paramName}
-          placeholder="<name>"
-          onKeyDown={onChangeName}
-          onChange={e => setParamName(e.target.value)}
-          spellCheck={false}
-          />
+      <Input
+        placeholder="<name>"
+        text={state.paramName}
+        suggestion=""
+        focus={state.focus}
+        onEnter={() => {}}
+        onCancel={() => {}}
+        onTextChange={txt => setParamName(txt)}
+        setFocus={focus => setState(state => ({...state, focus}))}
+        extraHandlers={{}}
+        />
     </span>
     <div className="typeSignature">
         &nbsp;::&nbsp;<Type type={inferredParamType} />