Editable Handle

1"use client";
2 
3import type { HandleProps, Node } from "@xyflow/react";
4import { useOnSelectionChange } from "@xyflow/react";
5import { Edit2, Trash } from "lucide-react";
6import React, { useCallback, useState } from "react";
7import { Button } from "@/components/ui/button";
8import { Input } from "@/components/ui/input";
9import {
10	Popover,
11	PopoverContent,
12	PopoverTrigger,
13} from "@/components/ui/popover";
14import { Textarea } from "@/components/ui/textarea";
15import { cn } from "@/lib/utils";
16import { BaseHandle } from "@/registry/ui/flow/base-handle";
17 
18type HandleEditorProps = {
19	variant: "edit" | "create";
20	label?: string;
21	description?: string;
22	onSave: (newLabel: string, newDescription?: string) => boolean;
23	onCancel?: () => void;
24	align?: "start" | "end";
25	children: React.ReactNode;
26	showDescription?: boolean;
27};
28 
29const EditableHandleDialog = ({
30	variant,
31	label,
32	description,
33	onSave,
34	onCancel,
35	align = "start",
36	children,
37	showDescription = false,
38}: HandleEditorProps) => {
39	const [isOpen, setIsOpen] = useState(false);
40	const [localLabel, setLocalLabel] = useState(label ?? "");
41	const [localDescription, setLocalDescription] = useState(description);
42 
43	const handleSave = () => {
44		// Trim and validate the label has no spaces
45		const trimmedLabel = localLabel.trim();
46		if (trimmedLabel.includes(" ")) {
47			alert("Label cannot contain spaces");
48			return;
49		}
50		const success = onSave(trimmedLabel, localDescription?.trim());
51		if (success) {
52			setIsOpen(false);
53			if (variant === "create") {
54				reset();
55			}
56		}
57	};
58 
59	const handleCancel = () => {
60		setIsOpen(false);
61		if (variant === "create") {
62			reset();
63		}
64		onCancel?.();
65	};
66 
67	const reset = () => {
68		setLocalLabel("");
69		setLocalDescription("");
70	};
71 
72	return (
73		<Popover open={isOpen} onOpenChange={setIsOpen}>
74			<PopoverTrigger asChild>{children}</PopoverTrigger>
75			<PopoverContent className="w-80 p-4" align={align}>
76				<div className="flex flex-col gap-4">
77					<div className="flex flex-col gap-2">
78						<label htmlFor="label" className="text-sm font-medium">
79							Label
80						</label>
81						<Input
82							id="label"
83							value={localLabel}
84							onChange={(e) => setLocalLabel(e.target.value)}
85							placeholder="Enter label"
86							className="h-8"
87							autoFocus
88						/>
89					</div>
90					{showDescription && (
91						<div className="flex flex-col gap-2">
92							<label
93								htmlFor="description"
94								className="text-sm font-medium"
95							>
96								Description (optional)
97							</label>
98// … truncated