simplify rollback

src/CallBlock.tsx

@@ -14,17 +14,16 @@ export interface CallBlockState {
   fn: EditorState;
   input: EditorState;
   resolved: undefined | Dynamic;
-  rollback: EditorState;
 }
 
 interface CallBlockProps extends State2Props<CallBlockState> {
   onResolve: (resolved: EditorState) => void;
 }
 
-export function CallBlock({ state: {kind, env, fn, input, resolved, rollback }, setState, onResolve }: CallBlockProps) {
+export function CallBlock({ state: {kind, env, fn, input, resolved }, setState, onResolve }: CallBlockProps) {
   const [unifyError, setUnifyError] = useState<UnifyError | undefined>(undefined);
   const setResolved = (resolved?: Dynamic) => {
-    setState({kind, env, fn, input, resolved, rollback});
+    setState({kind, env, fn, input, resolved});
   }
 
   const makeTheCall = (input, fn) => {
@@ -34,7 +33,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved, rollback },
       setResolved(outputResolved);
       console.log("onResolve callblock..")
       onResolve({
-        kind, env, fn, input, resolved: outputResolved, rollback
+        kind, env, fn, input, resolved: outputResolved
       });
       setUnifyError(undefined);
     }
@@ -44,16 +43,16 @@ export function CallBlock({ state: {kind, env, fn, input, resolved, rollback },
       }
       setUnifyError(e);
       onResolve({
-        kind, env, fn, input, resolved: undefined, rollback
+        kind, env, fn, input, resolved: undefined
       })
     }
   }
 
   const setFn = (fn: EditorState) => {
-    setState({kind, env, fn, input, resolved, rollback});
+    setState({kind, env, fn, input, resolved});
   }
   const setInput = (input: EditorState) => {
-    setState({kind, env, fn, input, resolved, rollback});
+    setState({kind, env, fn, input, resolved});
   }
   const onFnResolve = (fnState) => {
     console.log('my fn resolved')
@@ -64,7 +63,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved, rollback },
       // setFn(fnState);
       setResolved(undefined);
       onResolve({
-        kind, env, fn: fnState, input, resolved: undefined, rollback
+        kind, env, fn: fnState, input, resolved: undefined
       });
     }
   }
@@ -77,7 +76,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved, rollback },
       // setInput(inputState);
       setResolved(undefined);
       onResolve({
-        kind, env, fn, input: inputState, resolved: undefined, rollback
+        kind, env, fn, input: inputState, resolved: undefined
       });
     }
   }
@@ -85,11 +84,7 @@ export function CallBlock({ state: {kind, env, fn, input, resolved, rollback },
 
   }
   const onInputCancel = () => {
-    // we become what we were before we became a CallBlock
-    if (rollback) {
-      setState(rollback);
-      focusPrevElement();
-    }
+    setState(fn);
   }
 
   const filterCompatibleInputs = ([_name, dynamic]: [string, Dynamic]) => {

src/Editor.tsx

@@ -8,16 +8,7 @@ import { Type } from "./Type";
 
 import "./Editor.css"
 import { focusNextElement, focusPrevElement } from "./util/dom_trickery";
-
-interface LetInBlockState {
-  kind: "let";
-  env: any;
-  name: string;
-  value: EditorState;
-  inner: EditorState;
-  resolved: undefined | Dynamic;
-  rollback?: EditorState;
-}
+import type { LetInBlockState } from "./LetInBlock";
 
 interface LambdaBlockState {
   kind: "lambda";
@@ -50,7 +41,7 @@ interface EditorProps extends State2Props<EditorState> {
 const dontFilter = () => true;
 
 function getCommands(type) {
-  const commands = ['u', 't', 'Enter', 'Backspace', 'ArrowLeft', 'Tab'];
+  const commands = ['u', 't', 'Enter', 'Backspace', 'ArrowLeft', 'Tab', 'l', '='];
   if (getSymbol(type) === symbolFunction) {
     commands.push('c');
   }
@@ -114,6 +105,21 @@ export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
       focusPrevElement();
       return;
     }
+    // l -> Let ... in ...
+    // = -> assign to name
+    if (e.key === 'l' || e.key === '=') {
+      // we become LetInBlock
+      setState({
+        kind: "let",
+        env: state.env,
+        inner: initialEditorState,
+        name: "",
+        value: state,
+        resolved: undefined,
+        rollback: state,
+      });
+      return;
+    }
   };
 
   const renderBlock = () => {

src/InputBlock.tsx

@@ -151,7 +151,15 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
 
   return <span>
     <span className="">
-      <input ref={ref} placeholder="start typing..." className="editable" value={text} onInput={onInput} onKeyDown={onKeyDown} onFocus={() => setHaveFocus(true)} onBlur={() => setTimeout(() => setHaveFocus(false), 200)}/>
+      <input ref={ref}
+        placeholder="start typing..."
+        className="editable"
+        value={text}
+        onInput={onInput}
+        onKeyDown={onKeyDown}
+        onFocus={() => setHaveFocus(true)}
+        onBlur={() => setHaveFocus(false)}
+      />
       <span className="text-block suggest">{singleSuggestion}</span>
       </span>
       <ShowIf cond={haveFocus}>

src/LetInBlock.tsx

@@ -0,0 +1,22 @@
+import type { EditorState } from "./Editor";
+import type { Dynamic, State2Props } from "./util/extra";
+
+
+export interface LetInBlockState {
+  kind: "let";
+  env: any;
+  name: string;
+  value: EditorState;
+  inner: EditorState;
+  resolved: undefined | Dynamic;
+  rollback?: EditorState;
+}
+
+interface LetInBlockProps extends State2Props<LetInBlockState> {
+  onResolve: (resolved: EditorState) => void;
+}
+
+
+export function LetInBlock({env, name, value, inner, resolved, rollback, onResolve}) {
+  
+}