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,

src/Components/Menu/Menu.tsx

@@ -16,6 +16,9 @@ export interface IMenuAction {
   /** title to show on hover */
   title?: string
 
+  /** description of the shortcut */
+  shortcut?: string
+
   /** function to be called on button click */
   action: (target: HTMLElement) => void
 }
@@ -101,6 +104,7 @@ export function Menu(props: IMenuProps): JSX.Element {
           className={'contextmenu-item'}
           text={action.text}
           title={action.title}
+          shortcut={action.shortcut}
           onClick={() => action.action(target)} />);
       });
     };

src/Components/Menu/MenuItem.tsx

@@ -4,15 +4,18 @@ interface IMenuItemProps {
   className?: string
   text: string
   title?: string
+  shortcut?: string
   onClick: () => void
 }
 
 export function MenuItem(props: IMenuItemProps): JSX.Element {
   return (
     <button type="button"
-      className={props.className}
+      className={`flex place-content-between ${props.className ?? ''}`}
       title={props.title}
-      onClick={() => props.onClick()}>{props.text}
+      onClick={() => props.onClick()}>
+      {props.text}
+      <span dangerouslySetInnerHTML={{ __html: props.shortcut ?? '' }} />
     </button>
   );
 }

test-server/http.js

@@ -116,7 +116,61 @@ const GetSVGLayoutConfiguration = () => {
           stroke: 'green',
           fill: 'white'
         },
-        Category: "Stuff"
+        Category: "Stuff",
+        Actions: [
+          {
+            Id: "SplitRemplissage",
+            Action: "SplitRemplissage",
+            Label: "Diviser le remplissage en insérant un montant",
+            Description: "Diviser le remplissage en insérant un montant",
+            CustomLogo: {
+              Base64Image: null,
+              Name: 'Image1',
+              Svg: null,
+              Url: ""
+            },
+            AddingBehavior: 2
+          },
+          {
+            Id: "SplitRemplissageParent",
+            Action: "SplitRemplissageParent",
+            Label: "Diviser le remplissage en insérant un montant",
+            Description: "Diviser le remplissage en insérant un montant",
+            CustomLogo: {
+              Base64Image: null,
+              Name: 'Image1',
+              Svg: null,
+              Url: ""
+            },
+            AddingBehavior: 3
+          },
+          {
+            Id: "SplitRemplissageParent",
+            Action: "SplitRemplissageParent",
+            Label: "Diviser le remplissage en insérant un montant",
+            Description: "Diviser le remplissage en insérant un montant",
+            CustomLogo: {
+              Base64Image: null,
+              Name: 'Image1',
+              Svg: null,
+              Url: ""
+            },
+            AddingBehavior: 3
+          },
+          {
+            Id: "SplitRemplissageParent",
+            Action: "SplitRemplissageParent",
+            Label: "Diviser le remplissage en insérant un montant",
+            Description: "Diviser le remplissage en insérant un montant",
+            CustomLogo: {
+              Base64Image: null,
+              Name: 'Image1',
+              Svg: null,
+              Url: ""
+            },
+            AddingBehavior: 3
+          }
+        ],
       },
       {
         Type: 'Remplissage',