Inline edit

"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { ComponentProps, FocusEvent, KeyboardEvent } from "react";
import "./inline-edit.css";

/** What onSave may hand back: nothing to accept the value, or a message to keep editing and show it. */
type SaveResult = void | string | null | undefined;

export type InlineEditProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  /** What the value is, such as "Project name". Names the button and the input; not shown. */
  label: string;
  /** Controlled value. */
  value?: string;
  /** Uncontrolled starting value. */
  defaultValue?: string;
  /**
   * Called with the new text on Enter. Return or resolve a string to refuse it with that message;
   * a rejected promise shows its message. While a promise is pending the input is read-only.
   */
  onSave?: (value: string) => SaveResult | Promise<SaveResult>;
  /** Called when editing ends without saving. */
  onCancel?: () => void;
  /** Shown in place of an empty value, and as the input's placeholder. */
  placeholder?: string;
  /** What leaving the input does. */
  blurAction?: "save" | "cancel";
  /** Adds a hidden input with the saved value, so it submits with a form. */
  name?: string;
  maxLength?: number;
  disabled?: boolean;
};

function messageOf(reason: unknown) {
  return reason instanceof Error && reason.message ? reason.message : "Could not save. Try again.";
}

export function InlineEdit({
  label,
  value,
  defaultValue = "",
  onSave,
  onCancel,
  placeholder = "Empty",
  blurAction = "save",
  name,
  maxLength,
  disabled,
  className,
  ...rest
}: InlineEditProps) {
  const id = useId();
  const errorId = `${id}-error`;
  const [inner, setInner] = useState(defaultValue);
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState("");
  const [pending, setPending] = useState(false);
  const [error, setError] = useState("");
  const [status, setStatus] = useState("");
  const shown = value ?? inner;
  const display = useRef<HTMLButtonElement>(null);
  const input = useRef<HTMLInputElement>(null);
  /** Where focus goes after the next render: into the input, back to the button, or nowhere. */
  const focusNext = useRef<"input" | "display" | null>(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    return () => {
      mounted.current = false;
    };
  }, []);

  useEffect(() => {
    const target = focusNext.current;
    if (!target) return;
    focusNext.current = null;
    if (target === "input") {
      input.current?.focus();
      input.current?.select();
    } else if (!document.activeElement || document.activeElement === document.body) {
      // Only when focus was lost with the input; if the person has moved on, leave it there.
      display.current?.focus();
    }
  });

  function start() {
    if (disabled) return;
    setDraft(shown);
    setError("");
    setStatus("");
    setEditing(true);
    focusNext.current = "input";
  }

  function finish(next: string | null, refocus: boolean) {
    if (next !== null) {
      if (value === undefined) setInner(next);
      setStatus(`${label} saved`);
    }
    setEditing(false);
    setError("");
    setPending(false);
    if (refocus) focusNext.current = "display";
  }

  function cancel(refocus: boolean) {
    finish(null, refocus);
    onCancel?.();
  }

  async function save(refocus: boolean) {
    if (pending) return;
    const next = draft;
    if (next === shown) {
      finish(null, refocus);
      return;
    }
    let result: SaveResult;
    try {
      const returned = onSave?.(next);
      if (returned instanceof Promise) {
        setPending(true);
        setError("");
        result = await returned;
      } else {
        result = returned;
      }
    } catch (reason) {
      result = messageOf(reason);
    }
    if (!mounted.current) return;
    if (typeof result === "string" && result) {
      setPending(false);
      setError(result);
      // Back in the input so the message and the text are both in front of the person.
      if (refocus) focusNext.current = "input";
      return;
    }
    finish(next, refocus);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    if (event.key === "Enter") {
      // Never submits a surrounding form, and a held Enter from opening the editor does not save at once.
      event.preventDefault();
      if (event.repeat || event.nativeEvent.isComposing) return;
      void save(true);
    } else if (event.key === "Escape") {
      event.preventDefault();
      event.stopPropagation();
      if (!pending) cancel(true);
    }
  }

  function handleBlur(event: FocusEvent<HTMLInputElement>) {
    if (pending || event.currentTarget.contains(event.relatedTarget)) return;
    if (blurAction === "save") void save(false);
    else cancel(false);
  }

  return (
    <div
      {...rest}
      className={["eq-inline-edit", className].filter(Boolean).join(" ")}
      data-editing={editing || undefined}
      data-pending={pending || undefined}
    >
      {editing ? (
        <span className="eq-inline-edit-field">
          <input
            ref={input}
            className="eq-inline-edit-input"
            type="text"
            aria-label={label}
            aria-invalid={error ? true : undefined}
            aria-describedby={error ? errorId : undefined}
            aria-busy={pending || undefined}
            readOnly={pending}
            placeholder={placeholder}
            maxLength={maxLength}
            value={draft}
            size={Math.max(4, draft.length + 1)}
            onChange={(event) => {
              setDraft(event.target.value);
              if (error) setError("");
            }}
            onKeyDown={handleKeyDown}
            onBlur={handleBlur}
          />
          {pending && <span className="eq-inline-edit-spinner" aria-hidden="true" />}
        </span>
      ) : (
        <button
          ref={display}
          type="button"
          className="eq-inline-edit-display"
          aria-label={`Edit ${label}, ${shown || "empty"}`}
          disabled={disabled}
          onClick={start}
        >
          <span className="eq-inline-edit-text" data-empty={shown ? undefined : true}>
            {shown || placeholder}
          </span>
          <svg className="eq-inline-edit-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M10.5 3 13 5.5 6 12.5l-3 .5.5-3 7-7Z" />
          </svg>
        </button>
      )}
      <p className="eq-inline-edit-error" id={errorId} aria-live="polite">
        {editing ? error : ""}
      </p>
      <span className="eq-inline-edit-status" role="status">
        {status}
      </span>
      {name && <input type="hidden" name={name} value={shown} />}
    </div>
  );
}