Let ... in ... block is working

src/LetInBlock.tsx

@@ -5,6 +5,8 @@ import type { Dynamic, State2Props } from "./util/extra";
 import { growEnv } from "dope2";
 import { autoInputWidth } from "./util/dom_trickery";
 
+import "./LetInBlock.css";
+
 export interface LetInBlockState {
   kind: "let";
   name: string;
@@ -23,6 +25,9 @@ export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
   const env = useContext(EnvContext);
   const nameRef = useRef<HTMLInputElement>(null);
 
+  const setInner = inner => setState({...state, inner});
+  const setValue = value => setState({...state, value});
+
   const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
     setState({...state, name: e.target.value});
   }
@@ -37,27 +42,29 @@ export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
      && growEnv(env)(name)(value.resolved) || env;
   return <span className="letIn">
     <div className="decl">
-      let <input
+      <span className="keyword">let</span>
+      <input
         ref={nameRef}
         className='editable'
         value={name}
         placeholder="<variable name>"
         onChange={onChangeName}
-        /> =
+        />
+        <span className="keyword">=</span>
       <Editor
         state={value}
+        setState={setValue}
         filter={() => true}
-        onResolve={(state: EditorState) => {} }
-        onCancel={() => {} }
-        setState={(state: EditorState) => {} }
+        onResolve={() => {}}
+        onCancel={() => {}}
         />
-      &nbsp;in
+      &nbsp;<span className="keyword">in</span>
     </div>
     <div className="inner">
       <EnvContext value={innerEnv}>
         <Editor
           state={inner}
-          setState={innerState => setState({...state, inner})}
+          setState={setInner}
           filter={() => true}
           onResolve={onResolve}
           onCancel={() => {}}