rename Editor -> ExprBlock

src/ExprBlock.tsx

@@ -0,0 +1,201 @@
+import { useContext, useEffect, useRef, useState } from "react";
+
+import { getSymbol, getType, symbolFunction } from "dope2";
+
+import { CallBlock, type CallBlockState } from "./CallBlock";
+import { EnvContext } from "./EnvContext";
+import { GlobalContext } from "./GlobalContext";
+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, type ResolvedType } from "./eval";
+import { focusNextElement, focusPrevElement } from "./util/dom_trickery";
+
+import "./ExprBlock.css";
+
+export type ExprBlockState =
+    InputBlockState
+  | CallBlockState
+  | LetInBlockState
+  | LambdaBlockState;
+
+export type SetStateFn<InType = ExprBlockState, OutType = InType> = (state: InType) => OutType;
+
+export interface State2Props<InType, OutType = InType> {
+  state: InType;
+  setState: (callback: SetStateFn<InType, OutType>) => void;
+  suggestionPriority: (suggestion: ResolvedType) => number;
+}
+
+interface ExprBlockProps extends State2Props<ExprBlockState> {
+  onCancel: () => 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|.';
+}
+
+function removeFocus(state: ExprBlockState): ExprBlockState {
+  if (state.kind === "input") {
+    return {...state, focus: false};
+  }
+  if (state.kind === "call") {
+    return {...state,
+      fn: removeFocus(state.fn),
+      input: removeFocus(state.input),
+    };
+  }
+  return state;
+}
+
+export function ExprBlock({state, setState, onCancel, suggestionPriority}: 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,
+        resolved: undefined,
+      }));
+      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),
+        resolved: undefined,
+      }));
+      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",
+        inner: removeFocus(initialEditorState),
+        name: "",
+        value: removeFocus(state),
+      }));  
+      globalContext?.doHighlight.let();
+      return;
+    }
+    if (e.key === 'L' || e.key === '=' && e.shiftKey) {
+      setState(state => ({
+        kind: "let",
+        inner: removeFocus(state),
+        name: "",
+        value: removeFocus(initialEditorState),
+      }));
+    }
+    // a -> lAmbdA
+    if (e.key === "a") {
+      setState(state => ({
+        kind: "lambda",
+        paramName: "",
+        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}
+        />;
+      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}
+          />;
+      case "lambda":
+        return <LambdaBlock
+          state={state}
+          setState={setState as (callback:(p:LambdaBlockState)=>ExprBlockState)=>void}
+          suggestionPriority={suggestionPriority}
+          />;
+    }  
+  }
+  const resolved = evalEditorBlock(state, env);
+  return <span className={"editor" + ((resolved.kind!=="value") ? " "+resolved.kind : "")}>
+    {renderBlock()}
+    <div className="typeSignature">
+    &nbsp;::&nbsp;<Type type={getType(resolved)} />
+    </div>
+    <input
+      ref={commandInputRef}
+      spellCheck={false}
+      className="editable commandInput"
+      placeholder={`<c>`}
+      onKeyDown={onCommand}
+      value={""}
+      onChange={() => {}} />
+  </span>;
+}