refactor a bit

src/LetInBlock.tsx

@@ -1,14 +1,13 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext } from "react";
 
 import { ExprBlock, type ExprBlockState } from "./ExprBlock";
 import { EnvContext } from "./EnvContext";
 import { evalEditorBlock, makeInnerEnv, scoreResolved, type ResolvedType } from "./eval";
 import { type State2Props } from "./ExprBlock";
-import { autoInputWidth } from "./util/dom_trickery";
 import { GlobalContext } from "./GlobalContext";
 
 import "./LetInBlock.css";
-import type { CallBlockState } from "./CallBlock";
+import { Input } from "./Input";
 
 export interface LetInBlockState {
   kind: "let";
@@ -39,9 +38,6 @@ function DeclColumns({state: {name, value, inner, focus}, setState, suggestionPr
 
   const setInner = callback => setState(state => ({...state, inner: callback(state.inner)}));
   const setValue = callback => setState(state => ({...state, value: callback(state.value)}));
-  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState(state => ({...state, name: e.target.value}));
-  }
 
   const valueSuggestionPriority = (suggestion: ResolvedType) => {
     const innerEnv = makeInnerEnv(env, name, suggestion);
@@ -49,28 +45,22 @@ function DeclColumns({state: {name, value, inner, focus}, setState, suggestionPr
     return scoreResolved(resolved, suggestionPriority);
   };
 
-  const nameRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    if (focus) {
-      nameRef.current?.focus();
-    }
-  }, [focus]);
-
-  useEffect(() => autoInputWidth(nameRef, name, 60), [nameRef, name]);
-
   const [valueResolved] = evalEditorBlock(value, env);
   const innerEnv = makeInnerEnv(env, name, valueResolved);
 
   return <>
     <span className="keyword column">let&nbsp;</span>
       <span className="column rightAlign">
-      <input
-        ref={nameRef}
-        className='editable'
-        value={name}
+      <Input
         placeholder="<name>"
-        onChange={onChangeName}
-        spellCheck={false}
+        text={name}
+        suggestion=""
+        focus={focus}
+        onEnter={() => {}}
+        onCancel={() => {}}
+        onTextChange={name => setState(state => ({...state, name}))}
+        setFocus={focus => setState(state => ({...state, focus}))}
+        extraHandlers={{}}
         />
       </span>
       <span className="keyword column">&nbsp;=&nbsp;</span>