From a9ae4f988848101b944298db1303f213b81bce22 Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Sun, 11 May 2025 22:54:23 +0200
Subject: [PATCH] decent progress

---
 src/App.tsx              |   9 ++-
 src/CallBlock.css        |  24 +------
 src/CallBlock.tsx        | 113 +++++++++++++++++++-------------
 src/Editor.css           |   8 +++
 src/Editor.tsx           | 135 +++++++++++++++++++++------------------
 src/InputBlock.css       |  37 ++++++++++-
 src/InputBlock.tsx       |  66 ++++++++++++-------
 src/Type.tsx             |   2 +-
 src/Value.css            |   9 +++
 src/Value.tsx            |  54 ++++++++++++++++
 src/index.css            |  10 +++
 src/util/dom_trickery.ts |   4 +-
 src/util/extra.ts        |   5 +-
 tsconfig.app.json        |   4 +-
 14 files changed, 318 insertions(+), 162 deletions(-)
 create mode 100644 src/Editor.css
 create mode 100644 src/Value.css
 create mode 100644 src/Value.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1c8859e..031f3b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,11 +3,11 @@ import { useEffect, useState } from 'react';
 import './App.css'
 import { Editor, initialEditorState, type EditorState } from './Editor'
 
-
 export function App() {
   const [state, setState] = useState<EditorState>(initialEditorState);
 
   useEffect(() => {
+    window['APP_STATE'] = state;
     // console.log("EDITOR STATE:", state);
   }, [state]);
 
@@ -18,7 +18,12 @@ export function App() {
       </header>
 
       <main>
-        <Editor state={state} setState={setState}></Editor>
+        <Editor
+          state={state}
+          setState={setState}
+          onResolve={() => {console.log("toplevel resolved")}}
+          onCancel={() => {console.log("toplevel canceled")}}
+        />
       </main>
 
       <footer>
diff --git a/src/CallBlock.css b/src/CallBlock.css
index 961beb2..c279edc 100644
--- a/src/CallBlock.css
+++ b/src/CallBlock.css
@@ -16,43 +16,23 @@
   border: solid 10px transparent;
   border-left-color: rgba(242, 253, 146);
   margin-left: 0px;
+  /* z-index: 1; */
 }
 
 .inputParam {
   height: 20px;
   margin-right: 20px;
-  /* vertical-align: ; */
-  /* margin-left: 0; */
   display: inline-block;
-  /* border: solid 1px black; */
   background-color: rgba(242, 253, 146);
-  /* border-radius: 10px; */
 }
 
-
-
 .typeAnnot {
   display: inline-block;
   vertical-align: top;
 }
 
-
-
-
-/* .outputParam:before {
-  content: "";
-  position: absolute;
-  width: 0px;
-  height: 0px;
-  margin-left: -28px;
-  margin-top: 0px;
-  border-style: solid;
-  border-color: orange;
-  border-width: 14px;
-  border-left-color: transparent;
-} */
-
 .outputParam {
+  text-align: left;
   vertical-align: top;
   /* margin-left: 28px; */
   padding: 0px;
diff --git a/src/CallBlock.tsx b/src/CallBlock.tsx
index f0b955e..faf4fee 100644
--- a/src/CallBlock.tsx
+++ b/src/CallBlock.tsx
@@ -1,75 +1,100 @@
+import { apply, getType, getInst } from "dope2";
 import type { Dynamic, State2Props } from "./util/extra";
 import { Editor, type EditorState } from "./Editor";
 
 import "./CallBlock.css";
+import { useEffect } from "react";
+import { Type } from "./Type";
+import { Value } from "./Value";
+import { focusPrevElement } from "./util/dom_trickery";
 
 export interface CallBlockState {
   kind: "call";
   env: any;
   fn: EditorState;
   input: EditorState;
+  resolved: undefined | Dynamic;
+  rollback: EditorState;
 }
 
 interface CallBlockProps extends State2Props<CallBlockState> {
-  onResolve: (d: Dynamic) => void;
+  onResolve: (resolved: EditorState) => void;
 }
 
-export function CallBlock({ state: {kind, env, fn, input}, setState, onResolve }: CallBlockProps) {
+export function CallBlock({ state: {kind, env, fn, input, resolved, rollback }, setState, onResolve }: CallBlockProps) {
+  const setResolved = (resolved: Dynamic) => {
+    setState({kind, env, fn, input, resolved, rollback});
+  }
+
+  const makeTheCall = (input, fn) => {
+    console.log('makeTheCall...')
+    try {
+      const outputResolved = apply(input.resolved)(fn.resolved);
+      setResolved(outputResolved);
+      console.log("onResolve callblock..")
+      onResolve({
+        kind, env, fn, input, resolved: outputResolved, rollback
+      });
+    }
+    catch (e) {
+      console.log('makeTheCall:', e);
+    }
+  }
+
   const setFn = (fn: EditorState) => {
-    setState({kind, env, fn, input});
+    setState({kind, env, fn, input, resolved, rollback});
   }
   const setInput = (input: EditorState) => {
-    setState({kind, env, fn, input});
+    setState({kind, env, fn, input, resolved, rollback});
   }
+  const onFnResolve = (fnState) => {
+    console.log('my fn resolved')
+    if (input.resolved) {
+      makeTheCall(input, fnState);
+    }
+    else {
+      setFn(fnState);
+    }
+  }
+  const onInputResolve = (inputState) => {
+    console.log('my input resolved')
+    if (fn.resolved) {
+      makeTheCall(inputState, fn);
+    }
+    else {
+      // setInput(inputState);
+      setResolved(undefined);
+      onResolve({
+        kind, env, fn, input: inputState, resolved: undefined, rollback
+      });
+    }
+  }
+  const onFnCancel = () => {
+
+  }
+  const onInputCancel = () => {
+    // we become what we were before we became a CallBlock
+    if (rollback) {
+      setState(rollback);
+      focusPrevElement();
+    }
+  }
+
   return <span className="functionBlock">
     <div className="functionName">
     &#119891;&#119899;&nbsp;
-      <Editor state={fn} setState={setFn}/>
+      <Editor state={fn} setState={setFn}
+        onResolve={onFnResolve} onCancel={onFnCancel}/>
     </div>
     <div className="functionParams">
       <div className="outputParam">
       <div className="inputParam">
-        <Editor state={input} setState={setInput} />
+        <Editor state={input} setState={setInput} onResolve={onInputResolve} onCancel={onInputCancel} />
       </div>
-      result
+      { resolved
+        ? <Value dynamic={resolved} />
+        : <></> }
       </div>
     </div>
   </span>;
 }
-
-// function FunctionBlock({env, done, name, funDynamic}) {
-//   const functionType = getType(funDynamic);
-//   const inType = functionType.params[0](functionType);
-//   const [outDynamic, setOutDynamic] = useState<any>(null);
-//   const [input, setInput] = useState<any>(null);
-//   const gotInput = (name, inDynamic) => {
-//     setInput([name, inDynamic]);
-//     const outDynamic = apply(inDynamic)(funDynamic);
-//     setOutDynamic(outDynamic);
-//     // propagate result up
-//     done(outDynamic);
-//   };
-//   return <span className="functionBlock">
-//     <div className="functionName">
-//     &#119891;&#119899;&nbsp;
-//       {name}
-//       {/* <Type type={functionType}/> */}
-//     </div>
-//     <div className="functionParams">
-//       <div className="outputParam">
-//       <div className="inputParam">
-//         {
-//           (input === null)
-//             ? <InputBlock env={env} done={gotInput} type={inType} />
-//             : <DynamicBlock env={env} name={input[0]} dynamic={input[1]}/>
-//         }
-//       </div>
-//       {
-//           (input === null)
-//             ? <>&nbsp;</>
-//             : <DynamicBlock env={env} name="" dynamic={outDynamic} />
-//         }
-//       </div>
-//     </div>
-//   </span>;
-// }
\ No newline at end of file
diff --git a/src/Editor.css b/src/Editor.css
new file mode 100644
index 0000000..1e324d9
--- /dev/null
+++ b/src/Editor.css
@@ -0,0 +1,8 @@
+.typeSignature {
+  display: inline-block;
+  /* vertical-align:; */
+}
+
+.command {
+  width: 136px;
+}
\ No newline at end of file
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 8a2f873..8d94fd5 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -3,6 +3,11 @@ import { getSymbol, getType, module2Env, ModuleStd, symbolFunction } from "dope2
 import { InputBlock, type InputBlockState } from "./InputBlock";
 import { type Dynamic, type State2Props } from "./util/extra";
 import { CallBlock, type CallBlockState } from "./CallBlock";
+import { useEffect, useState } from "react";
+import { Type } from "./Type";
+
+import "./Editor.css"
+import { focusNextElement } from "./util/dom_trickery";
 
 interface LetInBlockState {
   kind: "let";
@@ -10,12 +15,17 @@ interface LetInBlockState {
   name: string;
   value: EditorState;
   inner: EditorState;
+  resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 interface LambdaBlockState {
   kind: "lambda";
+  env: any;
   paramName: string;
   expr: EditorState;
+  resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 export type EditorState =
@@ -29,72 +39,73 @@ export const initialEditorState: EditorState = {
   env: module2Env(ModuleStd),
   text: "",
   resolved: undefined,
+  rollback: undefined,
 };
 
-type EditorProps = State2Props<EditorState>;
+interface EditorProps extends State2Props<EditorState> {
+  onResolve: (state: EditorState) => void;
+  onCancel: () => void;
+}
 
 const dontFilter = () => true;
 
-export function Editor({state, setState}: EditorProps) {
-  let onResolve;
-  switch (state.kind) {
-    case "input":
-      onResolve = (resolved: InputBlockState) => {
-        console.log('resolved!', state, resolved);
-        if (resolved) {
-          const type = getType(resolved.resolved);
-          if (getSymbol(type) === symbolFunction) {
-            console.log('function!');
-            // we were InputBlock
-            // now we become FunctionBlock
-            setState({
-              kind: "call",
-              env: state.env,
-              fn: resolved,
-              input: initialEditorState,
-            })
-          }
-        }
-        // const type = getType(state.resolved);
-        // if (getSymbol(type) === symbolFunction) {
-        //   console.log('function!');
-        //   console.log('editor state:', state);
-        // }
-      }
-      return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onResolve} />;
-    case "call":
-      onResolve = (d: Dynamic) => {}
-      return <CallBlock state={state} setState={setState} onResolve={onResolve} />;
-    case "let":
-      return <></>;
-    case "lambda":
-      return <></>;
+export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
+  const [proxyState, setProxyState] = useState<'unresolved'|'command'|'resolved'>('unresolved');
+  const onMyResolve = (editorState: EditorState) => {
+    setState(editorState);
+    if (editorState.resolved) {
+      setProxyState('command');
+    }
+    else {
+      setProxyState('unresolved');
+    }
   }
+  // const onMyCancel
+  const onCommand = (e: React.KeyboardEvent) => {
+    const type = getType(state.resolved);
+    if (e.key === "c" && getSymbol(type) === symbolFunction) {
+      e.preventDefault();
+      // we become CallBlock
+      setState({
+        kind: "call",
+        env: state.env,
+        fn: state,
+        input: initialEditorState,
+        resolved: undefined,
+        rollback: state,
+      });
+      setProxyState('resolved');
+    }
+    if (e.key === "u" || e.key === "Enter") {
+      setProxyState('resolved');
+      onResolve(state);
+    }
+  };
+
+  const renderBlock = () => {
+    switch (state.kind) {
+      case "input":
+        return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onMyResolve} onCancel={onCancel} />;
+      case "call":
+        return <CallBlock state={state} setState={setState} onResolve={onMyResolve} />;
+      case "let":
+        return <></>;
+      case "lambda":
+        return <></>;
+    }  
+  }
+  return <>
+    {renderBlock()}
+    {
+      (state.resolved)
+      ? <div className="typeSignature">
+          :: <Type type={getType(state.resolved)} />
+          { (proxyState === 'command')
+            ? <input autoFocus={true} className="editable command" placeholder="<enter command>" onKeyDown={onCommand} value=""/>
+            : <></>
+          }
+        </div>
+      : <></>
+    }
+  </>;
 }
-
-// function DynamicBlock({env, name, dynamic}) {
-//   const type = getType(dynamic);
-//   if (getSymbol(type) === symbolFunction) {
-//     return <FunctionBlock env={env} name={name} funDynamic={dynamic} />;
-//   }
-//   else return <>{getInst(dynamic).toString()} :: <Type type={type}/></>;
-// }
-
-// function InputBlock({env, done, type}) {
-//   const filterInputType = ([_, dynamic]) => {
-//     try {
-//       unify(type, getType(dynamic));
-//       return true;
-//     } catch (e) {
-//       if (!(e instanceof UnifyError)) {
-//         console.error(e);
-//       }
-//       return false;
-//     }
-//   }
-//   return <>
-//     <span className="typeAnnot"><InputBlock env={env} done={done} filter={filterInputType} /></span>
-//     <span className="typeAnnot">:: <Type type={type}/></span>
-//   </>;
-// }
-
diff --git a/src/InputBlock.css b/src/InputBlock.css
index db54782..4114912 100644
--- a/src/InputBlock.css
+++ b/src/InputBlock.css
@@ -1,14 +1,28 @@
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap');
+
 .suggest {
+  margin-left: -3.5px;
+  margin-right: 5px;
   color: #aaa;
+  min-width: 30px;
+
+  font-size: 13pt;
+  font-family: "Inconsolata", monospace;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
+
 }
 .suggestions { 
+  text-align: left;
   position: absolute;
-  /* display: inline-block; */
-  /* top: 20px; */
-  border: solid 1px lightgrey;
+  border: solid 1px dodgerblue;
   cursor: pointer;
   max-height: calc(100vh - 44px);
   overflow: scroll;
+  z-index: 10;
+  background-color: white;
 }
 .selected {
   background-color: dodgerblue;
@@ -17,6 +31,23 @@
 .editable {
   outline: 0px solid transparent;
   display: inline-block;
+  border: 0;
+  /* box-sizing: border-box; */
+  /* width: ; */
+  /* border: 1px black solid; */
+  /* border-style: dashed none dashed; */
+
+  margin-left: 4px;
+  margin-right: 0;
+
+  font-size: 13pt;
+  font-family: "Inconsolata", monospace;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
+
+  background-color: transparent;
 }
 .border-around-input {
   border: 1px solid black;
diff --git a/src/InputBlock.tsx b/src/InputBlock.tsx
index 87b0940..62ddd0d 100644
--- a/src/InputBlock.tsx
+++ b/src/InputBlock.tsx
@@ -7,25 +7,28 @@ import { Type } from "./Type";
 
 import "./InputBlock.css";
 import type { Dynamic, State2Props } from "./util/extra";
+import type { EditorState } from "./Editor";
 
 export interface InputBlockState {
   kind: "input";
   env: any;
   text: string;
   resolved: undefined | Dynamic;
+  rollback?: EditorState;
 }
 
 interface InputBlockProps extends State2Props<InputBlockState> {
   filter: (ls: any[]) => boolean;
   onResolve: (state: InputBlockState) => void;
+  onCancel: () => void;
 }
 
-export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve }: InputBlockProps) {
+export function InputBlock({ state: {kind, env, text, resolved, rollback}, setState, filter, onResolve, onCancel }: InputBlockProps) {
   const ref = useRef<any>(null);
   useEffect(() => {
     ref.current?.focus();
     if (ref.current) {
-      ref.current.textContent = text;
+      // ref.current.textContent = text;
     }
   }, []);
 
@@ -33,10 +36,10 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
   const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
 
   const setText = (text: string) => {
-    setState({kind, env, text, resolved});
+    setState({kind, env, text, resolved, rollback});
   }
   const setResolved = (resolved: Dynamic) => {
-    setState({kind, env, text, resolved});
+    setState({kind, env, text, resolved, rollback});
   }
 
   const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
@@ -53,28 +56,45 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
 
   useEffect(() => {
     setI(0); // reset
-    const found = trie.get(env.name2dyn)(text);
-    setResolved(found); // may be undefined
+    if (ref.current) {
+      ref.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
+    }
   }, [text]);
-  
 
-  const onSelectSuggestion = ([name, _dynamic]) => {
+  const onSelectSuggestion = ([name, dynamic]) => {
+    console.log(name);
     // setText(name);
     // ref.current.textContent = name;
     // setRightMostCaretPosition(ref.current);
     // setI(0);
+    // setResolved(dynamic);
+    console.log("onResolve inputblock..")
     onResolve({
-      env,
       kind: "input",
-      resolved: _dynamic,
+      env,
       text: name,
+      resolved: dynamic,
+      rollback,
     });
   };
 
   const onInput = e => {
-    setText(e.target.textContent);
+    setText(e.target.value);
+    if (resolved) {
+      onResolve({
+        kind: "input",
+        env,
+        text: e.target.value,
+        resolved: undefined,
+        rollback,
+      });
+    }
   };
 
+  const getCaretPosition = () => {
+    return ref.current.selectionStart;
+  }
+
   const onKeyDown = (e: React.KeyboardEvent) => {
     const fns = {
       Tab: () => {
@@ -87,7 +107,7 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
           if (singleSuggestion.length > 0) {
             const newText = text + singleSuggestion;
             setText(newText);
-            ref.current.textContent = newText;
+            // ref.current.textContent = newText;
             setRightMostCaretPosition(ref.current);
             e.preventDefault();  
           }
@@ -117,33 +137,33 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
         onSelectSuggestion(suggestions[i]);
         e.preventDefault();
       },
+      Backspace: () => {
+        if (text.length === 0) {
+          onCancel();
+          e.preventDefault();
+        }
+      }
     };
     fns[e.key]?.();
   };
 
   return <span>
-    <span className="border-around-input">
-      <span className="editable" ref={ref} contentEditable="plaintext-only" onInput={onInput} onKeyDown={onKeyDown}
-      onFocus={() => setHaveFocus(true)}
-      onBlur={() => {
-        // hacky, but couldn't find another way:
-        // setTimeout(resetFocus, 0);
-        setHaveFocus(false);
-      } } style={{ height: 19 }}></span>
+    <span className="">
+      <input ref={ref} placeholder="start typing..." autoFocus={true} className="editable" value={text} onInput={onInput} onKeyDown={onKeyDown} onFocus={() => setHaveFocus(true)} onBlur={() => setHaveFocus(false)}/>
+      <span className="text-block suggest">{singleSuggestion}</span>
+      </span>
       {
         (haveFocus)
         ? <Suggestions suggestions={suggestions} onSelect={onSelectSuggestion} i={i} setI={setI} />
         : <></>
       }
-    <span className="text-block suggest">{singleSuggestion}</span>
-    </span>
   </span>;
 }
 
 function Suggestions({ suggestions, onSelect, i, setI }) {
   return (suggestions.length > 0) ?
     <div className="suggestions">
-      {suggestions.map(([name, dynamic], j) => <div key={`${j}_${name}`} className={i === j ? "selected" : ""} onClick={() => setI(j)} onDoubleClick={() => onSelect(suggestions[i])}>{name} :: <Type type={getType(dynamic)} /></div>)}
+      {suggestions.map(([name, dynamic], j) => <div key={`${j}_${name}`} className={i === j ? "selected" : ""} onClick={() => onSelect(suggestions[i])}>{name} :: <Type type={getType(dynamic)} /></div>)}
     </div>
     : <></>;
 }
\ No newline at end of file
diff --git a/src/Type.tsx b/src/Type.tsx
index db77e59..ee0198d 100644
--- a/src/Type.tsx
+++ b/src/Type.tsx
@@ -22,7 +22,7 @@ export function Type({type}) {
     case symbolDictIterator:
       return <BinaryType type={type} cssClass="dictType iteratorType" infix="*&rArr;" prefix="{" suffix="}"/>;
   
-      default:
+    default:
       return <div className="type">{getHumanReadableName(symbol)}</div>
   }
 }
diff --git a/src/Value.css b/src/Value.css
new file mode 100644
index 0000000..6d539a7
--- /dev/null
+++ b/src/Value.css
@@ -0,0 +1,9 @@
+.value {
+  border: 1px solid black;
+  border-radius: 10px;
+  margin-left: 2px;
+  margin-right: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  background-color: white;
+}
\ No newline at end of file
diff --git a/src/Value.tsx b/src/Value.tsx
new file mode 100644
index 0000000..5ae6b4c
--- /dev/null
+++ b/src/Value.tsx
@@ -0,0 +1,54 @@
+import {getType, getInst, getSymbol, Double, Int, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, eqType, match} from "dope2";
+
+import "./Value.css";
+
+export function Value({dynamic}) {
+  const type = getType(dynamic);
+  const inst = getInst(dynamic);
+  if (eqType(type)(Double)) {
+    return <ValueDouble val={inst}/>;
+  }
+  if (eqType(type)(Int)) {
+    return <ValueInt val={inst}/>;
+  }
+  const symbol = getSymbol(type);
+  switch (symbol) {
+    case symbolFunction:
+      return <ValueFunction/>;
+    //   return <BinaryType type={type} cssClass="functionType" infix="&rarr;" prefix="" suffix=""/>;
+    // case symbolProduct:
+    //   return <BinaryType type={type} cssClass="productType" infix="&#10799;" prefix="" suffix=""/>;
+    case symbolSum:
+      return <ValueSum val={inst} leftType={type.params[0](type)} rightType={type.params[1](type)}/>;
+    // case symbolDict:
+    //   return <BinaryType type={type} cssClass="dictType" infix="&rArr;" prefix="{" suffix="}"/>;
+    // case symbolSet:
+    //   return <UnaryType type={type} cssClass="setType" prefix="{" suffix="}" />;
+    case symbolList:
+      return <List val={inst} elemType={type.params[0](type)} />;
+  
+    default:
+      return <>don't know how to show value</>;
+  }
+}
+
+function ValueDouble({val}) {
+  return <span className="value">{val.toString()}</span>;
+}
+function ValueInt({val}) {
+  return <span className="value">{val.toString()}</span>;
+}
+function ValueFunction() {
+  return <>&#119891;&#119899;&nbsp;</>;
+}
+// function Sum({val, elemType}) {
+//   return 
+// }
+function List({val, elemType}) {
+  return <span className="listType">[{val.map((v, i) => <Value dynamic={{i:v, t:elemType}}/>)}]</span>;
+}
+function ValueSum({val, leftType, rightType}) {
+  return match(val)
+    (l => <>L <Value dynamic={{i:l, t:leftType}}/></>)
+    (r => <>R <Value dynamic={{i:r, t:rightType}}/></>);
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 6092539..90d5294 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+
 body {
   margin: 0;
+  font-family: "Roboto", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings:
+    "wdth" 100;
+
 }
\ No newline at end of file
diff --git a/src/util/dom_trickery.ts b/src/util/dom_trickery.ts
index c474b7e..2ccc419 100644
--- a/src/util/dom_trickery.ts
+++ b/src/util/dom_trickery.ts
@@ -33,13 +33,13 @@ export function setRightMostCaretPosition(elem) {
 }
 
 export function focusNextElement() {
-  const editable = Array.from<any>(document.querySelectorAll('[contenteditable]'));
+  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('[contenteditable]'));
+  const editable = Array.from<any>(document.querySelectorAll('input'));
   const index = editable.indexOf(document.activeElement);
   const prevElem = editable[index-1]
   if (prevElem) {
diff --git a/src/util/extra.ts b/src/util/extra.ts
index c8a39a4..f2f0dde 100644
--- a/src/util/extra.ts
+++ b/src/util/extra.ts
@@ -1,3 +1,5 @@
+import type { EditorState } from "../Editor";
+
 export interface Dynamic {
   i: any;
   t: any;
@@ -6,5 +8,6 @@ export interface Dynamic {
 export interface State2Props<T> {
   state: T;
   // setState: (callback: (state: T) => T) => void;
-  setState: (state: T) => void;
+  // setState: (state: T) => void;
+  setState: (state: EditorState) => void;
 }
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 6ae4540..811071c 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -20,8 +20,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true