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,12 +18,7 @@ export function App() {
       </header>
 
       <main>
-        <Editor
-          state={state}
-          setState={setState}
-          onResolve={() => {console.log("toplevel resolved")}}
-          onCancel={() => {console.log("toplevel canceled")}}
-        />
+        <Editor state={state} setState={setState}></Editor>
       </main>
 
       <footer>

src/CallBlock.css

@@ -5,7 +5,7 @@
 }
 
 .functionName {
-  /* text-align: center; */
+  text-align: center;
 
 }
 
@@ -16,23 +16,43 @@
   border: solid 10px transparent;
   border-left-color: rgba(242, 253, 146);
   margin-left: 0px;
-  /* z-index: 1; */
 }
 
 .inputParam {
-  /* height: 20px; */
+  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;

src/CallBlock.tsx

@@ -1,104 +1,75 @@
-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: (resolved: EditorState) => void;
-}
-
-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);
-    }
+  onResolve: (d: Dynamic) => void;
 }
 
+export function CallBlock({ state: {kind, env, fn, input}, setState, onResolve }: CallBlockProps) {
   const setFn = (fn: EditorState) => {
-    setState({kind, env, fn, input, resolved, rollback});
+    setState({kind, env, fn, input});
   }
   const setInput = (input: EditorState) => {
-    setState({kind, env, fn, input, resolved, rollback});
+    setState({kind, env, fn, input});
   }
-  const onFnResolve = (fnState) => {
-    console.log('my fn resolved')
-    if (input.resolved) {
-      makeTheCall(input, fnState);
-    }
-    else {
-      // setFn(fnState);
-      setResolved(undefined);
-      onResolve({
-        kind, env, fn: fnState, input, resolved: undefined, rollback
-      });
-    }
-  }
-  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}
-        onResolve={onFnResolve} onCancel={onFnCancel}/>
+      <Editor state={fn} setState={setFn}/>
     </div>
     <div className="functionParams">
       <div className="outputParam">
       <div className="inputParam">
-        <Editor state={input} setState={setInput} onResolve={onInputResolve} onCancel={onInputCancel} />
+        <Editor state={input} setState={setInput} />
       </div>
-      { resolved
-        ? <Value dynamic={resolved} />
-        : <></> }
+      result
       </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>;
+// }

src/Editor.css

@@ -1,8 +0,0 @@
-.typeSignature {
-  display: inline-block;
-  /* vertical-align:; */
-}
-
-.command {
-  width: 136px;
-}

src/Editor.tsx

