move 'env' from state to context

src/LetInBlock.tsx

@@ -1,10 +1,12 @@
+import { useContext, useEffect, useRef } from "react";
 import { Editor, type EditorState } from "./Editor";
+import { EnvContext } from "./EnvContext";
 import type { Dynamic, State2Props } from "./util/extra";
-
+import { growEnv } from "dope2";
+import { autoInputWidth } from "./util/dom_trickery";
 
 export interface LetInBlockState {
   kind: "let";
-  env: any;
   name: string;
   value: EditorState;
   inner: EditorState;
@@ -17,13 +19,26 @@ interface LetInBlockProps extends State2Props<LetInBlockState> {
 
 
 export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
-  const {env, name, value, inner, resolved} = state;
+  const {name, value, inner} = state;
+  const env = useContext(EnvContext);
+  const nameRef = useRef<HTMLInputElement>(null);
+
   const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
     setState({...state, name: e.target.value});
   }
+
+  useEffect(() => {
+    nameRef.current?.focus();
+  }, []);
+
+  useEffect(() => autoInputWidth(nameRef, name), [nameRef, name]);
+
+  const innerEnv = (name !== '') && value.resolved
+     && growEnv(env)(name)(value.resolved) || env;
   return <span className="letIn">
     <div className="decl">
       let <input
+        ref={nameRef}
         className='editable'
         value={name}
         placeholder="<variable name>"
@@ -36,16 +51,18 @@ export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
         onCancel={() => {} }
         setState={(state: EditorState) => {} }
         />
-      in
+      &nbsp;in
     </div>
     <div className="inner">
-      <Editor
-        state={inner}
-        filter={() => true}
-        onResolve={(state: EditorState) => {} }
-        onCancel={() => {} }
-        setState={(state: EditorState) => {} }
-        />
+      <EnvContext value={innerEnv}>
+        <Editor
+          state={inner}
+          setState={innerState => setState({...state, inner})}
+          filter={() => true}
+          onResolve={onResolve}
+          onCancel={() => {}}
+          />
+      </EnvContext>
     </div>
   </span>
 }