Add Undo/Redo to contextmenu + add separator between categories

src/Components/Menu/Menu.tsx

@@ -91,23 +91,9 @@ export function Menu(props: IMenuProps): JSX.Element {
 
   if (target !== undefined) {
     let count = 0;
-    for (const className of target.classList) {
-      count++;
-      const actions = props.actions.get(className);
-      if (actions === undefined) {
-        continue;
-      }
-
-      actions.forEach((action, index) => {
-        children.push(<MenuItem
-          key={`contextmenu-item-${count}-${index}`}
-          className={'contextmenu-item'}
-          text={action.text}
-          title={action.title}
-          shortcut={action.shortcut}
-          onClick={() => action.action(target)} />);
-      });
-    };
+    count = AddClassSpecificActions(target, count, props, children);
+    // Add universal actions
+    AddUniversalActions(props, children, count, target);
   }
 
   const visible = isOpen && children.length > 0 ? 'visible opacity-1' : 'invisible opacity-0';
@@ -127,3 +113,51 @@ export function Menu(props: IMenuProps): JSX.Element {
     </div>
   );
 }
+
+function AddClassSpecificActions(
+  target: HTMLElement,
+  count: number,
+  props: IMenuProps,
+  children: JSX.Element[]
+): number {
+  for (const className of target.classList) {
+    count++;
+    const actions = props.actions.get(className);
+
+    // Only select action where classname matches
+    if (actions === undefined) {
+      continue;
+    }
+
+    actions.forEach((action, index) => {
+      children.push(<MenuItem
+        key={`contextmenu-item-${count}-${index}`}
+        className={'contextmenu-item'}
+        text={action.text}
+        title={action.title}
+        shortcut={action.shortcut}
+        onClick={() => action.action(target)} />);
+    });
+    children.push(<hr className='border-slate-400' />);
+  };
+  return count;
+}
+
+function AddUniversalActions(props: IMenuProps, children: JSX.Element[], count: number, target: HTMLElement): number {
+  const actions = props.actions.get('');
+
+  if (actions !== undefined) {
+    count++;
+    actions.forEach((action, index) => {
+      children.push(<MenuItem
+        key={`contextmenu-item-${count}-${index}`}
+        className={'contextmenu-item'}
+        text={action.text}
+        title={action.title}
+        shortcut={action.shortcut}
+        onClick={() => action.action(target)} />);
+    });
+  }
+
+  return count;
+}