@@ -3,11 +3,6 @@ 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, focusPrevElement } from "./util/dom_trickery";
 
 interface LetInBlockState {
   kind: "let";
@@ -15,17 +10,12 @@ 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 =
@@ -39,107 +29,72 @@ export const initialEditorState: EditorState = {
   env: module2Env(ModuleStd),
   text: "",
   resolved: undefined,
-  rollback: undefined,
 };
 
-interface EditorProps extends State2Props<EditorState> {
-  onResolve: (state: EditorState) => void;
-  onCancel: () => void;
-}
+type EditorProps = State2Props<EditorState>;
 
 const dontFilter = () => true;
 
-function getCommands(type) {
-  const commands = ['u', 't', 'Enter', 'Backspace', 'ArrowLeft', 'Tab'];
-  if (getSymbol(type) === symbolFunction) {
-    commands.push('c');
-  }
-  return commands;
-}
-
-export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
-  const [needCommand, setNeedCommand] = useState(false);
-  const onMyResolve = (editorState: EditorState) => {
-    setState(editorState);
-    if (editorState.resolved) {
-      setNeedCommand(true);
-    }
-    else {
-      // unresolved
-      setNeedCommand(false);
-      onResolve(editorState); // pass up the fact that we're unresolved
-    }
-  }
-  // const onMyCancel
-  const onCommand = (e: React.KeyboardEvent) => {
-    const type = getType(state.resolved);
-    const commands = getCommands(type);
-    if (!commands.includes(e.key)) {
-      return;
-    }
-    e.preventDefault();
-    setNeedCommand(false);
-    // u -> pass Up
-    if (e.key === "u" || e.key === "Enter" || e.key === "Tab") {
-      onResolve(state);
-      return;
-    }
-    // c -> Call
-    if (e.key === "c") {
-      // we become CallBlock
-      setState({
-        kind: "call",
-        env: state.env,
-        fn: state,
-        input: initialEditorState,
-        resolved: undefined,
-        rollback: state,
-      });
-      return;
-    }
-    // t -> Transform
-    if (e.key === "t") {
-      // we become CallBlock
-      setState({
-        kind: "call",
-        env: state.env,
-        fn: initialEditorState,
-        input: state,
-        resolved: undefined,
-        rollback: state,
-      });
-      return;
-    }
-    if (e.key === "Backspace" || e.key === "ArrowLeft") {
-      focusPrevElement();
-      return;
-    }
-  };
-
-  const renderBlock = () => {
+export function Editor({state, setState}: EditorProps) {
+  let onResolve;
   switch (state.kind) {
     case "input":
-        return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onMyResolve} onCancel={onCancel} />;
+      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":
-        return <CallBlock state={state} setState={setState} onResolve={onMyResolve} />;
+      onResolve = (d: Dynamic) => {}
+      return <CallBlock state={state} setState={setState} onResolve={onResolve} />;
     case "let":
       return <></>;
     case "lambda":
       return <></>;
   }
 }
-  return <>
-    {renderBlock()}
-    {
-      (state.resolved)
-      ? <div className="typeSignature">
-          :: <Type type={getType(state.resolved)} />
-          { (needCommand)
-            ? <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>
+//   </>;
+// }
+

src/InputBlock.css

@@ -1,32 +1,14 @@
-@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 { 
-  display: none;
-}
-.suggestions {
-  display: block;
-  text-align: left;
   position: absolute;
-  border: solid 1px dodgerblue;
+  /* display: inline-block; */
+  /* top: 20px; */
+  border: solid 1px lightgrey;
   cursor: pointer;
   max-height: calc(100vh - 44px);
   overflow: scroll;
-  z-index: 10;
-  background-color: white;
 }
 .selected {
   background-color: dodgerblue;
@@ -35,23 +17,6 @@
 .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;

src/InputBlock.tsx

@@ -7,37 +7,36 @@ import { Type } from "./Type";
 
 import "./InputBlock.css";
 import type { Dynamic, State2Props } from "./util/extra";
-import type { EditorState } from "./Editor";
-import { ShowIf } from "./ShowIf";
 
 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, rollback}, setState, filter, onResolve, onCancel }: InputBlockProps) {
+export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve }: InputBlockProps) {
   const ref = useRef<any>(null);
   useEffect(() => {
     ref.current?.focus();
+    if (ref.current) {
+      ref.current.textContent = text;
+    }
   }, []);
 
   const [i, setI] = useState(0); // selected suggestion
   const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
 
   const setText = (text: string) => {
-    setState({kind, env, text, resolved, rollback});
+    setState({kind, env, text, resolved});
   }
   const setResolved = (resolved: Dynamic) => {
-    setState({kind, env, text, resolved, rollback});
+    setState({kind, env, text, resolved});
   }
 
   const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
@@ -54,45 +53,28 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
 
   useEffect(() => {
     setI(0); // reset
-    if (ref.current) {
-      ref.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
-    }
+    const found = trie.get(env.name2dyn)(text);
+    setResolved(found); // may be undefined
   }, [text]);
   
-  const onSelectSuggestion = ([name, dynamic]) => {
-    console.log(name);
+
+  const onSelectSuggestion = ([name, _dynamic]) => {
     // setText(name);
     // ref.current.textContent = name;
     // setRightMostCaretPosition(ref.current);
     // setI(0);
-    // setResolved(dynamic);
-    console.log("onResolve inputblock..")
     onResolve({
-      kind: "input",
       env,
+      kind: "input",
+      resolved: _dynamic,
       text: name,
-      resolved: dynamic,
-      rollback,
     });
   };
 
   const onInput = e => {
-    setText(e.target.value);
-    if (resolved) {
-      onResolve({
-        kind: "input",
-        env,
-        text: e.target.value,
-        resolved: undefined,
-        rollback,
-      });
-    }
+    setText(e.target.textContent);
   };
 
-  const getCaretPosition = () => {
-    return ref.current.selectionStart;
-  }
-
   const onKeyDown = (e: React.KeyboardEvent) => {
     const fns = {
       Tab: () => {
@@ -105,14 +87,10 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
           if (singleSuggestion.length > 0) {
             const newText = text + singleSuggestion;
             setText(newText);
-            // ref.current.textContent = newText;
+            ref.current.textContent = newText;
             setRightMostCaretPosition(ref.current);
             e.preventDefault();  
           }
-          else {
-            onSelectSuggestion(suggestions[i]);
-            e.preventDefault();
-          }
         }
       },
       ArrowDown: () => {
@@ -139,50 +117,33 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
         onSelectSuggestion(suggestions[i]);
         e.preventDefault();
       },
-      Backspace: () => {
-        if (text.length === 0) {
-          onCancel();
-          e.preventDefault();
-        }
-      }
     };
     fns[e.key]?.();
   };
 
   return <span>
-    <span className="">
-      <input ref={ref} placeholder="start typing..." className="editable" value={text} onInput={onInput} onKeyDown={onKeyDown} onFocus={() => setHaveFocus(true)} onBlur={() => setTimeout(() => setHaveFocus(false), 200)}/>
+    <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>
+      {
+        (haveFocus)
+        ? <Suggestions suggestions={suggestions} onSelect={onSelectSuggestion} i={i} setI={setI} />
+        : <></>
+      }
     <span className="text-block suggest">{singleSuggestion}</span>
     </span>
-      <ShowIf cond={haveFocus}>
-        <Suggestions
-          suggestions={suggestions}
-          onSelect={onSelectSuggestion}
-          i={i} setI={setI} />
-      </ShowIf>
   </span>;
 }
 
 function Suggestions({ suggestions, onSelect, i, setI }) {
-  const onMouseEnter = j => () => {
-    setI(j);
-  };
-  const onMouseDown = j => () => {
-    setI(j);
-    onSelect(suggestions[i]);
-  };
-
   return (suggestions.length > 0) ?
-    <div className={"suggestions"}>
-      {suggestions.map(([name, dynamic], j) =>
-        <div
-          key={`${j}_${name}`}
-          className={i === j ? "selected" : ""}
-          onMouseEnter={onMouseEnter(j)}
-          onMouseDown={onMouseDown(j)}>
-            {name} :: <Type type={getType(dynamic)} />
-        </div>)
-      }
+    <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>)}
     </div>
     : <></>;
 }

