"use client"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { Input } from "@/components/registry/primitives/core/input"; import { Textarea } from "@/components/registry/primitives/core/textarea"; import { cn } from "@/lib/registry/cn"; import type { Field } from "@/lib/registry/sitecore"; type ActivationMode = "click" | "dblclick"; interface EditableContextValue { isEditing: boolean; value: string; placeholder: string; isDisabled: boolean; isPreviewFocusable: boolean; submitOnBlur: boolean; selectAllOnFocus: boolean; activationMode: ActivationMode; startEdit: () => void; cancelEdit: () => void; submitEdit: () => void; handleChange: (value: string) => void; inputRef: React.RefObject; } const EditableContext = React.createContext(null); function useEditableContext() { const context = React.useContext(EditableContext); if (!context) { throw new Error( "Editable compound components must be used within an Editable component", ); } return context; } // useEditable Hook interface UseEditableProps { /** The initial value (uncontrolled) */ defaultValue?: string; /** The controlled value */ value?: string; /** Optional Sitecore field for initial value */ field?: Field; /** Placeholder text when empty */ placeholder?: string; /** Whether the component is disabled */ isDisabled?: boolean; /** Whether clicking the preview starts editing */ isPreviewFocusable?: boolean; /** Whether to submit on blur */ submitOnBlur?: boolean; /** Whether to start in edit mode */ startWithEditView?: boolean; /** Whether to select all text on focus */ selectAllOnFocus?: boolean; /** Activation mode: 'click' or 'dblclick' */ activationMode?: ActivationMode; /** Callback when value is submitted */ onSubmit?: (value: string) => void; /** Callback when value changes */ onChange?: (value: string) => void; /** Callback when value changes (alias for onChange) */ onValueChange?: (value: string) => void; /** Callback when editing is cancelled */ onCancel?: (previousValue: string) => void; /** Callback when entering edit mode */ onEdit?: () => void; } interface UseEditableReturn extends EditableContextValue { /** Whether the editable is currently in edit mode */ editing: boolean; } function useEditable(props: UseEditableProps = {}): UseEditableReturn { const { defaultValue, field, value: controlledValue, placeholder = "Click to edit...", isDisabled = false, isPreviewFocusable = true, submitOnBlur = true, startWithEditView = false, selectAllOnFocus = true, activationMode = "click", onSubmit, onChange, onValueChange, onCancel, onEdit, } = props; const resolvedDefaultValue = defaultValue ?? field?.value ?? ""; const [isEditing, setIsEditing] = React.useState(startWithEditView); const [internalValue, setInternalValue] = React.useState(resolvedDefaultValue); const [previousValue, setPreviousValue] = React.useState(resolvedDefaultValue); const inputRef = React.useRef( null, ); // Support both controlled and uncontrolled modes const isControlled = controlledValue !== undefined; const value = isControlled ? controlledValue : internalValue; const startEdit = React.useCallback(() => { if (isDisabled) return; setPreviousValue(value); setIsEditing(true); onEdit?.(); }, [isDisabled, value, onEdit]); const cancelEdit = React.useCallback(() => { if (!isControlled) { setInternalValue(previousValue); } setIsEditing(false); onCancel?.(previousValue); }, [isControlled, previousValue, onCancel]); const submitEdit = React.useCallback(() => { setIsEditing(false); onSubmit?.(value); }, [value, onSubmit]); const handleChange = React.useCallback( (newValue: string) => { if (!isControlled) { setInternalValue(newValue); } onChange?.(newValue); onValueChange?.(newValue); }, [isControlled, onChange, onValueChange], ); // Focus input when entering edit mode React.useEffect(() => { if (isEditing && inputRef.current) { inputRef.current.focus(); if (selectAllOnFocus && inputRef.current instanceof HTMLInputElement) { inputRef.current.select(); } else if ( selectAllOnFocus && inputRef.current instanceof HTMLTextAreaElement ) { inputRef.current.select(); } } }, [isEditing, selectAllOnFocus]); return { isEditing, editing: isEditing, // Alias for Chakra compatibility value, placeholder, isDisabled, isPreviewFocusable, submitOnBlur, selectAllOnFocus, activationMode, startEdit, cancelEdit, submitEdit, handleChange, inputRef, }; } // Editable Root Component const editableVariants = cva("inline-flex flex-col gap-1", { variants: { size: { sm: "text-sm", md: "text-base", lg: "text-lg", }, }, defaultVariants: { size: "md", }, }); interface EditableProps extends Omit, "onChange" | "onSubmit">, VariantProps { /** The initial value (uncontrolled) */ defaultValue?: string; /** The controlled value */ value?: string; /** Optional Sitecore field for initial value */ field?: Field; /** Placeholder text when empty */ placeholder?: string; /** Whether the component is disabled */ isDisabled?: boolean; /** Whether clicking the preview starts editing */ isPreviewFocusable?: boolean; /** Whether to submit on blur */ submitOnBlur?: boolean; /** Whether to start in edit mode */ startWithEditView?: boolean; /** Whether to select all text on focus */ selectAllOnFocus?: boolean; /** Activation mode: 'click' or 'dblclick' */ activationMode?: ActivationMode; /** Callback when value is submitted */ onSubmit?: (value: string) => void; /** Callback when value changes */ onChange?: (value: string) => void; /** Callback when value changes (alias for onChange) */ onValueChange?: (value: string) => void; /** Callback when editing is cancelled */ onCancel?: (previousValue: string) => void; /** Callback when entering edit mode */ onEdit?: () => void; } function Editable({ className, size, defaultValue, field, value: controlledValue, placeholder = "Click to edit...", isDisabled = false, isPreviewFocusable = true, submitOnBlur = true, startWithEditView = false, selectAllOnFocus = true, activationMode = "click", onSubmit, onChange, onValueChange, onCancel, onEdit, children, ...props }: EditableProps) { const resolvedDefaultValue = defaultValue ?? field?.value ?? ""; const [isEditing, setIsEditing] = React.useState(startWithEditView); const [internalValue, setInternalValue] = React.useState(resolvedDefaultValue); const [previousValue, setPreviousValue] = React.useState(resolvedDefaultValue); const inputRef = React.useRef( null, ); // Support both controlled and uncontrolled modes const isControlled = controlledValue !== undefined; const value = isControlled ? controlledValue : internalValue; const startEdit = React.useCallback(() => { if (isDisabled) return; setPreviousValue(value); setIsEditing(true); onEdit?.(); }, [isDisabled, value, onEdit]); const cancelEdit = React.useCallback(() => { if (!isControlled) { setInternalValue(previousValue); } setIsEditing(false); onCancel?.(previousValue); }, [isControlled, previousValue, onCancel]); const submitEdit = React.useCallback(() => { setIsEditing(false); onSubmit?.(value); }, [value, onSubmit]); const handleChange = React.useCallback( (newValue: string) => { if (!isControlled) { setInternalValue(newValue); } onChange?.(newValue); onValueChange?.(newValue); }, [isControlled, onChange, onValueChange], ); // Focus input when entering edit mode React.useEffect(() => { if (isEditing && inputRef.current) { inputRef.current.focus(); if (selectAllOnFocus && inputRef.current instanceof HTMLInputElement) { inputRef.current.select(); } else if ( selectAllOnFocus && inputRef.current instanceof HTMLTextAreaElement ) { inputRef.current.select(); } } }, [isEditing, selectAllOnFocus]); const contextValue: EditableContextValue = { isEditing, value, placeholder, isDisabled, isPreviewFocusable, submitOnBlur, selectAllOnFocus, activationMode, startEdit, cancelEdit, submitEdit, handleChange, inputRef, }; return (

