a bit more progress

src/Editor.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { Type } from "./Type";
 
 import "./Editor.css"
-import { focusNextElement } from "./util/dom_trickery";
+import { focusNextElement, focusPrevElement } from "./util/dom_trickery";
 
 interface LetInBlockState {
   kind: "let";
@@ -49,22 +49,43 @@ interface EditorProps extends State2Props<EditorState> {
 
 const dontFilter = () => true;
 
+function getCommands(type) {
+  const commands = ['u', 't', 'Enter', 'Backspace', 'ArrowLeft', 'Tab'];
+  if (getSymbol(type) === symbolFunction) {
+    commands.push('c');
+  }
+  return commands;
+}
+
 export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
-  const [proxyState, setProxyState] = useState<'unresolved'|'command'|'resolved'>('unresolved');
+  const [needCommand, setNeedCommand] = useState(false);
   const onMyResolve = (editorState: EditorState) => {
     setState(editorState);
     if (editorState.resolved) {
-      setProxyState('command');
+      setNeedCommand(true);
     }
     else {
-      setProxyState('unresolved');
+      // unresolved
+      setNeedCommand(false);
+      onResolve(editorState); // pass up the fact that we're unresolved
     }
   }
   // const onMyCancel
   const onCommand = (e: React.KeyboardEvent) => {
     const type = getType(state.resolved);
-    if (e.key === "c" && getSymbol(type) === symbolFunction) {
-      e.preventDefault();
+    const commands = getCommands(type);
+    if (!commands.includes(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    setNeedCommand(false);
+    // u -> pass Up
+    if (e.key === "u" || e.key === "Enter" || e.key === "Tab") {
+      onResolve(state);
+      return;
+    }
+    // c -> Call
+    if (e.key === "c") {
       // we become CallBlock
       setState({
         kind: "call",
@@ -74,11 +95,24 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
         resolved: undefined,
         rollback: state,
       });
-      setProxyState('resolved');
+      return;
     }
-    if (e.key === "u" || e.key === "Enter") {
-      setProxyState('resolved');
-      onResolve(state);
+    // t -> Transform
+    if (e.key === "t") {
+      // we become CallBlock
+      setState({
+        kind: "call",
+        env: state.env,
+        fn: initialEditorState,
+        input: state,
+        resolved: undefined,
+        rollback: state,
+      });
+      return;
+    }
+    if (e.key === "Backspace" || e.key === "ArrowLeft") {
+      focusPrevElement();
+      return;
     }
   };
 
@@ -100,7 +134,7 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
       (state.resolved)
       ? <div className="typeSignature">
           :: <Type type={getType(state.resolved)} />
-          { (proxyState === 'command')
+          { (needCommand)
             ? <input autoFocus={true} className="editable command" placeholder="<enter command>" onKeyDown={onCommand} value=""/>
             : <></>
           }