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) => {
+          setNewHistory(
             SelectContainer(
               container,
               history,
               historyCurrentStep
-          ))}
+            ));
-        deleteContainer={(containerId: string) => setNewHistory(
+        }}
+        deleteContainer={(containerId: string) => {
+          setNewHistory(
             DeleteContainer(
               containerId,
               history,
               historyCurrentStep
-          ))}
+            ));
-        onPropertyChange={(key, value, type) => setNewHistory(
+        }}
+        onPropertyChange={(key, value, type) => {
+          setNewHistory(
             OnPropertyChange(
               key, value, type,
               selected,
               history,
               historyCurrentStep
-          ))}
+            ));
+        }}
         addOrReplaceContainer={(type) => {
           if (selected === null || selected === undefined) {
             return;
@@ -168,7 +182,8 @@ export function Editor(props: IEditorProps): JSX.Element {
             ));
           }
         }}
-        addContainerAt={(index, type, parent) => setNewHistory(
+        addContainerAt={(index, type, parent) => {
+          setNewHistory(
             AddContainer(
               index,
               type,
@@ -177,39 +192,50 @@ export function Editor(props: IEditorProps): JSX.Element {
               history,
               historyCurrentStep
             )
-        )}
+          );
-        addSymbol={(type) => setNewHistory(
+        }}
+        addSymbol={(type) => {
+          setNewHistory(
             AddSymbol(
               type,
               configuration,
               history,
               historyCurrentStep
-          ))}
+            ));
-        onSymbolPropertyChange={(key, value) => setNewHistory(
+        }}
+        onSymbolPropertyChange={(key, value) => {
+          setNewHistory(
             OnSymbolPropertyChange(
               key, value,
               history,
               historyCurrentStep
-          ))}
+            ));
-        selectSymbol={(symbolId) => setNewHistory(
+        }}
+        selectSymbol={(symbolId) => {
+          setNewHistory(
             SelectSymbol(
               symbolId,
               history,
               historyCurrentStep
-          ))}
+            ));
-        deleteSymbol={(symbolId) => setNewHistory(
+        }}
+        deleteSymbol={(symbolId) => {
+          setNewHistory(
             DeleteSymbol(
               symbolId,
               history,
               historyCurrentStep
-          ))}
+            ));
-        saveEditorAsJSON={() => SaveEditorAsJSON(
+        }}
+        saveEditorAsJSON={() => {
+          SaveEditorAsJSON(
             history,
             historyCurrentStep,
             configuration
-        )}
+          );
-        saveEditorAsSVG={() => SaveEditorAsSVG()}
+        }}
-        loadState={(move) => setHistoryCurrentStep(move)}
+        saveEditorAsSVG={() => { SaveEditorAsSVG(); }}
+        loadState={(move) => { setHistoryCurrentStep(move); }}
         setReplaceContainer={setReplaceContainer}
       />
       <Menu