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>
This commit is contained in:
Igor Carvalho 2024-07-02 09:26:21 -03:00 committed by GitHub
commit 7653b5e2f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 37 additions and 36 deletions

View file

@ -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

View file

@ -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"

View file

@ -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">

View file

@ -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">

View file

@ -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">

View file

@ -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">

View file

@ -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
? {}

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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" })}

View file

@ -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}

View file

@ -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}

View file

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

View file

@ -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={() => {

View file

@ -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}

View file

@ -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"];

View file

@ -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 (

View file

@ -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

View file

@ -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