hitting spacebar always adds a parameter to the first ancestor that is a CallBlock

src/LetInBlock.tsx

@@ -8,15 +8,19 @@ import { autoInputWidth } from "./util/dom_trickery";
 import { GlobalContext } from "./GlobalContext";
 
 import "./LetInBlock.css";
+import type { CallBlockState } from "./CallBlock";
 
 export interface LetInBlockState {
   kind: "let";
   name: string;
+  focus: boolean;
   value: ExprBlockState;
   inner: ExprBlockState;
 }
 
-interface LetInBlockProps extends State2Props<LetInBlockState,ExprBlockState> {}
+interface LetInBlockProps extends State2Props<LetInBlockState,ExprBlockState> {
+  addParam: (e: ExprBlockState) => void;
+}
 
 export function LetInBlock(props: LetInBlockProps) {
   return <span className="letIn">
@@ -29,7 +33,7 @@ export function LetInBlock(props: LetInBlockProps) {
   </span>
 }
 
-function DeclColumns({state: {name, value, inner}, setState, suggestionPriority}) {
+function DeclColumns({state: {name, value, inner, focus}, setState, suggestionPriority, addParam}) {
   const env = useContext(EnvContext);
   const globalContext = useContext(GlobalContext);
 
@@ -47,8 +51,11 @@ function DeclColumns({state: {name, value, inner}, setState, suggestionPriority}
 
   const nameRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
-    nameRef.current?.focus();
-  }, []);
+    if (focus) {
+      nameRef.current?.focus();
+    }
+  }, [focus]);
+
   useEffect(() => autoInputWidth(nameRef, name, 60), [nameRef, name]);
 
   const [valueResolved] = evalEditorBlock(value, env);
@@ -63,6 +70,7 @@ function DeclColumns({state: {name, value, inner}, setState, suggestionPriority}
         value={name}
         placeholder="<name>"
         onChange={onChangeName}
+        spellCheck={false}
         />
       </span>
       <span className="keyword column">&nbsp;=&nbsp;</span>
@@ -72,6 +80,7 @@ function DeclColumns({state: {name, value, inner}, setState, suggestionPriority}
           setState={setValue}
           suggestionPriority={valueSuggestionPriority}
           onCancel={() => setState(state => state.inner)} // keep inner
+          addParam={addParam}
           />
       </span>
     {inner.kind === "let" &&
@@ -81,13 +90,14 @@ function DeclColumns({state: {name, value, inner}, setState, suggestionPriority}
           state={inner}
           setState={setInner}
           suggestionPriority={suggestionPriority}
+          addParam={addParam}
           />
       </EnvContext>
     }
   </>;
 }
 
-function InnerMost({state, setState, suggestionPriority}) {
+function InnerMost({state, setState, suggestionPriority, addParam}) {
   const env = useContext(EnvContext);
   const globalContext = useContext(GlobalContext);
   const setInner = callback => setState(state => ({...state, inner: callback(state.inner)}));
@@ -100,6 +110,7 @@ function InnerMost({state, setState, suggestionPriority}) {
           state={state.inner}
           setState={setInner}
           suggestionPriority={suggestionPriority}
+          addParam={addParam}
           />
       </EnvContext>;
   }
@@ -110,6 +121,7 @@ function InnerMost({state, setState, suggestionPriority}) {
         setState={setInner}
         suggestionPriority={suggestionPriority}
         onCancel={onCancel} // keep value
+        addParam={addParam}
         />
     </EnvContext>
   }