diff --git a/src/App.tsx b/src/App.tsx
index c9d3a0a..86fa7d7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,8 +10,8 @@ const commands: [string, string[], string][] = [
["call" , ['c' ], "call" ],
["eval" , ['e','Tab','Enter'], "eval" ],
["transform", ['t', '.' ], "transform" ],
- ["let" , ['l', '=' ], "let ... in ..."],
- ["lambda" , ['a' ], "lambda" ],
+ ["let" , ['l', '=' ], "let … in …" ],
+ ["lambda" , ['a' ], "λx: …" ],
];
const examples: [string, EditorState][] = [
diff --git a/src/CallBlock.css b/src/CallBlock.css
index a6b2346..5200efc 100644
--- a/src/CallBlock.css
+++ b/src/CallBlock.css
@@ -7,10 +7,6 @@
vertical-align: top;
}
-/* * {
- vertical-align: text-top;
-} */
-
.functionName {
/* text-align: center; */
background-color: white;
@@ -22,15 +18,16 @@
right: 0;
clip-path: polygon(1% 0%, 100% 50%, 0% 100%);
height: 100%;
- aspect-ratio: 0.25/1;
- transform: translateX(99%);
+ width: var(--param-arrow-width);
+ right: calc(var(--param-arrow-width)*(-1) + .2px);
}
.inputParam {
- margin-right: 20px;
display: inline-flex;
vertical-align: middle;
position: relative; /* to ensure the :after (which is absolute) is relative to ourselves */
flex-grow: 1;
+ --param-arrow-width: 8px;
+ margin-right: calc(var(--param-arrow-width)*2);
}
/* Count nested level AFTER .outputParam (resets the depth) */
diff --git a/src/LetInBlock.css b/src/LetInBlock.css
index 9832fe6..533f704 100644
--- a/src/LetInBlock.css
+++ b/src/LetInBlock.css
@@ -1,11 +1,17 @@
.letIn {
display: inline-block;
+ /* border: 1px solid darkgrey; */
+}
+
+.inner {
border: 1px solid darkgrey;
+ margin-left: 4px
}
.decl {
display: grid;
grid-template-columns: auto auto auto auto;
+ width: fit-content;
}
.column.rightAlign {
diff --git a/src/LetInBlock.tsx b/src/LetInBlock.tsx
index 8af494e..c76b2c5 100644
--- a/src/LetInBlock.tsx
+++ b/src/LetInBlock.tsx
@@ -3,12 +3,13 @@ import { useContext, useEffect, useRef } from "react";
import { Editor, type EditorState } from "./Editor";
import { EnvContext } from "./EnvContext";
-import { evalEditorBlock, evalLetInBlock, makeInnerEnv, scoreResolved } from "./eval";
+import { evalEditorBlock, makeInnerEnv, scoreResolved } from "./eval";
import { type State2Props } from "./Editor";
import { autoInputWidth } from "./util/dom_trickery";
import "./LetInBlock.css";
import type { SuggestionType } from "./InputBlock";
+import { CommandContext } from "./CommandContext";
export interface LetInBlockState {
kind: "let";
@@ -35,13 +36,14 @@ export function LetInBlock({state, setState, suggestionPriority}: LetInBlockProp
state={state}
setState={setState}
suggestionPriority={suggestionPriority}
- />
+ />
}
function DeclColumns({state, setState, suggestionPriority}) {
const env = useContext(EnvContext);
+ const globalContext = useContext(CommandContext);
const {name, value, inner} = state;
const setInner = callback => setState(state => ({...state, inner: callback(state.inner)}));
@@ -86,8 +88,8 @@ function DeclColumns({state, setState, suggestionPriority}) {
onCancel={() => setState(state => state.inner)} // keep inner
/>
- {/* in */}
{inner.kind === "let" &&
+ globalContext?.syntacticSugar &&
setState(state => ({...state, inner: callback(state.inner)}));
const valueResolved = evalEditorBlock(state.value, env);
const innerEnv = makeInnerEnv(env, state.name, valueResolved);
const onCancel = () => setState(state => state.value);
- if (state.inner.kind === "let") {
+ if (state.inner.kind === "let" && globalContext?.syntacticSugar) {
return