{children}

); } // EditableRootProvider Component interface EditableRootProviderProps extends Omit, "onChange" | "onSubmit">, VariantProps { value: EditableContextValue; } function EditableRootProvider({ className, size, value, children, ...props }: EditableRootProviderProps) { return (

{children}

); } // EditablePreview Component const editablePreviewVariants = cva( [ "cursor-text rounded-md px-2 py-1 transition-colors", "hover:bg-neutral-background", "min-h-[2rem] flex items-center", ].join(" "), { variants: { isEmpty: { true: "text-muted-foreground italic", false: "text-foreground", }, }, defaultVariants: { isEmpty: false, }, }, ); interface EditablePreviewProps extends React.HTMLAttributes {} function EditablePreview({ className, ...props }: EditablePreviewProps) { const { isEditing, value, placeholder, isDisabled, isPreviewFocusable, activationMode, startEdit, } = useEditableContext(); if (isEditing) { return null; } const isEmpty = !value || value.trim() === ""; const displayValue = isEmpty ? placeholder : value; const handleClick = activationMode === "click" && isPreviewFocusable && !isDisabled ? startEdit : undefined; const handleDoubleClick = activationMode === "dblclick" && isPreviewFocusable && !isDisabled ? startEdit : undefined; return ( // biome-ignore lint/a11y/noStaticElementInteractions: inline-flowing editable text preview must stay a ; it carries role="button" + tabIndex + Enter/Space keyboard handling when focusable. { if ( isPreviewFocusable && !isDisabled && (e.key === "Enter" || e.key === " ") ) { e.preventDefault(); startEdit(); } }} className={cn( editablePreviewVariants({ isEmpty }), isDisabled && "cursor-not-allowed opacity-50", !isPreviewFocusable && "cursor-default hover:bg-transparent", className, )} {...props} > {displayValue} ); } // EditableInput Component interface EditableInputProps extends Omit, "value" | "onChange"> {} function EditableInput({ className, ...props }: EditableInputProps) { const { isEditing, value, placeholder, isDisabled, submitOnBlur, handleChange, submitEdit, cancelEdit, inputRef, } = useEditableContext(); if (!isEditing) { return null; } return ( } data-slot="editable-input" value={value} placeholder={placeholder} disabled={isDisabled} onChange={(e) => handleChange(e.target.value)} onBlur={() => { if (submitOnBlur) { submitEdit(); } }} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); submitEdit(); } else if (e.key === "Escape") { e.preventDefault(); cancelEdit(); } }} className={cn( "w-full border-2 bg-transparent transition-colors selection:bg-primary selection:text-primary-foreground focus-visible:border-primary focus-visible:ring-0 dark:bg-transparent", className, )} {...props} /> ); } // EditableTextarea Component interface EditableTextareaProps extends Omit, "value" | "onChange"> {} function EditableTextarea({ className, ...props }: EditableTextareaProps) { const { isEditing, value, placeholder, isDisabled, submitOnBlur, handleChange, submitEdit, cancelEdit, inputRef, } = useEditableContext(); if (!isEditing) { return null; } return (

}
      data-slot="editable-textarea"
      value={value}
      placeholder={placeholder}
      disabled={isDisabled}
      onChange={(e) => handleChange(e.target.value)}
      onBlur={() => {
        if (submitOnBlur) {
          submitEdit();
        }
      }}
      onKeyDown={(e) => {
        // For textarea, Ctrl/Cmd + Enter submits, Escape cancels
        if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
          e.preventDefault();
          submitEdit();
        } else if (e.key === "Escape") {
          e.preventDefault();
          cancelEdit();
        }
      }}
      className={cn(
        "w-36 border-2 bg-transparent transition-colors selection:bg-primary selection:text-primary-foreground focus-visible:border-primary focus-visible:ring-0 dark:bg-transparent",
        className,
      )}
      {...props}
    />
  );
}

