aadd delete shortcut when a widget is in selectable mode (#1418)

* feat: add delete shortcut when a widget is in selectable mode

* feat: ignore key events if the target element is input, textarea, iscontenteditable

frontend/src/Editor/Inspector/Inspector.jsx

@@ -6,6 +6,8 @@ import { renderElement } from './Utils';
 import { toast } from 'react-toastify';
 import { validateQueryName, convertToKebabCase } from '@/_helpers/utils';
 import { EventManager } from './EventManager';
+import useShortcuts from '@/_hooks/use-shortcuts';
+import { ConfirmDialog } from '@/_components';
 
 export const Inspector = ({
   selectedComponentId,
@@ -17,6 +19,7 @@ export const Inspector = ({
   apps,
   darkMode,
   switchSidebarTab,
+  removeComponent,
 }) => {
   const selectedComponent = {
     id: selectedComponentId,
@@ -24,9 +27,17 @@ export const Inspector = ({
     layouts: allComponents[selectedComponentId].layouts,
   };
   const [component, setComponent] = useState(selectedComponent);
-
+  const [showWidgetDeleteConfirmation, setWidgetDeleteConfirmation] = useState(false);
   const [components, setComponents] = useState(allComponents);
 
+  useShortcuts(
+    ['Backspace'],
+    () => {
+      setWidgetDeleteConfirmation(true);
+    },
+    []
+  );
+
   const componentMeta = componentTypes.find((comp) => component.component.component === comp.component);
 
   useEffect(() => {
@@ -173,6 +184,15 @@ export const Inspector = ({
 
   return (
     <div className="inspector">
+      <ConfirmDialog
+        show={showWidgetDeleteConfirmation}
+        message={'Widget will be deleted, do you want to continue?'}
+        onConfirm={() => {
+          switchSidebarTab(2);
+          removeComponent(selectedComponent);
+        }}
+        onCancel={() => setWidgetDeleteConfirmation(false)}
+      />
       <div className="header px-2 py-1 row">
         <div className="col-auto">
           <div className="input-icon">

frontend/src/_hooks/use-shortcuts.jsx

@@ -1,14 +1,28 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
-// https://keycode.info/ this cheatsheet gives info about key presses
+// https://keycode.info/ this cheat sheet gives info about key presses
 
 import { useEffect, useCallback } from 'react';
-const setsEqual = (setA, setB) => setA.size === setB.size && !Array.from(setA).some((v) => !setB.has(v));
+
 const useShortcuts = (keys, callback, deps) => {
+  const ignoreTags = ['input', 'select', 'textarea'];
+  const ignoreEventsCondition = (event) => {
+    const { target } = event;
+
+    if (target && target.tagName) {
+      const tagName = target.tagName.toLowerCase();
+
+      return ignoreTags.includes(tagName) || target.isContentEditable;
+    } else {
+      return false;
+    }
+  };
+  const setsEqual = (setA, setB) => setA.size === setB.size && !Array.from(setA).some((v) => !setB.has(v));
   const memoizedCallback = useCallback(callback, deps || []);
   const targetKeys = new Set(keys.map((key) => key.toLowerCase()));
   const pressedKeys = new Set();
   function onKeyPressed(event) {
+    if (ignoreEventsCondition(event)) return;
     pressedKeys.add(event.key.toLowerCase());
     if (setsEqual(pressedKeys, targetKeys)) {
       memoizedCallback();