From 230916ceb1848a9f0ad17e02847b496e4ceddf06 Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Tue, 20 May 2025 14:53:24 +0200
Subject: [PATCH] refactor a bit

---
 src/App.tsx              |  26 ++---
 src/ExprBlock.css        |   5 -
 src/ExprBlock.tsx        | 199 ++++++++++-----------------------------
 src/Input.tsx            | 156 ++++++++++++++++++++++++++++++
 src/InputBlock.tsx       | 132 +++++++-------------------
 src/LambdaBlock.tsx      |  47 +++------
 src/LetInBlock.tsx       |  32 +++----
 src/Type.css             |   2 +
 src/actions.ts           |  60 ++++++++++++
 src/eval.ts              |  24 ++---
 src/util/dom_trickery.ts |  56 -----------
 src/util/parse.ts        |   1 -
 12 files changed, 342 insertions(+), 398 deletions(-)
 create mode 100644 src/Input.tsx
 create mode 100644 src/actions.ts
 delete mode 100644 src/util/dom_trickery.ts
 delete mode 100644 src/util/parse.ts

diff --git a/src/App.tsx b/src/App.tsx
index c2cce23..53e2171 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,14 +4,8 @@ import { ExprBlock, type ExprBlockState } from './ExprBlock';
 import { GlobalContext } from './GlobalContext';
 import { biggerExample, higherOrder, higherOrder2Params, inc, initialEditorState, lambda2Params, nonEmptyEditorState, pushBool, tripleFunctionCallEditorState } from "./configurations";
 import { removeFocus } from "./eval";
+import { actionShortcuts, getActions } from './actions';
 
-const commands: [string, string[], string][] = [
-  ["call"     , ['c'              ], "call"          ],
-  ["eval"     , ['e','Tab','Enter'], "eval"          ],
-  ["transform", ['t', '.'         ], "transform"     ],
-  ["let"      , ['l', '='         ], "let … in …"    ],
-  ["lambda"   , ['a'              ], "λx: …"         ],
-];
 
 const examples: [string, ExprBlockState][] = [
   ["empty editor"        , initialEditorState           ],
@@ -114,9 +108,9 @@ export function App() {
   }, []);
 
   const [highlighted, setHighlighted] = useState(
-    commands.map(() => false));
+    actionShortcuts.map(() => false));
 
