From 897824e07d939df8bc3fb4527c255fad0669529b Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Tue, 13 May 2025 15:06:15 +0200
Subject: [PATCH] Let ... in ... block is working

---
 src/App.css              |  1 +
 src/App.tsx              |  4 ++--
 src/CallBlock.css        |  9 ---------
 src/CallBlock.tsx        |  2 +-
 src/Editor.tsx           |  4 ++--
 src/InputBlock.tsx       |  2 +-
 src/LetInBlock.css       |  6 ++++++
 src/LetInBlock.tsx       | 21 ++++++++++++++-------
 src/index.css            |  1 -
 src/util/dom_trickery.ts |  2 +-
 10 files changed, 28 insertions(+), 24 deletions(-)
 create mode 100644 src/LetInBlock.css

diff --git a/src/App.css b/src/App.css
index ebc51c9..e48e754 100644
--- a/src/App.css
+++ b/src/App.css
@@ -24,6 +24,7 @@ nav {
 
 main {
   grid-area: content;
+  overflow: scroll;
 }
 
 aside {
diff --git a/src/App.tsx b/src/App.tsx
index 5f4087a..42d9d1a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -52,9 +52,9 @@ export function App() {
 
   const commands = [
     ["call"     , "[c] call"              ],
-    ["eval"     , "[u] [Tab] [Enter] eval"],
+    ["eval"     , "[e] [Tab] [Enter] eval"],
     ["transform", "[t] [.] transform"         ],
-    ["let"      , "[=] let ... in ..."    ],
+    ["let"      , "[l] [=] let ... in ..."    ],
   ];
 
   const [highlighted, setHighlighted] = useState(
diff --git a/src/CallBlock.css b/src/CallBlock.css
index 5488178..4d80413 100644
--- a/src/CallBlock.css
+++ b/src/CallBlock.css
@@ -5,20 +5,11 @@
   color: black;
 }
 
-.functionBlock.unifyError {
-  /* background-color: pink; */
-  /* color:white; */
-}
-
 .functionName {
   /* text-align: center; */
   background-color: white;
 }
 
-.functionBlock.unifyError .functionName {
-  /* background-color: pink; */
-}
-
 .inputParam:after {
   content: "";
   position: absolute;
diff --git a/src/CallBlock.tsx b/src/CallBlock.tsx
index 19160dd..8aea71d 100644
--- a/src/CallBlock.tsx
+++ b/src/CallBlock.tsx
@@ -152,7 +152,7 @@ function FunctionHeader({ fn, setFn, input, onFnResolve }) {
   
     //  end of recursion - draw function name
     return <div className="functionName">
-      &#119891;&#119899;&nbsp;
+      &nbsp;&#119891;&#119899;&nbsp;
       <Editor
         state={fn}
         setState={setFn}
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 7c3a829..d47750a 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -26,7 +26,7 @@ interface EditorProps extends State2Props<EditorState> {
 }
 
 function getCommands(type) {
-  const commands = ['u', 't', 'Enter', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Tab', 'l', '=', '.'];
+  const commands = ['e', 't', 'Enter', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Tab', 'l', '=', '.'];
   if (getSymbol(type) === symbolFunction) {
     commands.push('c');
   }
@@ -82,7 +82,7 @@ export function Editor({state, setState, onResolve, onCancel, filter}: EditorPro
     e.preventDefault();
     setNeedCommand(false);
     // u -> pass Up
-    if (e.key === "u" || e.key === "Enter" || e.key === "Tab" && !e.shiftKey) {
+    if (e.key === "e" || e.key === "Enter" || e.key === "Tab" && !e.shiftKey) {
       onResolve(state);
       globalContext?.doHighlight.eval();
       return;
diff --git a/src/InputBlock.tsx b/src/InputBlock.tsx
index 67c1c7a..5bc6b2a 100644
--- a/src/InputBlock.tsx
+++ b/src/InputBlock.tsx
@@ -154,7 +154,7 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
       }
       {/* Input box */}
       <input ref={inputRef}
-        placeholder="start typing..."
+        placeholder="<name or literal>"
         className="editable"
         value={text}
         onInput={onInput}
diff --git a/src/LetInBlock.css b/src/LetInBlock.css
new file mode 100644
index 0000000..2762ad9
--- /dev/null
+++ b/src/LetInBlock.css
@@ -0,0 +1,6 @@
+
+.keyword {
+  color: blue;
+  margin: 0 2px 0 2px;
+}
+
diff --git a/src/LetInBlock.tsx b/src/LetInBlock.tsx
index f88f2f9..84e38e8 100644
--- a/src/LetInBlock.tsx
+++ b/src/LetInBlock.tsx
@@ -5,6 +5,8 @@ import type { Dynamic, State2Props } from "./util/extra";
 import { growEnv } from "dope2";
 import { autoInputWidth } from "./util/dom_trickery";
 
+import "./LetInBlock.css";
+
 export interface LetInBlockState {
   kind: "let";
   name: string;
@@ -23,6 +25,9 @@ export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
   const env = useContext(EnvContext);
   const nameRef = useRef<HTMLInputElement>(null);
 
+  const setInner = inner => setState({...state, inner});
+  const setValue = value => setState({...state, value});
+
   const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
     setState({...state, name: e.target.value});
   }
@@ -37,27 +42,29 @@ export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
      && growEnv(env)(name)(value.resolved) || env;
   return <span className="letIn">
     <div className="decl">
-      let <input
+      <span className="keyword">let</span>
+      <input
         ref={nameRef}
         className='editable'
         value={name}
         placeholder="<variable name>"
         onChange={onChangeName}
-        /> =
+        />
+        <span className="keyword">=</span>
       <Editor
         state={value}
+        setState={setValue}
         filter={() => true}
-        onResolve={(state: EditorState) => {} }
-        onCancel={() => {} }
-        setState={(state: EditorState) => {} }
+        onResolve={() => {}}
+        onCancel={() => {}}
         />
-      &nbsp;in
+      &nbsp;<span className="keyword">in</span>
     </div>
     <div className="inner">
       <EnvContext value={innerEnv}>
         <Editor
           state={inner}
-          setState={innerState => setState({...state, inner})}
+          setState={setInner}
           filter={() => true}
           onResolve={onResolve}
           onCancel={() => {}}
diff --git a/src/index.css b/src/index.css
index ee875fd..f3f9495 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,4 +9,3 @@ body {
   font-style: normal;
   font-variation-settings: "wdth" 100;
 }
-
diff --git a/src/util/dom_trickery.ts b/src/util/dom_trickery.ts
index ffe3e14..915b145 100644
--- a/src/util/dom_trickery.ts
+++ b/src/util/dom_trickery.ts
@@ -51,6 +51,6 @@ export function focusPrevElement() {
 
 export const autoInputWidth = (inputRef: React.RefObject<HTMLInputElement| null>, text) => {
   if (inputRef.current) {
-    inputRef.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
+    inputRef.current.style.width = `${text.length === 0 ? 150 : (text.length*8.7)}px`;
   }
 }