"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

interface InlineEditProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSave"> {
  value?: string;
  defaultValue?: string;
  onSave?: (value: string) => void;
  placeholder?: string;
  inputClassName?: string;
  displayClassName?: string;
}

function InlineEdit({
  value,
  defaultValue = "",
  onSave,
  placeholder = "Click to edit",
  className,
  inputClassName,
  displayClassName,
  ...props
}: InlineEditProps) {
  const isControlled = value !== undefined;
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const [draft, setDraft] = React.useState(value ?? defaultValue);
  const [isEditing, setIsEditing] = React.useState(false);
  const inputRef = React.useRef<HTMLInputElement>(null);
  const cancelRef = React.useRef(false);

  const committedValue = isControlled ? value ?? "" : internalValue;

  React.useEffect(() => {
    if (!isEditing) {
      setDraft(committedValue);
    }
  }, [committedValue, isEditing]);

  React.useEffect(() => {
    if (isEditing) {
      inputRef.current?.focus();
      inputRef.current?.select();
    }
  }, [isEditing]);

  const handleStart = () => {
    setDraft(committedValue);
    setIsEditing(true);
  };

  const handleSave = () => {
    if (!isControlled) {
      setInternalValue(draft);
    }
    onSave?.(draft);
    setIsEditing(false);
  };

  const handleCancel = () => {
    cancelRef.current = true;
    setDraft(committedValue);
    setIsEditing(false);
  };

  const handleBlur = () => {
    if (!isEditing) {
      return;
    }
    if (cancelRef.current) {
      cancelRef.current = false;
      return;
    }
    handleSave();
  };

  return (
    <div className={cn("inline-flex", className)} {...props}>
      {isEditing ? (
        <input
          ref={inputRef}
          value={draft}
          onChange={(event) => setDraft(event.target.value)}
          onBlur={handleBlur}
          onKeyDown={(event) => {
            if (event.key === "Enter") {
              event.preventDefault();
              handleSave();
            }
            if (event.key === "Escape") {
              event.preventDefault();
              handleCancel();
            }
          }}
          className={cn(
            "min-w-[12rem] rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
            inputClassName
          )}
        />
      ) : (
        <button
          type="button"
          onClick={handleStart}
          className={cn(
            "min-w-[12rem] rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground shadow-sm transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
            displayClassName
          )}
          aria-label="Edit text"
        >
          {committedValue.length > 0 ? (
            committedValue
          ) : (
            <span className="text-muted-foreground">{placeholder}</span>
          )}
        </button>
      )}
    </div>
  );
}

export { InlineEdit };
Inline Edit

Dependencies

Files

Installation
