Added nodelete class to not delete node when not selecting a text on modal

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -67,7 +67,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           )}
         </div>
         <Input
-          className="nopan nodrag noundo nocopy mt-2 font-normal"
+          className="nopan nodelete nodrag noundo nocopy mt-2 font-normal"
           onChange={handleNameChange}
           type="text"
           name="name"
@@ -86,7 +86,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           name="description"
           id="description"
           onChange={handleDescriptionChange}
-          value={description}
+          value={description!}
           placeholder="Flow description"
           className="mt-2 max-h-[100px] font-normal"
           rows={3}

src/frontend/src/components/ui/dialog.tsx

@@ -8,12 +8,11 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 
 const DialogPortal = ({
-  className,
   children,
   ...props
 }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="nopan nodrag noundo nocopy fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+  <DialogPrimitive.Portal {...props}>
+    <div className="nopan nodelete nodrag noundo nocopy fixed inset-0 z-50 flex items-start justify-center sm:items-center">
       {children}
     </div>
   </DialogPrimitive.Portal>
@@ -27,7 +26,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "nopan nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "nopan nodelete nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}

src/frontend/src/components/ui/input.tsx

@@ -9,7 +9,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        className={cn("nopan nodrag noundo nocopy primary-input", className)}
+        className={cn(
+          "nopan nodelete nodrag noundo nocopy primary-input",
+          className
+        )}
         ref={ref}
         {...props}
       />

src/frontend/src/components/ui/rename-label.tsx

@@ -57,7 +57,7 @@ export default function RenameLabel(props) {
           ref={inputRef}
           onInput={resizeInput}
           className={cn(
-            "nopan nodrag noundo nocopy rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
+            "nopan nodelete nodrag noundo nocopy rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
             props.className
           )}
           onBlur={() => {

src/frontend/src/components/ui/textarea.tsx

@@ -8,7 +8,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
-        className={cn("nopan nodrag noundo nocopy textarea-primary", className)}
+        className={cn(
+          "nopan nodelete nodrag noundo nocopy textarea-primary",
+          className
+        )}
         ref={ref}
         {...props}
       />

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -46,7 +46,7 @@ export default function DictAreaModal({
           />
         </BaseModal.Header>
         <BaseModal.Content>
-          <div className="nopan nodrag noundo nocopy flex h-full w-full flex-col transition-all ">
+          <div className="nopan nodelete nodrag noundo nocopy flex h-full w-full flex-col transition-all ">
             <JsonView
               theme="vscode"
               dark={true}

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -70,6 +70,7 @@ export default function Page({
     setReactFlowInstance,
     templates,
     setFilterEdge,
+    deleteNode,
   } = useContext(typesContext);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
 
@@ -112,6 +113,18 @@ export default function Page({
           event.preventDefault();
         }
       }
+      if (!isWrappedWithClass(event, "nodelete")) {
+        console.log(event);
+        if (
+          (event.key === "Delete" || event.key === "Backspace") &&
+          lastSelection
+        ) {
+          event.preventDefault();
+          lastSelection.nodes.forEach((k) => {
+            deleteNode(k.id);
+          });
+        }
+      }
     };
     const handleMouseMove = (event) => {
       setPosition({ x: event.clientX, y: event.clientY });
@@ -450,8 +463,9 @@ export default function Page({
                   connectionLineComponent={ConnectionLineComponent}
                   onDragOver={onDragOver}
                   onDrop={onDrop}
-                  onNodesDelete={onDelete}
                   onSelectionChange={onSelectionChange}
+                  onNodesDelete={onDelete}
+                  deleteKeyCode={[]}
                   className="theme-attribution"
                   minZoom={0.01}
                   maxZoom={8}

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -205,7 +205,7 @@ export default function ExtraSidebar(): JSX.Element {
           name="search"
           id="search"
           placeholder="Search"
-          className="nopan nodrag noundo nocopy input-search"
+          className="nopan nodelete nodrag noundo nocopy input-search"
           onChange={(event) => {
             handleSearchInput(event.target.value);
             // Set search input state