Editable

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Textarea } from "@/components/ui/textarea";
6import { cn } from "@/lib/utils";
7import { type VariantProps, cva } from "class-variance-authority";
8import * as React from "react";
9 
10type ActivationMode = "click" | "dblclick";
11 
12interface EditableContextValue {
13  isEditing: boolean;
14  value: string;
15  placeholder: string;
16  isDisabled: boolean;
17  isPreviewFocusable: boolean;
18  submitOnBlur: boolean;
19  selectAllOnFocus: boolean;
20  activationMode: ActivationMode;
21  startEdit: () => void;
22  cancelEdit: () => void;
23  submitEdit: () => void;
24  handleChange: (value: string) => void;
25  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
26}
27 
28const EditableContext = React.createContext<EditableContextValue | null>(null);
29 
30function useEditableContext() {
31  const context = React.useContext(EditableContext);
32  if (!context) {
33    throw new Error(
34      "Editable compound components must be used within an Editable component",
35    );
36  }
37  return context;
38}
39 
40// useEditable Hook
41interface UseEditableProps {
42  /** The initial value (uncontrolled) */
43  defaultValue?: string;
44  /** The controlled value */
45  value?: string;
46  /** Placeholder text when empty */
47  placeholder?: string;
48  /** Whether the component is disabled */
49  isDisabled?: boolean;
50  /** Whether clicking the preview starts editing */
51  isPreviewFocusable?: boolean;
52  /** Whether to submit on blur */
53  submitOnBlur?: boolean;
54  /** Whether to start in edit mode */
55  startWithEditView?: boolean;
56  /** Whether to select all text on focus */
57  selectAllOnFocus?: boolean;
58  /** Activation mode: 'click' or 'dblclick' */
59  activationMode?: ActivationMode;
60  /** Error message to display */
61  hasError?: boolean;
62  /** Callback when value is submitted */
63  onSubmit?: (value: string) => void;
64  /** Callback when value changes */
65  onChange?: (value: string) => void;
66  /** Callback when value changes (alias for onChange) */
67  onValueChange?: (value: string) => void;
68  /** Callback when editing is cancelled */
69  onCancel?: (previousValue: string) => void;
70  /** Callback when entering edit mode */
71  onEdit?: () => void;
72}
73 
74interface UseEditableReturn extends EditableContextValue {
75  /** Whether the editable is currently in edit mode */
76  editing: boolean;
77}
78 
79function useEditable(props: UseEditableProps = {}): UseEditableReturn {
80  const {
81    defaultValue = "",
82// … truncated