fix: ctrl f overriding browser ctrl f when editing node (#2358)

* Fix: Ctrl F overriding browser ctrl f when editing node

* Refactor: use noflow class instead of isThereModal function

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>

src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx

@@ -44,7 +44,7 @@ export default function OutputComponent({
 
   // ! DEACTIVATED UNTIL BETTER IMPLEMENTATION
   // return (
-  //   <div className="nocopy nopan nodelete nodrag noundo flex items-center gap-2">
+  //   <div className="noflow nopan nodelete nodrag  flex items-center gap-2">
   //     <DropdownMenu>
   //       <DropdownMenuTrigger asChild>
   //         <Button

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -13,7 +13,7 @@ export default function SingleAlert({
 
   return (
     <Transition
-      className="nocopy nowheel nopan nodelete nodrag noundo relative"
+      className="noflow nowheel nopan nodelete nodrag relative"
       show={show}
       appear={true}
       enter="transition-transform duration-500 ease-out"

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -36,7 +36,7 @@ export default function AlertDropdown({
       }}
     >
       <PopoverTrigger>{children}</PopoverTrigger>
-      <PopoverContent className="nocopy nowheel nopan nodelete nodrag noundo flex h-[500px] w-[500px] flex-col">
+      <PopoverContent className="noflow nowheel nopan nodelete nodrag flex h-[500px] w-[500px] flex-col">
         <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
           Notifications
           <div className="flex gap-3 pr-3">

src/frontend/src/alerts/error/index.tsx

@@ -40,7 +40,7 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="error-build-message nocopy nowheel nopan nodelete nodrag noundo"
+        className="error-build-message noflow nowheel nopan nodelete nodrag"
       >
         <div className="flex">
           <div className="flex-shrink-0">

src/frontend/src/alerts/notice/index.tsx

@@ -36,7 +36,7 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="nocopy nowheel nopan nodelete nodrag noundo mt-6 w-96 rounded-md bg-info-background p-4 shadow-xl"
+        className="noflow nowheel nopan nodelete nodrag mt-6 w-96 rounded-md bg-info-background p-4 shadow-xl"
       >
         <div className="flex">
           <div className="flex-shrink-0 cursor-help">

src/frontend/src/alerts/success/index.tsx

@@ -34,7 +34,7 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="success-alert nocopy nowheel nopan nodelete nodrag noundo"
+        className="success-alert noflow nowheel nopan nodelete nodrag"
       >
         <div className="flex">
           <div className="flex-shrink-0">

src/frontend/src/components/dropdownComponent/index.tsx

@@ -78,7 +78,7 @@ export default function Dropdown({
             <PopoverContentDropdown
               side="bottom"
               avoidCollisions={!!children}
-              className="nocopy nowheel nopan nodelete nodrag noundo p-0"
+              className="noflow nowheel nopan nodelete nodrag p-0"
               style={
                 children
                   ? {}

src/frontend/src/components/editFlowSettingsComponent/index.tsx

@@ -69,7 +69,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         </div>
         {setName ? (
           <Input
-            className="nopan nodelete nodrag noundo nocopy mt-2 font-normal"
+            className="nopan nodelete nodrag noflow mt-2 font-normal"
             onChange={handleNameChange}
             type="text"
             name="name"
@@ -129,7 +129,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
             )}
           </div>
           <Input
-            className="nopan nodelete nodrag noundo nocopy mt-2 font-normal"
+            className="nopan nodelete nodrag noflow mt-2 font-normal"
             onChange={handleEndpointNameChange}
             type="text"
             name="endpoint_name"

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

@@ -115,7 +115,7 @@ const CustomInputPopover = ({
         />
       </PopoverAnchor>
       <PopoverContentInput
-        className="nocopy nowheel nopan nodelete nodrag noundo p-0"
+        className="noflow nowheel nopan nodelete nodrag p-0"
         style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
         side="bottom"
         align="center"

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

@@ -89,7 +89,7 @@ const CustomInputPopoverObject = ({
         />
       </PopoverAnchor>
       <PopoverContentInput
-        className="nocopy nowheel nopan nodelete nodrag noundo p-0"
+        className="noflow nowheel nopan nodelete nodrag p-0"
         style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
         side="bottom"
         align="center"

src/frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 
 const buttonVariants = cva(
-  "nocopy nowheel nopan nodelete nodrag noundo inline-flex items-center gap-2 justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
+  "noflow nowheel nopan nodelete nodrag  inline-flex items-center gap-2 justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
   {
     variants: {
       variant: {
@@ -78,7 +78,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           className={
             !unstyled
               ? buttonVariants({ variant, size, className })
-              : cn(className, "nocopy nowheel nopan nodelete nodrag noundo")
+              : cn(className, "noflow nowheel nopan nodelete nodrag")
           }
           disabled={loading || disabled}
           {...(asChild ? {} : { type: type || "button" })}

src/frontend/src/components/ui/dialog-with-no-close.tsx

@@ -11,7 +11,7 @@ const DialogPortal = ({
   ...props
 }: DialogPrimitive.DialogPortalProps) => (
   <DialogPrimitive.Portal {...props}>
-    <div className="nopan nodelete nodrag noundo nocopy fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+    <div className="nopan nodelete nodrag noflow fixed inset-0 z-50 flex items-start justify-center sm:items-center">
       {children}
     </div>
   </DialogPrimitive.Portal>
@@ -25,7 +25,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "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",
+      "nopan nodelete nodrag noflow 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/dialog.tsx

@@ -12,7 +12,7 @@ const DialogPortal = ({
   ...props
 }: DialogPrimitive.DialogPortalProps) => (
   <DialogPrimitive.Portal {...props}>
-    <div className="nopan nodelete nodrag noundo nocopy fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+    <div className="nopan nodelete nodrag noflow fixed inset-0 z-50 flex items-start justify-center sm:items-center">
       {children}
     </div>
   </DialogPrimitive.Portal>
@@ -26,7 +26,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "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",
+      "nopan nodelete nodrag noflow 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

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

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

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

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

src/frontend/src/constants/constants.ts

@@ -849,7 +849,7 @@ export const LOCATIONS_TO_RETURN = ["/flow/", "/settings/"];
 export const MAX_BATCH_SIZE = 50;
 
 export const MODAL_CLASSES =
-  "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";
+  "nopan nodelete nodrag  noflow 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";
 
 export const ALLOWED_IMAGE_INPUT_EXTENSIONS = ["png", "jpg", "jpeg"];
 

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

@@ -188,7 +188,7 @@ export default function Page({
   }, []);
 
   function handleUndo(e: KeyboardEvent) {
-    if (!isWrappedWithClass(e, "noundo")) {
+    if (!isWrappedWithClass(e, "noflow")) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
       undo();
@@ -196,7 +196,7 @@ export default function Page({
   }
 
   function handleRedo(e: KeyboardEvent) {
-    if (!isWrappedWithClass(e, "noundo")) {
+    if (!isWrappedWithClass(e, "noflow")) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
       redo();
@@ -232,7 +232,7 @@ export default function Page({
       ? lastSelection?.nodes.length > 0
       : false;
     if (
-      !isWrappedWithClass(e, "nocopy") &&
+      !isWrappedWithClass(e, "noflow") &&
       (isWrappedWithClass(e, "react-flow__node") || multipleSelection)
     ) {
       e.preventDefault();
@@ -244,7 +244,7 @@ export default function Page({
   }
 
   function handleCut(e: KeyboardEvent) {
-    if (!isWrappedWithClass(e, "nocopy")) {
+    if (!isWrappedWithClass(e, "noflow")) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
       if (window.getSelection()?.toString().length === 0 && lastSelection) {
@@ -254,7 +254,7 @@ export default function Page({
   }
 
   function handlePaste(e: KeyboardEvent) {
-    if (!isWrappedWithClass(e, "nocopy")) {
+    if (!isWrappedWithClass(e, "noflow")) {
       e.preventDefault();
       (e as unknown as Event).stopImmediatePropagation();
       if (

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

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

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

@@ -31,6 +31,7 @@ import {
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { classNames, cn, isThereModal } from "../../../../utils/utils";
+import isWrappedWithClass from "../PageComponent/utils/is-wrapped-with-class";
 import ToolbarSelectItem from "./toolbarSelectItem";
 
 export default function NodeToolbarComponent({
@@ -77,6 +78,7 @@ export default function NodeToolbarComponent({
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
   const unselectAll = useFlowStore((state) => state.unselectAll);
   function handleMinimizeWShortcut(e: KeyboardEvent) {
+    if (isWrappedWithClass(e, "noflow")) return;
     e.preventDefault();
     if (isMinimal) {
       setShowState((show) => !show);
@@ -91,6 +93,7 @@ export default function NodeToolbarComponent({
   }
 
   function handleGroupWShortcut(e: KeyboardEvent) {
+    if (isWrappedWithClass(e, "noflow")) return;
     e.preventDefault();
     if (isGroup) {
       handleSelectChange("ungroup");
@@ -98,29 +101,29 @@ export default function NodeToolbarComponent({
   }
 
   function handleShareWShortcut(e: KeyboardEvent) {
+    if (isWrappedWithClass(e, "noflow") && !showconfirmShare) return;
     e.preventDefault();
-    if (isThereModal() && !showOverrideModal) return;
     if (hasApiKey || hasStore) {
       setShowconfirmShare((state) => !state);
     }
   }
 
   function handleCodeWShortcut(e: KeyboardEvent) {
+    if (isWrappedWithClass(e, "noflow") && !openModal) return;
     e.preventDefault();
-    if (isThereModal() && !openModal) return;
     if (hasCode) return setOpenModal((state) => !state);
     setNoticeData({ title: `You can not access ${data.id} code` });
   }
 
   function handleAdvancedWShortcut(e: KeyboardEvent) {
+    if (isWrappedWithClass(e, "noflow") && !showModalAdvanced) return;
     e.preventDefault();
-    if (isThereModal() && !showModalAdvanced) return;
     setShowModalAdvanced((state) => !state);
   }
 
   function handleSaveWShortcut(e: KeyboardEvent) {
+    if (isWrappedWithClass(e, "noflow") && !showOverrideModal) return;
     e.preventDefault();
-    if (isThereModal() && !showOverrideModal) return;
     if (isSaved) {
       setShowOverrideModal((state) => !state);
       return;
@@ -148,6 +151,7 @@ export default function NodeToolbarComponent({
   }
 
   function handleFreeze(e: KeyboardEvent) {
+    if (isWrappedWithClass(e, "noflow")) return;
     e.preventDefault();
     if (data.node?.flow) return;
     setNode(data.id, (old) => ({
@@ -180,7 +184,7 @@ export default function NodeToolbarComponent({
   useHotkeys(save, handleSaveWShortcut, { preventDefault });
   useHotkeys(docs, handleDocsWShortcut, { preventDefault });
   useHotkeys(download, handleDownloadWShortcut, { preventDefault });
-  useHotkeys(freeze, handleFreeze, { preventDefault });
+  useHotkeys(freeze, handleFreeze);
 
   const isMinimal = numberOfHandles <= 1 && numberOfOutputHandles <= 1;
   const isGroup = data.node?.flow ? true : false;
@@ -415,7 +419,7 @@ export default function NodeToolbarComponent({
 
   return (
     <>
-      <div className="w-26 nocopy nowheel nopan nodelete nodrag noundo h-10">
+      <div className="w-26 noflow nowheel nopan nodelete nodrag h-10">
         <span className="isolate inline-flex rounded-md shadow-sm">
           {hasCode && (
             <ShadTooltip