src/ShowIf.tsx

@@ -1,9 +0,0 @@
-// syntactic sugar
-export function ShowIf({cond, children}) {
-  if (cond) {
-    return <>{children}</>;
-  }
-  else {
-    return <></>;
-  }
-}

src/Value.css

@@ -1,9 +0,0 @@
-.value {
-  border: 1px solid black;
-  border-radius: 10px;
-  margin-left: 2px;
-  margin-right: 2px;
-  padding-left: 2px;
-  padding-right: 2px;
-  background-color: white;
-}

src/Value.tsx

@@ -1,60 +0,0 @@
-import {getType, getInst, getSymbol, Double, Int, symbolFunction, symbolProduct, symbolSum, symbolDict, symbolSet, symbolList, eqType, match, getLeft, getRight} 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 symbolProduct:
-        return <ValueProduct 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}}/></>);
-}
-function ValueProduct({val, leftType, rightType}) {
-  return <>(<Value dynamic={{i:getLeft(val), t:leftType}}/>,&nbsp;<Value dynamic={{i:getRight(val), t:rightType}} />)</>;
-}

src/index.css

@@ -1,18 +1,3 @@
-@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;
-
-}
-
-:focus-within:not(body) {
-  /* outline: 2px solid black; */
-  /* background-color: aqua; */
 }

src/util/dom_trickery.ts

@@ -33,13 +33,13 @@ export function setRightMostCaretPosition(elem) {
 }
 
 export function focusNextElement() {
-  const editable = Array.from<any>(document.querySelectorAll('input'));
+  const editable = Array.from<any>(document.querySelectorAll('[contenteditable]'));
   const index = editable.indexOf(document.activeElement);
   editable[index+1]?.focus();
 }
 
 export function focusPrevElement() {
-  const editable = Array.from<any>(document.querySelectorAll('input'));
+  const editable = Array.from<any>(document.querySelectorAll('[contenteditable]'));
   const index = editable.indexOf(document.activeElement);
   const prevElem = editable[index-1]
   if (prevElem) {

src/util/extra.ts

@@ -1,5 +1,3 @@
-import type { EditorState } from "../Editor";
-
 export interface Dynamic {
   i: any;
   t: any;
@@ -8,6 +6,5 @@ export interface Dynamic {
 export interface State2Props<T> {
   state: T;
   // setState: (callback: (state: T) => T) => void;
-  // setState: (state: T) => void;
-  setState: (state: EditorState) => void;
+  setState: (state: T) => void;
 }

tsconfig.app.json

@@ -20,8 +20,8 @@
 
     /* Linting */
     "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true