Add Escape to shortcut to deselect replaceContainer

src/Components/Editor/Actions/Shortcuts.ts

@@ -7,7 +7,8 @@ export function OnKey(
   history: IHistoryState[],
   historyCurrentStep: number,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
-  deleteAction: () => void
+  deleteAction: () => void,
+  resetState: () => void
 ): void {
   if (!ENABLE_SHORTCUTS) {
     return;
@@ -27,5 +28,7 @@ export function OnKey(
     setHistoryCurrentStep(historyCurrentStep + 1);
   } else if (event.key === 'Delete') {
     deleteAction();
+  } else if (event.key === 'Escape') {
+    resetState();
   }
 }

src/Components/Editor/Editor.tsx

@@ -1,7 +1,7 @@
-import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react';
+import React, { type Dispatch, type SetStateAction, useEffect, useRef } from 'react';
 import './Editor.scss';
-import { IConfiguration } from '../../Interfaces/IConfiguration';
+import { type IConfiguration } from '../../Interfaces/IConfiguration';
-import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { type IHistoryState } from '../../Interfaces/IHistoryState';
 import { UI } from '../UI/UI';
 import { SelectContainer, DeleteContainer, OnPropertyChange, ReplaceByContainer } from './Actions/ContainerOperations';
 import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
@@ -13,7 +13,7 @@ import { FindContainerById } from '../../utils/itertools';
 import { Menu } from '../Menu/Menu';
 import { InitActions } from './Actions/ContextMenuActions';
 import { AddContainerToSelectedContainer, AddContainer } from './Actions/AddContainer';
-import { IReplaceContainer } from '../../Interfaces/IReplaceContainer';
+import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer';
 
 interface IEditorProps {
   root: Element | Document
@@ -26,16 +26,18 @@ function UseShortcuts(
   history: IHistoryState[],
   historyCurrentStep: number,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
-  deleteAction: () => void
+  deleteAction: () => void,
+  resetState: () => void
 ): void {
   useEffect(() => {
     function OnKeyUp(event: KeyboardEvent): void {
-      return OnKey(
+      OnKey(
         event,
         history,
         historyCurrentStep,
         setHistoryCurrentStep,
-        deleteAction
+        deleteAction,
+        resetState
       );
     }
 
@@ -63,6 +65,7 @@ function UseNewHistoryState(
   };
 }
 
+
 export function Editor(props: IEditorProps): JSX.Element {
   // States
   const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
@@ -72,6 +75,10 @@ export function Editor(props: IEditorProps): JSX.Element {
   const editorRef = useRef<HTMLDivElement>(null);
   const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep);
 
+  function ResetState(): void {
+    setReplaceContainer({ isReplacing: false, id: undefined, category: undefined });
+  }
+
   // Events
   UseShortcuts(
     history,
@@ -82,7 +89,8 @@ export function Editor(props: IEditorProps): JSX.Element {
       setNewHistory(
         DeleteContainer(current.selectedContainerId, history, historyCurrentStep)
       );
-    }
+    },
+    ResetState
   );
   UseCustomEvents(
     props.root,
@@ -125,25 +133,31 @@ export function Editor(props: IEditorProps): JSX.Element {
           historyCurrentStep
         }}
         replaceContainer={replaceContainer}
-        selectContainer={(container) => setNewHistory(
+        selectContainer={(container) => {
-          SelectContainer(
+          setNewHistory(
-            container,
+            SelectContainer(
-            history,
+              container,
-            historyCurrentStep
+              history,
-          ))}
+              historyCurrentStep
-        deleteContainer={(containerId: string) => setNewHistory(
+            ));
-          DeleteContainer(
+        }}
-            containerId,
+        deleteContainer={(containerId: string) => {
-            history,
+          setNewHistory(
-            historyCurrentStep
+            DeleteContainer(
-          ))}
+              containerId,
-        onPropertyChange={(key, value, type) => setNewHistory(
+              history,
-          OnPropertyChange(
+              historyCurrentStep
-            key, value, type,
+            ));
-            selected,
+        }}
-            history,
+        onPropertyChange={(key, value, type) => {
-            historyCurrentStep
+          setNewHistory(
-          ))}
+            OnPropertyChange(
+              key, value, type,
+              selected,
+              history,
+              historyCurrentStep
+            ));
+        }}
         addOrReplaceContainer={(type) => {
           if (selected === null || selected === undefined) {
             return;
@@ -168,48 +182,60 @@ export function Editor(props: IEditorProps): JSX.Element {
             ));
           }
         }}
-        addContainerAt={(index, type, parent) => setNewHistory(
+        addContainerAt={(index, type, parent) => {
-          AddContainer(
+          setNewHistory(
-            index,
+            AddContainer(
-            type,
+              index,
-            parent,
+              type,
-            configuration,
+              parent,
+              configuration,
+              history,
+              historyCurrentStep
+            )
+          );
+        }}
+        addSymbol={(type) => {
+          setNewHistory(
+            AddSymbol(
+              type,
+              configuration,
+              history,
+              historyCurrentStep
+            ));
+        }}
+        onSymbolPropertyChange={(key, value) => {
+          setNewHistory(
+            OnSymbolPropertyChange(
+              key, value,
+              history,
+              historyCurrentStep
+            ));
+        }}
+        selectSymbol={(symbolId) => {
+          setNewHistory(
+            SelectSymbol(
+              symbolId,
+              history,
+              historyCurrentStep
+            ));
+        }}
+        deleteSymbol={(symbolId) => {
+          setNewHistory(
+            DeleteSymbol(
+              symbolId,
+              history,
+              historyCurrentStep
+            ));
+        }}
+        saveEditorAsJSON={() => {
+          SaveEditorAsJSON(
             history,
-            historyCurrentStep
+            historyCurrentStep,
-          )
+            configuration
-        )}
+          );
-        addSymbol={(type) => setNewHistory(
+        }}
-          AddSymbol(
+        saveEditorAsSVG={() => { SaveEditorAsSVG(); }}
-            type,
+        loadState={(move) => { setHistoryCurrentStep(move); }}
-            configuration,
-            history,
-            historyCurrentStep
-          ))}
-        onSymbolPropertyChange={(key, value) => setNewHistory(
-          OnSymbolPropertyChange(
-            key, value,
-            history,
-            historyCurrentStep
-          ))}
-        selectSymbol={(symbolId) => setNewHistory(
-          SelectSymbol(
-            symbolId,
-            history,
-            historyCurrentStep
-          ))}
-        deleteSymbol={(symbolId) => setNewHistory(
-          DeleteSymbol(
-            symbolId,
-            history,
-            historyCurrentStep
-          ))}
-        saveEditorAsJSON={() => SaveEditorAsJSON(
-          history,
-          historyCurrentStep,
-          configuration
-        )}
-        saveEditorAsSVG={() => SaveEditorAsSVG()}
-        loadState={(move) => setHistoryCurrentStep(move)}
         setReplaceContainer={setReplaceContainer}
       />
       <Menu