Prevent Default on Ctrl + Backspace in ReactFlow (#706)

src/frontend/src/App.tsx

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

src/frontend/src/components/AccordionComponent/index.tsx

@@ -32,6 +32,13 @@ export default function AccordionComponent({
     value === "" ? setValue(keyValue) : setValue("");
   }
 
+  const handleKeyDown = (event) => {
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
   return (
     <>
       <Accordion
@@ -39,6 +46,7 @@ export default function AccordionComponent({
         className="w-full"
         value={value}
         onValueChange={setValue}
+        onKeyDown={handleKeyDown}
       >
         <AccordionItem value={keyValue} className="border-b">
           <AccordionTrigger

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

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

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

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

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

@@ -5,6 +5,7 @@ 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,
@@ -39,6 +40,12 @@ export default function InputListComponent({
                 newInputList[idx] = e.target.value;
                 onChange(newInputList);
               }}
+              onKeyDown={(e) => {
+                if (e.ctrlKey && e.key === "Backspace") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+              }}
             />
             {idx === value.length - 1 ? (
               <button

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

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

src/frontend/src/constants/constants.ts

@@ -29,6 +29,7 @@ export const INVALID_CHARACTERS = [
  */
 
 export const regexHighlight = /\{([^}]+)\}/g;
+export const specialCharsRegex = /[!@#$%^&*()\-_=+[\]{}|;:'",.<>/?\\`´]/;
 
 export const programmingLanguages: languageMap = {
   javascript: ".js",

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

@@ -22,6 +22,7 @@ import {
   varHighlightHTML,
 } from "../../utils/utils";
 import BaseModal from "../baseModal";
+import { handleKeyDown } from "../../utils/reactflowUtils";
 
 export default function GenericModal({
   field_name = "",
@@ -213,6 +214,9 @@ export default function GenericModal({
                   checkVariables(e.target.value);
                 }}
                 placeholder="Type message here."
+                onKeyDown={(e) => {
+                  handleKeyDown(e, inputValue, '');
+                }}
               />
             ) : type === TypeModal.PROMPT && !isEdit ? (
               <TextAreaContentView />
@@ -225,6 +229,9 @@ export default function GenericModal({
                   setInputValue(e.target.value);
                 }}
                 placeholder="Type message here."
+                onKeyDown={(e) => {
+                  handleKeyDown(e, value, '');
+                }}
               />
             ) : (
               <></>

src/frontend/src/utils/reactflowUtils.ts

@@ -1,9 +1,10 @@
 import _ from "lodash";
-import { Connection, ReactFlowInstance } from "reactflow";
+import { Connection, Edge, ReactFlowInstance } from "reactflow";
 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 },
@@ -232,3 +233,40 @@ export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) {
 
   return newName;
 }
+
+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" && 
+  (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" && 
+  (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,
+  nodes: Array<NodeType>
+): Array<NodeType> {
+  const sourceId = edge.source;
+  const targetId = edge.target;
+  return nodes.filter((node) => node.id === targetId || node.id === sourceId);
+}

src/frontend/src/utils/styleUtils.ts

@@ -65,7 +65,6 @@ import {
   XCircle,
   Zap,
 } from "lucide-react";
-import { Edge, Node } from "reactflow";
 import { AirbyteIcon } from "../icons/Airbyte";
 import { AnthropicIcon } from "../icons/Anthropic";
 import { BingIcon } from "../icons/Bing";
@@ -277,8 +276,3 @@ export const nodeIconsLucide = {
   MessageSquare,
   MoreHorizontal,
 };
-export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
-  const sourceId = edge.source;
-  const targetId = edge.target;
-  return nodes.filter((node) => node.id === targetId || node.id === sourceId);
-}