Add keyboard shortcut for delete-button

- Implemented useShortcut hook for managing keyboard shortcuts.
- Updated ToolbarButton component to use the useShortcut hook.
- Configured DeleteButton to use the new shortcut functionality with the 'Delete' key.

src/common/components/inline-edit/inline-edit.tsx

@@ -42,7 +42,9 @@ export const EditableComponent: React.FC<Props> = props => {
       if (isEditing && event.key === 'Escape') {
         setIsEditing(false);
         setEditText(text);
-      } else if (isEditing && event.key === 'Enter') {
+      }
+
+      if (isEditing && event.key === 'Enter') {
         setIsEditing(false);
         onTextSubmit(inputRef.current?.value || '');
       }

src/common/helpers/platform.helpers.ts

@@ -0,0 +1,7 @@
+export function isMacOS() {
+  return navigator.userAgent.toLowerCase().includes('mac');
+}
+
+export function isWindowsOrLinux() {
+  return !isMacOS();
+}

src/core/providers/canvas/canvas.model.ts

@@ -30,5 +30,5 @@ export interface CanvasContextModel {
   updateShapeSizeAndPosition: (id: string, position: Coord, size: Size) => void;
   updateShapePosition: (id: string, position: Coord) => void;
   selectionInfo: SelectionInfo;
-  deleteSelectedShape: () => void;
+  deleteSelectedShape: (id: any) => void;
 }

src/pods/toolbar/components/delete-button/delete-button.tsx

@@ -2,17 +2,26 @@ import { DeleteIcon } from '@/common/components/icons/delete-icon.component';
 import { ToolbarButton } from '@/pods/toolbar/components/toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 import { useCanvasContext } from '@/core/providers';
+import { SHORTCUTS } from '../../shortcut/shortcut.const';
+
 export const DeleteButton = () => {
-  const { deleteSelectedShape, selectionInfo } = useCanvasContext();
+  const { selectionInfo, deleteSelectedShape } = useCanvasContext();
+
+  const handleDeleteSelectedItemClick = () => {
+    if (selectionInfo.selectedShapeId) {
+      deleteSelectedShape(selectionInfo.selectedShapeId);
+    }
+  };
 
   return (
     <ToolbarButton
-      onClick={deleteSelectedShape}
+      icon={<DeleteIcon />}
+      label="Delete"
+      onClick={handleDeleteSelectedItemClick}
       className={classes.button}
-      disabled={selectionInfo.selectedShapeId ? false : true}
-    >
-      <DeleteIcon />
-      <span>Delete</span>
-    </ToolbarButton>
+      disabled={!selectionInfo.selectedShapeId}
+      shortcutOptions={SHORTCUTS.delete}
+      children={<></>}
+    />
   );
 };

src/pods/toolbar/components/toolbar-button/toolbar-button.tsx

@@ -1,17 +1,51 @@
+import useShortcut from '../../shortcut/shortcut.hook';
+/* import { isMacOS } from '@/common/helpers/platform.helpers'; */
+import { ShortcutOptions } from '../../shortcut/shortcut.model';
+
 interface Props {
   children: React.ReactNode;
   onClick?: () => void;
   className?: string;
   disabled?: boolean;
+  shortcutOptions?: ShortcutOptions;
+  icon?: React.ReactNode;
+  label: string;
 }
-export const ToolbarButton: React.FC<Props> = ({
-  children,
-  onClick,
-  className,
-  disabled,
-}) => {
+export const ToolbarButton: React.FC<Props> = props => {
+  const {
+    children,
+    onClick = () => {},
+    className,
+    disabled,
+    icon,
+    label,
+    shortcutOptions,
+  } = props;
+
+  /* const shortcutCommand = isMacOS() ? 'Ctrl' : 'Alt';
+  const showTooltip = shortcutOptions && !disabled;
+  const tooltipText = `(${shortcutCommand} + ${shortcutOptions?.targetKeyLabel})`; */
+
+  useShortcut({
+    ...shortcutOptions,
+    targetKey: shortcutOptions?.targetKey || [],
+    callback: onClick,
+  });
+
   return (
-    <button onClick={onClick} className={className} disabled={disabled}>
+    <button
+      onClick={onClick}
+      className={className}
+      disabled={disabled}
+      aria-describedby={shortcutOptions?.id}
+    >
+      <span aria-hidden={true}>{icon}</span>
+      <span>{label}</span>
+      {/* {showTooltip && (
+        <span role="tooltip" id={shortcutOptions?.id}>
+          {tooltipText}
+        </span>
+      )} */}
       {children}
     </button>
   );

src/pods/toolbar/shortcut/shortcut.const.ts

@@ -0,0 +1,14 @@
+import { ShortcutOptions } from './shortcut.model';
+
+interface Shortcut {
+  [key: string]: ShortcutOptions;
+}
+
+export const SHORTCUTS: Shortcut = {
+  delete: {
+    description: 'Delete',
+    id: 'delete-button-shortcut',
+    targetKey: ['Backspace'],
+    targetKeyLabel: 'Backspace',
+  },
+};

src/pods/toolbar/shortcut/shortcut.hook.tsx

@@ -0,0 +1,35 @@
+import { isMacOS, isWindowsOrLinux } from '@/common/helpers/platform.helpers';
+import { useEffect } from 'react';
+
+export interface ShortcutHookProps {
+  targetKey: string[];
+  callback: () => void;
+}
+
+const useShortcut = ({ targetKey, callback }: ShortcutHookProps) => {
+  const handleKeyPress = (event: KeyboardEvent) => {
+    const isAltKeyPressed = event.getModifierState('Alt');
+    const isCtrlKeyPressed = event.getModifierState('Control');
+
+    if (
+      (isWindowsOrLinux() && isAltKeyPressed) ||
+      (isMacOS() && isCtrlKeyPressed)
+    ) {
+      if (targetKey.includes(event.key)) {
+        event.preventDefault();
+        callback();
+      }
+    }
+  };
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => handleKeyPress(event);
+    window.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [targetKey, callback]);
+};
+
+export default useShortcut;

src/pods/toolbar/shortcut/shortcut.model.ts

@@ -0,0 +1,6 @@
+export interface ShortcutOptions {
+  id: string;
+  targetKey: string[];
+  targetKeyLabel: string;
+  description: string;
+}