-  const doHighlight = Object.fromEntries(commands.map(([id], i) => {
+  const doHighlight = Object.fromEntries(actionShortcuts.map(([id], i) => {
     return [id, () => {
       setHighlighted(h => h.with(i, true));
       setTimeout(() => setHighlighted(h => h.with(i, false)), 100);
@@ -138,9 +132,10 @@ export function App() {
         <button disabled={appState.history.length===1} onClick={onUndo}>Undo ({appState.history.length-1}) <kbd>Ctrl</kbd>+<kbd>Z</kbd></button>
         <button disabled={appState.future.length===0} onClick={onRedo}>Redo ({appState.future.length})  <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></button>
         {
-          commands.map(([_, keys, descr], i) =>
+          actionShortcuts.map(([_, keys, descr], i) =>
             <span key={i} className={'command' + (highlighted[i] ? (' highlighted') : '')}>
               {keys.map((key, j) => <kbd key={j}>{key}</kbd>)}
+              &nbsp;
               {descr}
             </span>)
         }
@@ -173,18 +168,11 @@ export function App() {
               // console.log('suggestionPriority of App, always 0');
               return 0;
             }}
-            addParam={(s: ExprBlockState) => {
-              pushHistory(state => ({
-                kind: "call",
-                fn: removeFocus(state),
-                input: initialEditorState,
-              }));
-              doHighlight.call();
+            addParam={() => {
+              getActions({doHighlight}, pushHistory).c();
             }}
           />
         </GlobalContext>
-
-
       </main>
 
       <footer>
diff --git a/src/ExprBlock.css b/src/ExprBlock.css
index bb7825b..97e0ea3 100644
--- a/src/ExprBlock.css
+++ b/src/ExprBlock.css
@@ -28,11 +28,6 @@
   display: inline-block;
 }
 
-.commandInput {
-  width: 30px;
-  margin-left: 10px;
-}
-
 .keyword {
   color: blue;
   font-weight: bold;
diff --git a/src/ExprBlock.tsx b/src/ExprBlock.tsx
index 132da6e..b4250e7 100644
--- a/src/ExprBlock.tsx
+++ b/src/ExprBlock.tsx
@@ -1,6 +1,6 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext } from "react";
 
-import { getSymbol, getType, symbolFunction } from "dope2";
+import { getType } from "dope2";
 
 import { CallBlock, type CallBlockState } from "./CallBlock";
 import { EnvContext } from "./EnvContext";
@@ -9,11 +9,11 @@ import { InputBlock, type InputBlockState } from "./InputBlock";
 import { LambdaBlock, type LambdaBlockState } from "./LambdaBlock";
 import { LetInBlock, type LetInBlockState } from "./LetInBlock";
 import { Type } from "./Type";
-import { initialEditorState } from "./configurations";
-import { evalEditorBlock, removeFocus, type ResolvedType } from "./eval";
-import { focusNextElement, focusPrevElement } from "./util/dom_trickery";
+import { evalEditorBlock, type ResolvedType } from "./eval";
 
 import "./ExprBlock.css";
+import { Input } from "./Input";
+import { getActions } from "./actions";
 
 export type ExprBlockState =
     InputBlockState
@@ -34,160 +34,57 @@ interface ExprBlockProps extends State2Props<ExprBlockState> {
   addParam: (e: ExprBlockState) => void;
 }
 
-function getCommands(type) {
-  const commands = ['e', 't', 'Enter', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Tab', 'l', '=', '.'];
-  if (getSymbol(type) === symbolFunction) {
-    commands.push('c');
-  }
-  return commands;
-}
-function getShortCommands(type) {
-  if (getSymbol(type) === symbolFunction) {
-    return 'c|Tab|.';
-  }
-  return 'Tab|.';
-}
-
 export function ExprBlock({state, setState, suggestionPriority, onCancel, addParam}: ExprBlockProps) {
   const env = useContext(EnvContext);
-  const [needCommand, setNeedCommand] = useState(false);
-  const commandInputRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    if (needCommand) {
-      commandInputRef.current?.focus();
-    }
-  }, [needCommand]);
-
   const globalContext = useContext(GlobalContext);
-  const onCommand = (e: React.KeyboardEvent) => {
-    const commands = ['e', 't', 'Enter', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Tab', 'l', 'L', '=', '.', 'c', 'a'];
-    if (!commands.includes(e.key)) {
-      return;
-    }
-    e.preventDefault();
-    setNeedCommand(false);
-    // u -> pass Up
-    if (e.key === "e" || e.key === "Enter" || e.key === "Tab" && !e.shiftKey) {
-      // onResolve(state);
-      globalContext?.doHighlight.eval();
-      return;
-    }
-    if (e.key === "Tab" && e.shiftKey) {
-      setNeedCommand(false);
-      focusPrevElement();
-    }
-    // c -> Call
-    if (e.key === "c") {
-      // we become CallBlock
-      setState(state => ({
-        kind: "call",
-        fn: removeFocus(state),
-        input: initialEditorState,
-      }));
-      globalContext?.doHighlight.call();
-      // focusNextElement();
-      return;
-    }
-    // t -> Transform
-    if (e.key === "t" || e.key === ".") {
-      // we become CallBlock
-      setState(state => ({
-        kind: "call",
-        fn: initialEditorState,
-        input: removeFocus(state),
-      }));
-      globalContext?.doHighlight.transform();
-      return;
-    }
-    if (e.key === "Backspace" || e.key === "ArrowLeft") {
-      focusPrevElement();
-      return;
-    }
-    if (e.key === "ArrowRight") {
-      focusNextElement();
-      return;
-    }
-    // l -> Let ... in ...
-    // = -> assign to name
-    if (e.key === 'l' || e.key === '=' && !e.shiftKey) {
-      // we become LetInBlock
-      setState(state => ({
-        kind: "let",
-        name: "",
-        focus: true,
-        value: removeFocus(state),
-        inner: removeFocus(initialEditorState),
-      }));  
-      globalContext?.doHighlight.let();
-      return;
-    }
-    if (e.key === 'L' || e.key === '=' && e.shiftKey) {
-      setState(state => ({
-        kind: "let",
-        name: "",
-        focus: true,
-        value: removeFocus(initialEditorState),
-        inner: removeFocus(state),
-      }));
-    }
-    // a -> lAmbdA
-    if (e.key === "a") {
-      setState(state => ({
-        kind: "lambda",
-        paramName: "",
-        focus: true,
-        expr: removeFocus(state),
-      }));
-      globalContext?.doHighlight.lambda();
-      return;
-    }
-  };
 
-  const renderBlock = () => {
-    switch (state.kind) {
-      case "input":
-        return <InputBlock
-          state={state}
-          setState={setState as (callback:(p:InputBlockState)=>ExprBlockState)=>void}
-          suggestionPriority={suggestionPriority}
-          onCancel={onCancel}
-          addParam={addParam}
-        />;
-      case "call":
-        return <CallBlock
-          state={state}
-          setState={setState as (callback:(p:CallBlockState)=>ExprBlockState)=>void}
-          suggestionPriority={suggestionPriority}
-        />;
-      case "let":
-        return <LetInBlock
-          state={state}
-          setState={setState as (callback:(p:LetInBlockState)=>ExprBlockState)=>void}
-          suggestionPriority={suggestionPriority}
-          addParam={addParam}
-          />;
-      case "lambda":
-        return <LambdaBlock
-          state={state}
-          setState={setState as (callback:(p:LambdaBlockState)=>ExprBlockState)=>void}
-          suggestionPriority={suggestionPriority}
-          addParam={addParam}
-          />;
-    }  
-  }
+  const renderBlock = {
+    input: () => <InputBlock
+        state={state as InputBlockState}
+        setState={setState as (callback:(p:InputBlockState)=>ExprBlockState)=>void}
+        suggestionPriority={suggestionPriority}
+        onCancel={onCancel}
+        addParam={addParam}
+      />,
+    call: () => <CallBlock
+        state={state as CallBlockState}
+        setState={setState as (callback:(p:CallBlockState)=>ExprBlockState)=>void}
+        suggestionPriority={suggestionPriority}
+      />,
+    let: () => <LetInBlock
+      state={state as LetInBlockState}
+      setState={setState as (callback:(p:LetInBlockState)=>ExprBlockState)=>void}
+      suggestionPriority={suggestionPriority}
+      addParam={addParam}
+      />,
+    lambda: () => <LambdaBlock
+      state={state as LambdaBlockState}
+      setState={setState as (callback:(p:LambdaBlockState)=>ExprBlockState)=>void}
+      suggestionPriority={suggestionPriority}
+      addParam={addParam}
+      />,
+  };
+  
   const [resolved] = evalEditorBlock(state, env);
+  const actions = getActions(globalContext, setState);
+  const extraHandlers = Object.fromEntries(Object.entries(actions).map(([shortcut, action]) =>
+    [shortcut, (e) => { e.preventDefault(); action(); }]))
+
   return <span className={"editor" + ((resolved.kind!=="value") ? " "+resolved.kind : "")}>
-    {renderBlock()}
+    {renderBlock[state.kind]()}
     <div className="typeSignature">
     &nbsp;::&nbsp;<Type type={getType(resolved)} />
     </div>
-    <input
-      ref={commandInputRef}
-      spellCheck={false}
-      className="editable commandInput"
-      placeholder={`<c>`}
-      onKeyDown={onCommand}
-      value={""}
-      onChange={() => {}} />
+    <Input
+      placeholder="<c>"
+      text=""
+      suggestion=""
+      focus={false}
+      onEnter={() => {}}
+      onCancel={onCancel}
+      onTextChange={() => {}}
+      setFocus={() => {}}
+      extraHandlers={extraHandlers}
+      />
   </span>;
 }
diff --git a/src/Input.tsx b/src/Input.tsx
new file mode 100644
index 0000000..3065297
--- /dev/null
+++ b/src/Input.tsx
@@ -0,0 +1,156 @@
+import { useEffect, useRef, type ReactNode, type KeyboardEvent, useState } from "react";
+
+interface InputProps {
+  placeholder: string;
+  text: string;
+  suggestion: string;
+  onTextChange: (text: string) => void;
+  focus: boolean;
+  setFocus: (focus: boolean) => void;
+
+  onEnter: () => void;
+  onCancel: () => void;
+  extraHandlers: {[key:string]: (e: KeyboardEvent) => void}
+
+  children?: ReactNode | ReactNode[];
+}
+
+const autoInputWidth = (ref: React.RefObject<HTMLInputElement| null>, text, emptyWidth=150) => {
+  if (ref.current) {
+    ref.current.style.width = `${text.length === 0 ? emptyWidth : (text.length*8.0)}px`;
+  }
+}
+
+function getCaretPosition(ref: React.RefObject<HTMLInputElement| null>): number {
+  return ref.current?.selectionStart || 0;
+}
+
+// Move caret all the way to the right in the currently focused element
+function setRightMostCaretPosition(elem) {
+  const range = document.createRange();
+  range.selectNode(elem);
+  if (elem.lastChild) { // if no text is entered, there is no lastChild
+    range.setStart(elem.lastChild, elem.textContent.length);
+    range.setEnd(elem.lastChild, elem.textContent.length);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+}
+
+function focusNextElement() {
+  const editable = Array.from<any>(document.querySelectorAll('input.editable'));
+  const index = editable.indexOf(document.activeElement);
+  const nextElem = editable[index+1];
+  if (nextElem) {
+    nextElem.focus();
+  }
+}
+
+function focusPrevElement() {
+  const editable = Array.from<any>(document.querySelectorAll('input.editable'));
+  const index = editable.indexOf(document.activeElement);
+  const prevElem = editable[index-1]
+  if (prevElem) {
+    prevElem.focus();
+    setRightMostCaretPosition(prevElem);
+  }
+}
+
+export function Input({placeholder, text, suggestion, onTextChange, focus, setFocus, onEnter, onCancel, extraHandlers, children}: InputProps) {
+  const ref = useRef<HTMLInputElement>(null);
+  const [hideChildren, setHideChildren] = useState(false);
+
+  useEffect(() => {
+    if (focus) {
+      ref.current?.focus();
+      setHideChildren(false);
+    }
+  }, [focus]);
+
+  useEffect(() => autoInputWidth(ref, (text+(focus?suggestion:'')) || placeholder), [ref, text, suggestion, focus]);
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    setHideChildren(false);
+
+    const keys = {
+      // auto-complete
+      Tab: () => {
+        if (e.shiftKey) {
+          focusPrevElement();
+          e.preventDefault();
+        }
+        else {
+          // not shift key
+          if (suggestion.length > 0) {
+            // complete with greyed out text
+            const newText = text + suggestion;
+            onTextChange(newText);
+            setRightMostCaretPosition(ref.current);
+            e.preventDefault();
+          }
+          else {
+            onEnter();
+            e.preventDefault();
+          }
+        }
+      },
+      Enter: () => {
+        onEnter();
+        e.preventDefault();
+      },
+
+      // cancel
+      Backspace: () => {
+        if (text.length === 0) {
+          onCancel();
+          e.preventDefault();
+        }
+      },
+
+      // navigate with arrows
+      ArrowLeft: () => {
+        if (getCaretPosition(ref) <= 0) {
+          focusPrevElement();
+          e.preventDefault();
+        }
+      },
+      ArrowRight: () => {
+        if (getCaretPosition(ref) === text.length) {
+          focusNextElement();
+          e.preventDefault();
+        }
+      },
+
+      Escape: () => {
+        if (!hideChildren) {
+          setHideChildren(true);
+          e.preventDefault();
+        }
+      },
+
+      ...extraHandlers,
+    };
+    const handler = keys[e.key];
+    if (handler) {
+      handler(e);
+    }
+  };
+
+  return <span className="inputBlock">
+    {focus && !hideChildren && children}
+    <span className="editable suggest">{text}{focus && suggestion}</span>
+    <input ref={ref}
+      placeholder={placeholder}
+      className="editable"
+      value={text}
+      onInput={(e) =>
+        // @ts-ignore
+        onTextChange(e.target.value)}
+      onKeyDown={onKeyDown}
+      onFocus={() => setFocus(true)}
+      onBlur={() => setFocus(false)}
+      spellCheck={false}
+      />
+  </span>;
+}
diff --git a/src/InputBlock.tsx b/src/InputBlock.tsx
index 711d63d..48ba4cc 100644
--- a/src/InputBlock.tsx
+++ b/src/InputBlock.tsx
@@ -7,11 +7,9 @@ import type { Dynamic, ResolvedType } from "./eval";
 import "./InputBlock.css";
 import { Type } from "./Type";
 import type { ExprBlockState, State2Props } from "./ExprBlock";
-import { autoInputWidth, focusNextElement, focusPrevElement, setRightMostCaretPosition } from "./util/dom_trickery";
-import { attemptParseLiteral, removeFocus } from "./eval";
-import { GlobalContext } from "./GlobalContext";
+import { attemptParseLiteral } from "./eval";
+import { Input } from "./Input";
 import { initialEditorState } from "./configurations";
-import type { CallBlockState } from "./CallBlock";
 
 interface Literal {
   kind: "literal";
@@ -64,17 +62,14 @@ const computeSuggestions = (text, env, suggestionPriority: (s: ResolvedType) =>
 }
 
 export function InputBlock({ state, setState, suggestionPriority, onCancel, addParam }: InputBlockProps) {
-  const globalContext = useContext(GlobalContext);
   const {text, focus} = state;
   const env = useContext(EnvContext);
   const inputRef = useRef<HTMLInputElement>(null);
   const [i, setI] = useState(0); // selected suggestion idx
-  const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
 
   const singleSuggestion = trie.growPrefix(env.names)(text);
   const suggestions = useMemo(() => computeSuggestions(text, env, suggestionPriority), [text, suggestionPriority, env]);
 
-  useEffect(() => autoInputWidth(inputRef, text+singleSuggestion), [inputRef, text, singleSuggestion]);
 
   useEffect(() => {
     if (focus) {
@@ -88,10 +83,6 @@ export function InputBlock({ state, setState, suggestionPriority, onCancel, addP
     }
   }, [suggestions.length]);
 
-  const getCaretPosition = () => {
-    return inputRef.current?.selectionStart || -1;
-  }
-
   const onTextChange = newText => {
     setState(state => ({...state,
       text: newText,
@@ -101,73 +92,8 @@ export function InputBlock({ state, setState, suggestionPriority, onCancel, addP
     }));
   }
 
-  // fired before onInput
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    const fns = {
-      Tab: () => {
-        if (e.shiftKey) {
-          focusPrevElement();
-          e.preventDefault();
-        }
-        else {
-          // not shift key
-          if (singleSuggestion.length > 0) {
-            const newText = text + singleSuggestion;
-            onTextChange(newText);
-            setRightMostCaretPosition(inputRef.current);
-            e.preventDefault();  
-          }
-          else {
-            onSelectSuggestion(suggestions[i]);
-            e.preventDefault();
-          }
-        }
-      },
-      ArrowDown: () => {
-        setI((i + 1) % suggestions.length);
-        e.preventDefault();
-      },
-      ArrowUp: () => {
-        setI((suggestions.length + i - 1) % suggestions.length);
-        e.preventDefault();  
-      },
-      ArrowLeft: () => {
-        if (getCaretPosition() <= 0) {
-          focusPrevElement();
-          e.preventDefault();
-        }
-      },
-      ArrowRight: () => {
-        if (getCaretPosition() === text.length) {
-          focusNextElement();
-          e.preventDefault();
-        }
-      },
-      Enter: () => {
-        onSelectSuggestion(suggestions[i]);
-        e.preventDefault();
-      },
-      Backspace: () => {
-        if (text.length === 0) {
-          onCancel();
-          e.preventDefault();
-        }
-      },
-      " ": () => {
-        e.preventDefault();
-        if (text.length > 0) {
-          addParam(initialEditorState);
-        }
-      },
-    };
-    fns[e.key]?.();
-  };
-
-  const onInput = e => {
-    onTextChange(e.target.value);
-  };
-
-  const onSelectSuggestion = ([priority, kind, name, dynamic]: PrioritizedSuggestionType) => {
+  const onSelectSuggestion = () => {
+    const [_priority, kind, name, dynamic] = suggestions[i];
     if (kind === "literal") {
       setState(state => ({
         ...state,
@@ -184,29 +110,41 @@ export function InputBlock({ state, setState, suggestionPriority, onCancel, addP
     }
   };
 
-  return <span className="inputBlock">
-    {/* Dropdown suggestions */}
-    {haveFocus &&
-      <span className="suggestionsPlaceholder">
+  const extraHandlers = {
+    ArrowDown: (e) => {
+      setI((i + 1) % suggestions.length);
+      e.preventDefault();
+    },
+    ArrowUp: (e) => {
+      setI((suggestions.length + i - 1) % suggestions.length);
+      e.preventDefault();
+    },
+    " ": (e) => {
+      if (text.length > 0) {
+        addParam(initialEditorState);
+      }
+      e.preventDefault();
+    },
+  };
+
+  return <Input
+    placeholder="<name or literal>"
+    focus={focus}
+    setFocus={focus => setState(state => ({...state, focus}))}
+    onCancel={onCancel}
+    onEnter={onSelectSuggestion}
+    onTextChange={onTextChange}
+    text={text}
+    suggestion={singleSuggestion}
+    extraHandlers={extraHandlers}
+    > 
+      {focus && <span className="suggestionsPlaceholder">
         <Suggestions
           suggestions={suggestions}
           onSelect={onSelectSuggestion}
           i={i} setI={setI} />
-      </span>
-    }
-    {/* Single 'grey' suggestion */}
-    <span className="editable suggest">{text}{singleSuggestion}</span>
-    {/* Input box */}
-    <input ref={inputRef}
-      placeholder="<name or literal>"
-      className="editable"
-      value={text}
-      onInput={onInput}
-      onKeyDown={onKeyDown}
-      onFocus={() => setHaveFocus(true)}
-      onBlur={() => setHaveFocus(false)}
-      spellCheck={false}/>
-  </span>;
+      </span>}
+    </Input>
 }
 
 function Suggestions({ suggestions, onSelect, i, setI }) {
diff --git a/src/LambdaBlock.tsx b/src/LambdaBlock.tsx
index f49b630..906d16c 100644
--- a/src/LambdaBlock.tsx
+++ b/src/LambdaBlock.tsx
@@ -1,15 +1,14 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext } from "react";
 
-import { eqType, getSymbol, reduceUnification, trie } from "dope2";
+import { eqType, getSymbol, reduceUnification } from "dope2";
 
 import { ExprBlock, type ExprBlockState, type State2Props } from "./ExprBlock";
 import { EnvContext } from "./EnvContext";
 import { evalEditorBlock, makeInnerEnv, makeTypeVar } from "./eval";
-import { autoInputWidth } from "./util/dom_trickery";
 
 import "./LambdaBlock.css";
 import { Type } from "./Type";
-import type { CallBlockState } from "./CallBlock";
+import { Input } from "./Input";
 
 export interface LambdaBlockState {
   kind: "lambda";
@@ -28,7 +27,6 @@ interface LambdaBlockProps<
 
 export function LambdaBlock({state, setState, suggestionPriority, addParam}: LambdaBlockProps) {
   const env = useContext(EnvContext);
-  const nameRef = useRef<HTMLInputElement>(null);
 
   const setParamName = paramName => setState(state => ({
     ...state,
@@ -39,21 +37,6 @@ export function LambdaBlock({state, setState, suggestionPriority, addParam}: Lam
     expr: callback(state.expr),
   }));
 
-  const onChangeName = (e) => {
-    if (state.paramName === "" && e.key === 'Backspace') {
-      setState(state => state.expr);
-      e.preventDefault();
-    }
-  };
-
-  useEffect(() => {
-    if (state.focus) {
-      nameRef.current?.focus();
-    }
-  }, [state.focus]);
-
-  useEffect(() => autoInputWidth(nameRef, state.paramName, 60), [nameRef, state.paramName]);
-
   const [paramType, staticInnerEnv] = makeTypeVar(env, state.paramName);
 
   const [exprResolved] = evalEditorBlock(state.expr, staticInnerEnv);
@@ -66,23 +49,23 @@ export function LambdaBlock({state, setState, suggestionPriority, addParam}: Lam
       kind: "unknown",
       t: inferredParamType,
       unification: new Map(), // <- is this correct?
-    })
-
-  // const {exprResolved, env: newEnv} = computeLambdaBlockType(state.paramName, state.expr, env);
+    });
   
   return <span className="lambdaBlock">
     <span className="keyword">&#955;</span>
     &nbsp;
     <span className="lambdaInputParam">
-      <input
-          ref={nameRef}
-          className='editable'
-          value={state.paramName}
-          placeholder="<name>"
-          onKeyDown={onChangeName}
-          onChange={e => setParamName(e.target.value)}
-          spellCheck={false}
-          />
+      <Input
+        placeholder="<name>"
+        text={state.paramName}
+        suggestion=""
+        focus={state.focus}
+        onEnter={() => {}}
+        onCancel={() => {}}
+        onTextChange={txt => setParamName(txt)}
+        setFocus={focus => setState(state => ({...state, focus}))}
+        extraHandlers={{}}
+        />
     </span>
     <div className="typeSignature">
         &nbsp;::&nbsp;<Type type={inferredParamType} />
diff --git a/src/LetInBlock.tsx b/src/LetInBlock.tsx
index 1f2aed3..1f97681 100644
--- a/src/LetInBlock.tsx
+++ b/src/LetInBlock.tsx
@@ -1,14 +1,13 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext } from "react";
 
 import { ExprBlock, type ExprBlockState } from "./ExprBlock";
 import { EnvContext } from "./EnvContext";
 import { evalEditorBlock, makeInnerEnv, scoreResolved, type ResolvedType } from "./eval";
 import { type State2Props } from "./ExprBlock";
-import { autoInputWidth } from "./util/dom_trickery";
 import { GlobalContext } from "./GlobalContext";
 
 import "./LetInBlock.css";
-import type { CallBlockState } from "./CallBlock";
+import { Input } from "./Input";
 
 export interface LetInBlockState {
   kind: "let";
@@ -39,9 +38,6 @@ function DeclColumns({state: {name, value, inner, focus}, setState, suggestionPr
 
   const setInner = callback => setState(state => ({...state, inner: callback(state.inner)}));
   const setValue = callback => setState(state => ({...state, value: callback(state.value)}));
-  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState(state => ({...state, name: e.target.value}));
-  }
 
   const valueSuggestionPriority = (suggestion: ResolvedType) => {
     const innerEnv = makeInnerEnv(env, name, suggestion);
@@ -49,28 +45,22 @@ function DeclColumns({state: {name, value, inner, focus}, setState, suggestionPr
     return scoreResolved(resolved, suggestionPriority);
   };
 
-  const nameRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    if (focus) {
-      nameRef.current?.focus();
-    }
-  }, [focus]);
-
-  useEffect(() => autoInputWidth(nameRef, name, 60), [nameRef, name]);
-
   const [valueResolved] = evalEditorBlock(value, env);
   const innerEnv = makeInnerEnv(env, name, valueResolved);
 
   return <>
     <span className="keyword column">let&nbsp;</span>
       <span className="column rightAlign">
-      <input
-        ref={nameRef}
-        className='editable'
-        value={name}
+      <Input
         placeholder="<name>"
-        onChange={onChangeName}
-        spellCheck={false}
+        text={name}
+        suggestion=""
+        focus={focus}
+        onEnter={() => {}}
+        onCancel={() => {}}
+        onTextChange={name => setState(state => ({...state, name}))}
+        setFocus={focus => setState(state => ({...state, focus}))}
+        extraHandlers={{}}
         />
       </span>
       <span className="keyword column">&nbsp;=&nbsp;</span>
diff --git a/src/Type.css b/src/Type.css
index d97e4b0..c87040c 100644
--- a/src/Type.css
+++ b/src/Type.css
@@ -12,6 +12,8 @@
   font-weight: 400;
   font-style: normal;
   font-variation-settings: "wdth" 100;
+
+  color: darkgrey;
 }
 
 .functionType {
diff --git a/src/actions.ts b/src/actions.ts
new file mode 100644
index 0000000..dd77a0f
--- /dev/null
+++ b/src/actions.ts
@@ -0,0 +1,60 @@
+import { initialEditorState } from "./configurations";
+import { removeFocus } from "./eval";
+
+export const actionShortcuts: [string, string[], string][] = [
+  ["call"     , ['c'], "expr ⌴"             ],
+  ["transform", ['.'], "⌴ expr"             ],
+  ["assign"   , ['a'], "let (⌴ = expr) in ⌴"],
+  ["declare"  , ['d'], "let (⌴ = ⌴) in expr"],
+  ["lambda"   , ['l'], "λ⌴. expr"           ],
+];
+
+export function getActions(globalContext, setState) {
+  return {
+    c: () => {
+        setState(state => ({
+          kind: "call",
+          fn: removeFocus(state),
+          input: initialEditorState,
+        }));
+        globalContext?.doHighlight.call();    
+    },
+    '.': () => {
+        setState(state => ({
+          kind: "call",
+          fn: initialEditorState,
+          input: removeFocus(state),
+        }));
+        globalContext?.doHighlight.transform();
+    },
+    a: () => {
+        setState(state => ({
+          kind: "let",
+          name: "",
+          focus: true,
+          value: removeFocus(state),
+          inner: removeFocus(initialEditorState),
+        }));  
+        globalContext?.doHighlight.assign();    
+    },
+    d: () => {
+        setState(state => ({
+          kind: "let",
+          name: "",
+          focus: true,
+          value: removeFocus(initialEditorState),
+          inner: removeFocus(state),
+        }));
+        globalContext?.doHighlight.declare();
+    },
+    l: () => {
+      setState(state => ({
+        kind: "lambda",
+        paramName: "",
+        focus: true,
+        expr: removeFocus(state),
+      }));
+      globalContext?.doHighlight.lambda();
+    },
+  };
+}
diff --git a/src/eval.ts b/src/eval.ts
index cceb6a5..34ddb8b 100644
--- a/src/eval.ts
+++ b/src/eval.ts
@@ -4,6 +4,7 @@ import type { ExprBlockState } from "./ExprBlock";
 import type { InputValueType } from "./InputBlock";
 
 const IS_DEV = (import.meta.env.MODE === "development");
+const VERBOSE = false;
 
 export interface Environment {
   names: any;
@@ -43,12 +44,6 @@ export interface Unknown {
 // the value of every block is either known (Dynamic), an error, or unknown
 export type ResolvedType = Dynamic | DeepError | Unknown;
 
-// export const evalEditorBlock = (s: ExprBlockState, env: Environment): [ResolvedType,Environment] => {
-//   const [resolved] = proxyEditorBlock(s, env);
-//   const [t, newEnv] = recomputeTypeVarsForEnv(resolved.t, env);
-//   return [{...resolved, t }, newEnv];
-// };
-
 class NotFoundError extends Error {}
 
 export const evalEditorBlock = (s: ExprBlockState, env: Environment): [ResolvedType,Environment] => {
@@ -74,10 +69,10 @@ export function evalInputBlock(text: string, value: InputValueType, env: Environ
     const found = trie.get(env.names)(text);
     if (found) {
       if (found.kind === "unknown") {
-        console.log('returning', text, 'as-is');
+        // console.log('returning', text, 'as-is');
         return [found, env]; // don't rewrite lambda parameters
       }
-      console.log('rewriting', text);
+      // console.log('rewriting', text);
       return recomputeTypeVarsForEnv(text, found, env);
     }
   }
@@ -171,7 +166,7 @@ function evalCallBlock3(fnResolved: ResolvedType, inputResolved: ResolvedType, e
     const [abstractOutputType, env2] = makeTypeVar(env, "<out>");
     const matchFnType = fnType(_ => inputResolved.t)(_ => abstractOutputType);
 
-    if (IS_DEV) {
+    if (VERBOSE) {
       console.log('========= evalCallBlock3 =========')
       console.log('env                     :', env);
       console.log('fnKind                  :', fnResolved.kind);
@@ -197,7 +192,7 @@ function evalCallBlock3(fnResolved: ResolvedType, inputResolved: ResolvedType, e
     // we don't want to 'bubble up' our outType substitution, because it's just a temporary variable
     const unificationWithoutOutType = new Map([...unification].filter(([symbol]) => symbol !== abstractOutputType.symbol));
 
-    if (IS_DEV) {
+    if (VERBOSE) {
       console.log('unification             :', prettyU(unification));
       console.log('unificationInvR         :', prettyRU(unificationR));
       console.log('unifiedFnType           :', prettyT(unifiedFnType));
@@ -212,7 +207,7 @@ function evalCallBlock3(fnResolved: ResolvedType, inputResolved: ResolvedType, e
 
     // const grandUnification = unificationWithoutOutType;
 
-    if (IS_DEV) {
+    if (VERBOSE) {
       console.log('grandUnification        :', prettyU(grandUnification));
       console.log('==================================')
     }
@@ -278,8 +273,6 @@ function evalCallBlock3(fnResolved: ResolvedType, inputResolved: ResolvedType, e
         }
         throw e;
       }
-    // }
-    // throw e;
   }
 }
 
@@ -296,7 +289,7 @@ const prettyRU = (rUni: Map<string, Type>) => {
 export function evalLambdaBlock(paramName: string, expr: ExprBlockState, env: Environment): [ResolvedType,Environment] {
   const [paramType, staticInnerEnv] = makeTypeVar(env, paramName);
 
-  if (IS_DEV) {
+  if (VERBOSE) {
     console.log('====== begin evalLambdaBlock ======')
     console.log('paramName     :', paramName);
     console.log('paramType     :', prettyT(paramType));
@@ -345,7 +338,7 @@ export function evalLambdaBlock(paramName: string, expr: ExprBlockState, env: En
 
   // const [lambdaResolvedNormalized, resultEnv] = recomputeTypeVarsForEnv(paramName, lambdaResolved, env);
 
-  if (IS_DEV) {
+  if (VERBOSE) {
     console.log('======= end evalLambdaBlock =======')
     console.log('paramType           :', prettyT(paramType));
     console.log('exprType            :', prettyT(exprResolved.t));
@@ -353,7 +346,6 @@ export function evalLambdaBlock(paramName: string, expr: ExprBlockState, env: En
     console.log('exprUnificationR    :', prettyRU(reduced));
     console.log('lambdaType          :', prettyT(lambdaT));
     console.log('lambdaTypeSubsituted:', prettyT(lambdaTSubstituted));
-    // console.log('normalizedT         :', prettyT(lambdaResolvedNormalized.t));
     console.log('===================================')
   }
   return [lambdaResolved, env];
diff --git a/src/util/dom_trickery.ts b/src/util/dom_trickery.ts
deleted file mode 100644
index cf7993c..0000000
--- a/src/util/dom_trickery.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { Ref } from "react";
-
-// If there is a caret anywhere in the document (user entering text), returns the position of the caret in the focused element
-export function getCaretPosition(): number | undefined {
-  const selection = window.getSelection();
-  if (selection) {
-    const range = selection.getRangeAt(0);
-    const clonedRange = range.cloneRange();
-    return clonedRange.startOffset;
-  }
-}
-
-// export function setCursorPosition(elem, pos) {
-//   const range = document.createRange();
-//   range.selectNode(elem);
-//   range.setStart(elem, pos);
-//   range.setEnd(elem, pos);
-//   const selection = window.getSelection();
-//   selection?.removeAllRanges();
-//   selection?.addRange(range);
-// }
-
-// Move caret all the way to the right in the currently focused element
-export function setRightMostCaretPosition(elem) {
-  const range = document.createRange();
-  range.selectNode(elem);
-  if (elem.lastChild) { // if no text is entered, there is no lastChild
-    range.setStart(elem.lastChild, elem.textContent.length);
-    range.setEnd(elem.lastChild, elem.textContent.length);
-    const selection = window.getSelection();
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-  }
-}
-
-export function focusNextElement() {
-  const editable = Array.from<any>(document.querySelectorAll('input'));
-  const index = editable.indexOf(document.activeElement);
-  editable[index+1]?.focus();
-}
-
-export function focusPrevElement() {
-  const editable = Array.from<any>(document.querySelectorAll('input'));
-  const index = editable.indexOf(document.activeElement);
-  const prevElem = editable[index-1]
-  if (prevElem) {
-    prevElem.focus();
-    setRightMostCaretPosition(prevElem);
-  }
-}
-
-export const autoInputWidth = (inputRef: React.RefObject<HTMLInputElement| null>, text, emptyWidth=150) => {
-  if (inputRef.current) {
-    inputRef.current.style.width = `${text.length === 0 ? emptyWidth : (text.length*8.0)}px`;
-  }
-}
diff --git a/src/util/parse.ts b/src/util/parse.ts
deleted file mode 100644
index 8b13789..0000000
--- a/src/util/parse.ts
+++ /dev/null
@@ -1 +0,0 @@
-