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:
parent
26a71e1c36
commit
7653b5e2f0
20 changed files with 37 additions and 36 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
? {}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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" })}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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={() => {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"];
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue