101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import './App.css'
|
|
import { Editor, type EditorState } from './Editor'
|
|
import { initialEditorState, nonEmptyEditorState, tripleFunctionCallEditorState } from "./configurations";
|
|
import { CommandContext } from './CommandContext';
|
|
|
|
export function App() {
|
|
const [history, setHistory] = useState([initialEditorState]);
|
|
// const [history, setHistory] = useState([nonEmptyEditorState]);
|
|
// const [history, setHistory] = useState([tripleFunctionCallEditorState]);
|
|
|
|
const [future, setFuture] = useState<EditorState[]>([]);
|
|
|
|
const pushHistory = (s: EditorState) => {
|
|
setHistory(history.concat([s]));
|
|
setFuture([]);
|
|
};
|
|
|
|
const onUndo = () => {
|
|
setFuture(future.concat(history.at(-1)!)); // add
|
|
setHistory(history.slice(0,-1)); // remove
|
|
};
|
|
const onRedo = () => {
|
|
setHistory(history.concat(future.at(-1)!)); // add
|
|
setFuture(future.slice(0,-1)); // remove
|
|
};
|
|
|
|
const onKeyDown = (e) => {
|
|
if (e.key === "Z" && e.ctrlKey) {
|
|
if (e.shiftKey) {
|
|
if (future.length > 0) {
|
|
onRedo();
|
|
}
|
|
}
|
|
else {
|
|
if (history.length > 1) {
|
|
onUndo();
|
|
}
|
|
}
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
window['APP_STATE'] = history; // useful for debugging
|
|
}, [history]);
|
|
|
|
useEffect(() => {
|
|
window.onkeydown = onKeyDown;
|
|
}, []);
|
|
|
|
const commands = [
|
|
["call" , "[c] call" ],
|
|
["eval" , "[u] [Tab] [Enter] eval"],
|
|
["transform", "[t] transform" ],
|
|
["let" , "[=] let ... in ..." ],
|
|
];
|
|
|
|
const [highlighted, setHighlighted] = useState(
|
|
commands.map(() => false));
|
|
|
|
const doHighlight = Object.fromEntries(commands.map(([id], i) => {
|
|
return [id, () => {
|
|
setHighlighted(h => h.with(i, true));
|
|
setTimeout(() => setHighlighted(h => h.with(i, false)), 100);
|
|
}];
|
|
}));
|
|
|
|
return (
|
|
<>
|
|
<header>
|
|
<button disabled={history.length===1} onClick={onUndo}>Undo ({history.length-1}) [Ctrl+Z]</button>
|
|
<button disabled={future.length===0} onClick={onRedo}>Redo ({future.length}) [Ctrl+Shift+Z]</button>
|
|
Commands:
|
|
{
|
|
commands.map(([_, descr], i) =>
|
|
<span key={i} className={'command' + (highlighted[i] ? (' highlighted') : '')}>
|
|
{descr}
|
|
</span>)
|
|
}
|
|
</header>
|
|
|
|
<main>
|
|
<CommandContext value={doHighlight}>
|
|
<Editor
|
|
state={history.at(-1)!}
|
|
setState={pushHistory}
|
|
onResolve={() => {}}
|
|
onCancel={() => {}}
|
|
filter={() => true}
|
|
focus={true}
|
|
/>
|
|
</CommandContext>
|
|
</main>
|
|
|
|
<footer>
|
|
<a href="https://deemz.org/git/joeri/dope2-webapp">Source code</a>
|
|
</footer>
|
|
</>
|
|
)
|
|
}
|