Let ... in ... block is working

src/App.css

@@ -24,6 +24,7 @@ nav {
 
 main {
   grid-area: content;
+  overflow: scroll;
 }
 
 aside {

src/App.tsx

@@ -52,9 +52,9 @@ export function App() {
 
   const commands = [
     ["call"     , "[c] call"              ],
-    ["eval"     , "[u] [Tab] [Enter] eval"],
+    ["eval"     , "[e] [Tab] [Enter] eval"],
     ["transform", "[t] [.] transform"         ],
-    ["let"      , "[=] let ... in ..."    ],
+    ["let"      , "[l] [=] let ... in ..."    ],
   ];
 
   const [highlighted, setHighlighted] = useState(

src/CallBlock.css

@@ -5,20 +5,11 @@
   color: black;
 }
 
-.functionBlock.unifyError {
-  /* background-color: pink; */
-  /* color:white; */
-}
-
 .functionName {
   /* text-align: center; */
   background-color: white;
 }
 
-.functionBlock.unifyError .functionName {
-  /* background-color: pink; */
-}
-
 .inputParam:after {
   content: "";
   position: absolute;

src/CallBlock.tsx

@@ -152,7 +152,7 @@ function FunctionHeader({ fn, setFn, input, onFnResolve }) {
   
     //  end of recursion - draw function name
     return <div className="functionName">
-      &#119891;&#119899;&nbsp;
+      &nbsp;&#119891;&#119899;&nbsp;
       <Editor
         state={fn}
         setState={setFn}

src/Editor.tsx

@@ -26,7 +26,7 @@ interface EditorProps extends State2Props<EditorState> {
 }
 
 function getCommands(type) {
-  const commands = ['u', 't', 'Enter', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Tab', 'l', '=', '.'];
+  const commands = ['e', 't', 'Enter', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Tab', 'l', '=', '.'];
   if (getSymbol(type) === symbolFunction) {
     commands.push('c');
   }
@@ -82,7 +82,7 @@ export function Editor({state, setState, onResolve, onCancel, filter}: EditorPro
     e.preventDefault();
     setNeedCommand(false);
     // u -> pass Up
-    if (e.key === "u" || e.key === "Enter" || e.key === "Tab" && !e.shiftKey) {
+    if (e.key === "e" || e.key === "Enter" || e.key === "Tab" && !e.shiftKey) {
       onResolve(state);
       globalContext?.doHighlight.eval();
       return;

src/InputBlock.tsx

@@ -154,7 +154,7 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
       }
       {/* Input box */}
       <input ref={inputRef}
-        placeholder="start typing..."
+        placeholder="<name or literal>"
         className="editable"
         value={text}
         onInput={onInput}

src/LetInBlock.css

@@ -0,0 +1,6 @@
+
+.keyword {
+  color: blue;
+  margin: 0 2px 0 2px;
+}
+

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) => {} }
+        onResolve={() => {}}
-        onCancel={() => {} }
+        onCancel={() => {}}
-        setState={(state: EditorState) => {} }
         />
-      &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={() => {}}

src/index.css

@@ -9,4 +9,3 @@ body {
   font-style: normal;
   font-variation-settings: "wdth" 100;
 }
-

src/util/dom_trickery.ts

@@ -51,6 +51,6 @@ export function focusPrevElement() {
 
 export const autoInputWidth = (inputRef: React.RefObject<HTMLInputElement| null>, text) => {
   if (inputRef.current) {
-    inputRef.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
+    inputRef.current.style.width = `${text.length === 0 ? 150 : (text.length*8.7)}px`;
   }
 }