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

src/CallBlock.tsx

@@ -2,11 +2,12 @@ import { useContext } from "react";
 
 import { ExprBlock, type ExprBlockState, type SetStateFn, type State2Props } from "./ExprBlock";
 import { EnvContext } from "./EnvContext";
-import { evalCallBlock2, evalEditorBlock, scoreResolved, type ResolvedType } from "./eval";
+import { addFocusRightMost, evalCallBlock2, evalEditorBlock, removeFocus, scoreResolved, type ResolvedType } from "./eval";
 import { GlobalContext } from "./GlobalContext";
 import { Value } from "./Value";
 
 import "./CallBlock.css";
+import { initialEditorState } from "./configurations";
 
 export interface CallBlockState {
   kind: "call";
@@ -40,7 +41,7 @@ function nestedInputProperties({state, setState, suggestionPriority}: CallBlockP
     setState(state => ({...state, input: callback(state.input)}));
   }
   const onInputCancel = () => {
-    setState(state => state.fn); // we become our function
+    setState(state => addFocusRightMost(state.fn)); // we become our function
   }
   const inputSuggestionPriorirty = (inputSuggestion: ResolvedType) => computePriority(
     evalEditorBlock(state.fn, env)[0], // fn *may* be set
@@ -53,9 +54,18 @@ function nestedInputProperties({state, setState, suggestionPriority}: CallBlockP
 
 export function CallBlock(props: CallBlockProps) {
   const env = useContext(EnvContext);
+  const globalContext = useContext(GlobalContext);
+  const addParam = (s: ExprBlockState) => {
+    props.setState(state => ({
+      kind: "call",
+      fn: removeFocus(state),
+      input: s,
+    }));
+    globalContext?.doHighlight.call();
+  };
   const [resolved] = evalEditorBlock(props.state, env);
   return <span className={"functionBlock" + ((resolved.kind === "error") ? " unifyError" : "")}>
-    <FunctionHeader {...props} />
+    <FunctionHeader {...props} addParam={addParam} />
     <div className="functionParams">
       <div className="outputParam">
         {/* Sequence of input parameters */}
@@ -63,6 +73,7 @@ export function CallBlock(props: CallBlockProps) {
           {...props}
           depth={0}
           errorDepth={(resolved.kind === "error") ? (resolved.depth) : -1}
+          addParam={addParam}
           />
         {  (resolved.kind === "error") && resolved.e.toString()
         || (resolved.kind === "value") && <Value dynamic={resolved} />
@@ -91,12 +102,12 @@ function FunctionHeader(props) {
     //  end of recursion - draw function name
     return <span className="functionName">
       &nbsp;&#119891;&#119899;&nbsp;
-      <ExprBlock {...nestedProperties} />
+      <ExprBlock {...nestedProperties} addParam={props.addParam} />
     </span>;
   }
 }
 
-function InputParams({ depth, errorDepth, ...rest }) {
+function InputParams({ depth, errorDepth, addParam, ...rest }) {
   const env = useContext(EnvContext);
   const globalContext = useContext(GlobalContext);
   const isOffending = depth === errorDepth;
@@ -107,10 +118,12 @@ function InputParams({ depth, errorDepth, ...rest }) {
         {...nestedFnProperties(rest as CallBlockProps, env)}
         depth={depth+1}
         errorDepth={errorDepth}
+        addParam={addParam}
         />}
     {/* Our own input param */}
     <ExprBlock
       {...nestedInputProperties(rest as CallBlockProps, env)}
+      addParam={addParam}
       />
   </div>;
 }