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

src/Components/Editor/Actions/ContainerOperations.ts

@@ -105,7 +105,7 @@ export function DeleteContainer(
 /**
  * Returns the next container that will be selected
  * after the selectedContainer is removed.
- * If the selected container is removed, select the sibling before,
+ * If the selected container is removed, select the sibling after,
  * If there is no sibling, select the parent,
  *
  * @param mainContainerClone Main container
@@ -121,7 +121,7 @@ function GetSelectedContainerOnDelete(
   index: number
 ): string {
   const newSelectedContainer = FindContainerById(mainContainerClone, selectedContainerId) ??
-    parent.children.at(index - 1) ??
+    parent.children.at(index) ??
     parent;
   const newSelectedContainerId = newSelectedContainer.properties.id;
   return newSelectedContainerId;

src/Components/Editor/Actions/Shortcuts.ts

@@ -6,7 +6,8 @@ export function OnKey(
   event: KeyboardEvent,
   history: IHistoryState[],
   historyCurrentStep: number,
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
+  setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
+  deleteAction: () => void
 ): void {
   if (!ENABLE_SHORTCUTS) {
     return;
@@ -24,5 +25,7 @@ export function OnKey(
               event.ctrlKey &&
               historyCurrentStep < history.length - 1) {
     setHistoryCurrentStep(historyCurrentStep + 1);
+  } else if (event.key === 'Delete') {
+    deleteAction();
   }
 }

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,