simplify some things

src/App.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import './App.css'
 import { Editor, type EditorState } from './Editor'
 import { initialEditorState, nonEmptyEditorState, tripleFunctionCallEditorState } from "./configurations";
+import { CommandContext } from './CommandContext';
 
 export function App() {
   const [history, setHistory] = useState([initialEditorState]);
@@ -48,22 +49,48 @@ export function App() {
     window.onkeydown = onKeyDown;
   }, []);
 
+  const commands = [
+    ["call"     , "[c] call"              ],
+    ["eval"     , "[u] [Tab] [Enter] eval"],
+    ["transform", "[t] transform"         ],
+    ["let"      , "[=] let ... in ..."    ],
+  ];
+
+  const [highlighted, setHighlighted] = useState(
+    commands.map(() => false));
+
+  const doHighlight = Object.fromEntries(commands.map(([id], i) => {
+    return [id, () => {
+      setHighlighted(h => h.with(i, true));
+      setTimeout(() => setHighlighted(h => h.with(i, false)), 100);
+    }];
+  }));
+
   return (
     <>
       <header>
         <button disabled={history.length===1} onClick={onUndo}>Undo ({history.length-1}) [Ctrl+Z]</button>
         <button disabled={future.length===0} onClick={onRedo}>Redo ({future.length})  [Ctrl+Shift+Z]</button>
+        Commands:
+        {
+          commands.map(([_, descr], i) =>
+            <span key={i} className={'command' + (highlighted[i] ? (' highlighted') : '')}>
+              {descr}
+            </span>)
+        }
       </header>
 
       <main>
-        <Editor
+        <CommandContext value={doHighlight}>
-          state={history.at(-1)!}
+          <Editor
-          setState={pushHistory}
+            state={history.at(-1)!}
-          onResolve={() => {}}
+            setState={pushHistory}
-          onCancel={() => {}}
+            onResolve={() => {}}
-          filter={() => true}
+            onCancel={() => {}}
-          focus={true}
+            filter={() => true}
-        />
+            focus={true}
+          />
+        </CommandContext>
       </main>
 
       <footer>

src/CallBlock.tsx

@@ -105,7 +105,6 @@ export function CallBlock({ state, setState, onResolve }: CallBlockProps) {
         <InputParams
           fn={state.fn}       setFn={setFn}
           input={state.input} setInput={setInput}
-          focus={true}
           onFnResolve={onFnResolve}
           onInputResolve={onInputResolve} onInputCancel={onInputCancel} />
           
@@ -158,7 +157,6 @@ function FunctionHeader({ fn, setFn, input, onFnResolve }) {
       <Editor
         state={fn}
         setState={setFn}
-        focus={false}
         onResolve={onFnResolve}
         onCancel={() => {/*todo*/}}
         filter={filterCompatibleFns} />
@@ -166,7 +164,7 @@ function FunctionHeader({ fn, setFn, input, onFnResolve }) {
   }
 }
 
-function InputParams({ fn, setFn, input, setInput, onFnResolve, onInputResolve, onInputCancel, focus }) {
+function InputParams({ fn, setFn, input, setInput, onFnResolve, onInputResolve, onInputCancel }) {
   const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {
     if (fn.resolved) {
       try {
@@ -195,7 +193,7 @@ function InputParams({ fn, setFn, input, setInput, onFnResolve, onInputResolve,
       onResolve={onInputResolve}
       onCancel={onInputCancel}
       filter={filterCompatibleInputs}
-      focus={focus} />
+      />
   </div>;
 }
 
@@ -212,5 +210,5 @@ function NestedInputParams({fn, setFn, onFnResolve}) {
     onFnResolve={onFnFnResolve}
     onInputResolve={onFnInputResolve}
     onInputCancel={() => {/*todo*/}}
-    focus={false}/>;
+    />;
 }

src/CommandContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const CommandContext = createContext<{[key:string]: () => void}>({});

src/Editor.css

@@ -3,5 +3,5 @@
 }
 
 .command {
-  width: 136px;
+  width: 160px;
 }

src/Editor.tsx

@@ -1,16 +1,17 @@
 import { getSymbol, getType, symbolFunction } from "dope2";
 
-import { useEffect, useReducer, useRef, useState } from "react";
+import { useContext, useEffect, useReducer, useRef, useState } from "react";
 import { CallBlock, type CallBlockState } from "./CallBlock";
 import { InputBlock, type InputBlockState } from "./InputBlock";
 import { Type } from "./Type";
 import { type Dynamic, type State2Props } from "./util/extra";
 
 import "./Editor.css";
-import type { LetInBlockState } from "./LetInBlock";
+import { LetInBlock, type LetInBlockState } from "./LetInBlock";
 import { focusNextElement, focusPrevElement } from "./util/dom_trickery";
 import type { LambdaBlockState } from "./LambdaBlock";
 import { initialEditorState } from "./configurations";
+import { CommandContext } from "./CommandContext";
 
 export type EditorState =
     InputBlockState
@@ -19,7 +20,6 @@ export type EditorState =
   | LambdaBlockState;
 
 interface EditorProps extends State2Props<EditorState> {
-  focus: boolean;
   filter: (suggestion: [string, Dynamic]) => boolean;
   onResolve: (state: EditorState) => void;
   onCancel: () => void;
@@ -32,6 +32,12 @@ function getCommands(type) {
   }
   return commands;
 }
+function getShortCommands(type) {
+  if (getSymbol(type) === symbolFunction) {
+    return 'c|Tab|t';
+  }
+  return 'Tab|t';
+}
 
 function removeFocus(state: EditorState): EditorState {
   if (state.kind === "input") {
@@ -46,7 +52,7 @@ function removeFocus(state: EditorState): EditorState {
   return state;
 }
 
-export function Editor({state, setState, onResolve, onCancel, filter, focus}: EditorProps) {
+export function Editor({state, setState, onResolve, onCancel, filter}: EditorProps) {
   const [needCommand, setNeedCommand] = useState(false);
   const commandInputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
@@ -65,7 +71,8 @@ export function Editor({state, setState, onResolve, onCancel, filter, focus}: Ed
       onResolve(editorState); // pass up the fact that we're unresolved
     }
   }
-  // const onMyCancel
+
+  const doHighlight = useContext(CommandContext);
   const onCommand = (e: React.KeyboardEvent) => {
     const type = getType(state.resolved);
     const commands = getCommands(type);
@@ -77,6 +84,7 @@ export function Editor({state, setState, onResolve, onCancel, filter, focus}: Ed
     // u -> pass Up
     if (e.key === "u" || e.key === "Enter" || e.key === "Tab" && !e.shiftKey) {
       onResolve(state);
+      doHighlight.eval();
       return;
     }
     if (e.key === "Tab" && e.shiftKey) {
@@ -93,6 +101,7 @@ export function Editor({state, setState, onResolve, onCancel, filter, focus}: Ed
         input: initialEditorState,
         resolved: undefined,
       });
+      doHighlight.call();
       // focusNextElement();
       return;
     }
@@ -106,6 +115,7 @@ export function Editor({state, setState, onResolve, onCancel, filter, focus}: Ed
         input: removeFocus(state),
         resolved: undefined,
       });
+      doHighlight.transform();
       return;
     }
     if (e.key === "Backspace" || e.key === "ArrowLeft") {
@@ -128,6 +138,7 @@ export function Editor({state, setState, onResolve, onCancel, filter, focus}: Ed
         value: state,
         resolved: undefined,
       });
+      doHighlight.let();
       return;
     }
   };
@@ -140,14 +151,20 @@ export function Editor({state, setState, onResolve, onCancel, filter, focus}: Ed
           setState={setState}
           filter={filter}
           onResolve={onMyResolve}
-          onCancel={onCancel} />;
+          onCancel={onCancel}
+        />;
       case "call":
         return <CallBlock
           state={state}
           setState={setState}
-          onResolve={onMyResolve} />;
+          onResolve={onMyResolve}
+        />;
       case "let":
-        return <></>;
+        return <LetInBlock
+          state={state}
+          setState={setState}
+          onResolve={() => {}}
+        />;
       case "lambda":
         return <></>;
     }  
@@ -163,7 +180,7 @@ export function Editor({state, setState, onResolve, onCancel, filter, focus}: Ed
                 ref={commandInputRef}
                 spellCheck={false}
                 className="editable command"
-                placeholder="<enter command>"
+                placeholder={`<command: ${getShortCommands(getType(state.resolved))}>`}
                 onKeyDown={onCommand}
                 value={""}
                 onChange={() => {}} /> /* gets rid of React warning */

src/LetInBlock.tsx

@@ -1,4 +1,4 @@
-import type { EditorState } from "./Editor";
+import { Editor, type EditorState } from "./Editor";
 import type { Dynamic, State2Props } from "./util/extra";
 
 
@@ -16,6 +16,36 @@ interface LetInBlockProps extends State2Props<LetInBlockState> {
 }
 
 
-export function LetInBlock({env, name, value, inner, resolved, onResolve}) {
+export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
-  
+  const {env, name, value, inner, resolved} = state;
-}
+  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setState({...state, name: e.target.value});
+  }
+  return <span className="letIn">
+    <div className="decl">
+      let <input
+        className='editable'
+        value={name}
+        placeholder="<variable name>"
+        onChange={onChangeName}
+        /> =
+      <Editor
+        state={value}
+        filter={() => true}
+        onResolve={(state: EditorState) => {} }
+        onCancel={() => {} }
+        setState={(state: EditorState) => {} }
+        />
+      in
+    </div>
+    <div className="inner">
+      <Editor
+        state={inner}
+        filter={() => true}
+        onResolve={(state: EditorState) => {} }
+        onCancel={() => {} }
+        setState={(state: EditorState) => {} }
+        />
+    </div>
+  </span>
+}

tsconfig.app.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
+    "target": "ES2023",
     "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
 

tsconfig.node.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
+    "target": "ES2023",
     "lib": ["ES2023"],
     "module": "ESNext",
     "skipLibCheck": true,