implement copy paste

src/App/App.tsx

@@ -14,6 +14,7 @@ import { TopPanel } from "./TopPanel";
 import { RTHistory } from "./RTHistory";
 import { AST } from "./AST";
 import { TraceableError } from "../statecharts/parser";
+import { getKeyHandler } from "./shortcut_handler";
 
 export function App() {
   const [mode, setMode] = useState<InsertMode>("and");
@@ -83,6 +84,14 @@ export function App() {
 
   }, [time, rtIdx]);
 
+  useEffect(() => {
+    const onKeyDown = getKeyHandler(setMode);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+
   return <Stack sx={{height:'100vh'}}>
     {/* Top bar */}
     <Box

src/App/RTHistory.tsx

@@ -31,11 +31,11 @@ export function RTHistory({rt, rtIdx, ast, setRTIdx, setTime}: RTHistoryProps) {
 
 
 function ShowEnvironment(props: {environment: Environment}) {
-  return <div>{[...props.environment.entries()]
-    .filter(([variable]) => !variable.startsWith('_'))
-    .map(([variable,value]) =>
-    `${variable}: ${value}`
-  ).join(', ')}</div>;
+  return <div>{
+    [...props.environment.entries()]
+      .filter(([variable]) => !variable.startsWith('_'))
+      .map(([variable,value]) => `${variable}: ${value}`).join(', ')
+  }</div>;
 }
 
 function ShowMode(props: {mode: Mode, statechart: Statechart}) {

src/App/TopPanel.tsx

@@ -116,7 +116,7 @@ export function TopPanel({rt, time, setTime, onInit, onClear, onRaise, ast, mode
     </div>
     &emsp;
     <div className="toolbar">
-    <button title="(re)initialize simulation" onClick={onInit} ><CachedIcon fontSize="small"/></button>
+    <button title="(re)initialize simulation" onClick={onInit} ><CachedIcon fontSize="small"/><PlayArrowIcon fontSize="small"/></button>
     <button title="clear the simulation" onClick={onClear} disabled={!rt}><ClearIcon fontSize="small"/></button>
 
     &emsp;

src/App/shortcut_handler.ts

@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction } from "react";
+import { InsertMode } from "../VisualEditor/VisualEditor";
+
+export function getKeyHandler(setMode: Dispatch<SetStateAction<InsertMode>>) {
+  return function onKeyDown(e: KeyboardEvent) {
+    if (e.key === "a") {
+      setMode("and");
+    }
+    if (e.key === "o") {
+      setMode("or");
+    }
+    if (e.key === "p") {
+      setMode("pseudo");
+    }
+    if (e.key === "t") {
+      setMode("transition");
+    }
+    if (e.key === "x") {
+      setMode("text");
+    }
+  }
+}