Formatting

src/frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import "reactflow/dist/style.css";
 import "./App.css";
@@ -121,7 +121,6 @@ export default function App() {
     );
   };
 
-
   return (
     //need parent component with width and height
     <div className="flex h-full flex-col">

src/frontend/src/components/floatComponent/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { FloatComponentType } from "../../types/components";
-import { Input } from "../ui/input";
 import { handleKeyDown } from "../../utils/reactflowUtils";
+import { Input } from "../ui/input";
 
 export default function FloatComponent({
   value,
@@ -45,7 +45,7 @@ export default function FloatComponent({
           onChange(e.target.value);
         }}
         onKeyDown={(e) => {
-          handleKeyDown(e, value, '0');
+          handleKeyDown(e, value, "0");
         }}
       />
     </div>

src/frontend/src/components/inputComponent/index.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { InputComponentType } from "../../types/components";
+import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import { Input } from "../ui/input";
-import { handleKeyDown } from "../../utils/reactflowUtils";
 
 export default function InputComponent({
   value,
@@ -20,7 +20,6 @@ export default function InputComponent({
     }
   }, [disabled, onChange]);
 
-
   return (
     <div className="relative w-full">
       <Input
@@ -37,7 +36,7 @@ export default function InputComponent({
           onChange(e.target.value);
         }}
         onKeyDown={(e) => {
-          handleKeyDown(e, value, '');
+          handleKeyDown(e, value, "");
         }}
       />
       {password && (

src/frontend/src/components/inputListComponent/index.tsx

@@ -5,7 +5,6 @@ import _ from "lodash";
 import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
-import { handleKeyDown } from "../../utils/reactflowUtils";
 
 export default function InputListComponent({
   value,

src/frontend/src/components/intComponent/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { FloatComponentType } from "../../types/components";
-import { Input } from "../ui/input";
 import { handleKeyDown } from "../../utils/reactflowUtils";
+import { Input } from "../ui/input";
 
 export default function IntComponent({
   value,
@@ -18,8 +18,6 @@ export default function IntComponent({
     }
   }, [disabled, onChange]);
 
-
-
   return (
     <div className="w-full">
       <Input
@@ -40,7 +38,7 @@ export default function IntComponent({
           ) {
             event.preventDefault();
           }
-          handleKeyDown(event, value, '0');
+          handleKeyDown(event, value, "0");
         }}
         type="number"
         step="1"

src/frontend/src/modals/genericModal/index.tsx

@@ -16,13 +16,13 @@ import { TypeModal } from "../../constants/enums";
 import { alertContext } from "../../contexts/alertContext";
 import { postValidatePrompt } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
+import { handleKeyDown } from "../../utils/reactflowUtils";
 import {
   classNames,
   getRandomKeyByssmm,
   varHighlightHTML,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";
-import { handleKeyDown } from "../../utils/reactflowUtils";
 
 export default function GenericModal({
   field_name = "",
@@ -215,7 +215,7 @@ export default function GenericModal({
                 }}
                 placeholder="Type message here."
                 onKeyDown={(e) => {
-                  handleKeyDown(e, inputValue, '');
+                  handleKeyDown(e, inputValue, "");
                 }}
               />
             ) : type === TypeModal.PROMPT && !isEdit ? (
@@ -230,7 +230,7 @@ export default function GenericModal({
                 }}
                 placeholder="Type message here."
                 onKeyDown={(e) => {
-                  handleKeyDown(e, value, '');
+                  handleKeyDown(e, value, "");
                 }}
               />
             ) : (

src/frontend/src/utils/reactflowUtils.ts

@@ -1,10 +1,10 @@
 import _ from "lodash";
 import { Connection, Edge, ReactFlowInstance } from "reactflow";
+import { specialCharsRegex } from "../constants/constants";
 import { APITemplateType } from "../types/api";
 import { FlowType, NodeType } from "../types/flow";
 import { cleanEdgesType } from "../types/utils/reactflowUtils";
 import { toNormalCase } from "./utils";
-import { specialCharsRegex } from "../constants/constants";
 
 export function cleanEdges({
   flow: { edges, nodes },
@@ -234,33 +234,42 @@ export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) {
   return newName;
 }
 
-export function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>, inputValue: string | string[] | null, block: string)
+export function handleKeyDown(
-{
+  e: React.KeyboardEvent<HTMLInputElement>,
-  
+  inputValue: string | string[] | null,
+  block: string
+) {
   //condition to fix bug control+backspace on Windows/Linux
-  if (typeof inputValue === "string" && e.ctrlKey === true && e.key === "Backspace" && 
+  if (
-  (inputValue === block || inputValue?.charAt(inputValue?.length - 1) === ' '
+    typeof inputValue === "string" &&
-  || specialCharsRegex.test(inputValue?.charAt(inputValue?.length - 1))
+    e.ctrlKey === true &&
-  )) {
+    e.key === "Backspace" &&
+    (inputValue === block ||
+      inputValue?.charAt(inputValue?.length - 1) === " " ||
+      specialCharsRegex.test(inputValue?.charAt(inputValue?.length - 1)))
+  ) {
     e.preventDefault();
     e.stopPropagation();
   }
 
   //condition to fix bug control+backspace on Mac
-  if (typeof inputValue === "string" && e.metaKey === true && e.key === "Backspace" && 
+  if (
-  (inputValue === block || inputValue?.charAt(inputValue?.length - 1) === ' '
+    typeof inputValue === "string" &&
-  || specialCharsRegex.test(inputValue?.charAt(inputValue?.length - 1))
+    e.metaKey === true &&
-  )) {
+    e.key === "Backspace" &&
+    (inputValue === block ||
+      inputValue?.charAt(inputValue?.length - 1) === " " ||
+      specialCharsRegex.test(inputValue?.charAt(inputValue?.length - 1)))
+  ) {
     e.preventDefault();
     e.stopPropagation();
   }
 
-  
   if (e.ctrlKey === true && e.key === "Backspace" && inputValue === block) {
     e.preventDefault();
     e.stopPropagation();
   }
-};
+}
 
 export function getConnectedNodes(
   edge: Edge,