simplify some things

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 */