refactor a bit

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 }) {