Add shortcut description to right click + add Suppr shortcut + Fix next selection after deletion

src/Components/Editor/Editor.tsx

@@ -34,6 +34,7 @@ function InitActions(
     [{
       text: 'Delete',
       title: 'Delete the container',
+      shortcut: '<kbd>Suppr</kbd>',
       action: (target: HTMLElement) => {
         const id = target.id;
         const newHistory = DeleteContainer(
@@ -50,6 +51,7 @@ function InitActions(
     [{
       text: 'Delete',
       title: 'Delete the container',
+      shortcut: '<kbd>Suppr</kbd>',
       action: (target: HTMLElement) => {
         const id = target.id;
         const newHistory = DeleteSymbol(
@@ -99,7 +101,8 @@ function InitActions(
 function UseShortcuts(
   history: IHistoryState[],
   historyCurrentStep: number,
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
+  setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
+  deleteAction: () => void
 ): void {
   useEffect(() => {
     function OnKeyUp(event: KeyboardEvent): void {
@@ -107,7 +110,8 @@ function UseShortcuts(
         event,
         history,
         historyCurrentStep,
-        setHistoryCurrentStep
+        setHistoryCurrentStep,
+        deleteAction
       );
     }
 
@@ -200,7 +204,17 @@ export function Editor(props: IEditorProps): JSX.Element {
   const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep);
 
   // Events
-  UseShortcuts(history, historyCurrentStep, setHistoryCurrentStep);
+  UseShortcuts(
+    history,
+    historyCurrentStep,
+    setHistoryCurrentStep,
+    () => {
+      const current = GetCurrentHistoryState(history, historyCurrentStep);
+      setNewHistory(
+        DeleteContainer(current.selectedContainerId, history, historyCurrentStep)
+      );
+    }
+  );
   UseCustomEvents(
     props.root,
     history,