// EditableControl Component

interface EditableControlProps extends React.HTMLAttributes<HTMLDivElement> {}

function EditableControl({
  className,
  children,
  ...props
}: EditableControlProps) {
  return (
    <div
      data-slot="editable-control"
      className={cn("inline-flex items-center gap-1", className)}
      {...props}
    >
      {children}
    </div>
  );
}

// EditableEditTrigger Component

interface EditableEditTriggerProps
  extends React.ComponentProps<typeof Button> {}

function EditableEditTrigger({
  className,
  children,
  ...props
}: EditableEditTriggerProps) {
  const { isEditing, isDisabled, startEdit } = useEditableContext();

if (isEditing) {
    return null;
  }

return (
    <Button
      data-slot="editable-edit-trigger"
      type="button"
      variant="ghost"
      size="sm"
      disabled={isDisabled}
      onClick={startEdit}
      className={cn(className)}
      {...props}
    >
      {children ?? "Edit"}
    </Button>
  );
}

// EditableCancelTrigger Component

interface EditableCancelTriggerProps
  extends React.ComponentProps<typeof Button> {}

function EditableCancelTrigger({
  className,
  children,
  ...props
}: EditableCancelTriggerProps) {
  const { isEditing, cancelEdit } = useEditableContext();

if (!isEditing) {
    return null;
  }

return (
    <Button
      data-slot="editable-cancel-trigger"
      type="button"
      variant="ghost"
      size="sm"
      onClick={cancelEdit}
      className={cn(className)}
      {...props}
    >
      {children ?? "Cancel"}
    </Button>
  );
}

// EditableSubmitTrigger Component

interface EditableSubmitTriggerProps
  extends React.ComponentProps<typeof Button> {}

function EditableSubmitTrigger({
  className,
  children,
  ...props
}: EditableSubmitTriggerProps) {
  const { isEditing, submitEdit } = useEditableContext();

if (!isEditing) {
    return null;
  }

return (
    <Button
      data-slot="editable-submit-trigger"
      type="button"
      variant="default"
      size="sm"
      onClick={submitEdit}
      className={cn(className)}
      {...props}
    >
      {children ?? "Save"}
    </Button>
  );
}

export {
  type ActivationMode,
  Editable,
  EditableCancelTrigger,
  type EditableContextValue,
  EditableControl,
  EditableEditTrigger,
  EditableInput,
  EditablePreview,
  type EditableProps,
  EditableRootProvider,
  type EditableRootProviderProps,
  EditableSubmitTrigger,
  EditableTextarea,
  editablePreviewVariants,
  editableVariants,
  type UseEditableProps,
  type UseEditableReturn,
  useEditable,
  useEditableContext,
};
</article></body></html>

Editable

Showcase

Editable