Editable Text

1"use client"
2 
3import * as React from "react"
4import { motion } from "motion/react"
5import { IconPencil, IconCheck, IconX } from "@tabler/icons-react"
6import { cn } from "@/registry/wise-ui/lib/utils"
7 
8interface EditableTextProps {
9  value: string
10  onChange: (value: string) => void
11  className?: string
12  placeholder?: string
13}
14 
15const EditableText = React.forwardRef<HTMLDivElement, EditableTextProps>(
16  ({ value, onChange, className, placeholder = "Click to edit..." }, ref) => {
17    const [isEditing, setIsEditing] = React.useState(false)
18    const [isHovered, setIsHovered] = React.useState(false)
19    const [draft, setDraft] = React.useState(value)
20    const [shimmerKey, setShimmerKey] = React.useState(0)
21    const [textWidth, setTextWidth] = React.useState<number | undefined>(
22      undefined
23    )
24    const inputRef = React.useRef<HTMLInputElement>(null)
25    const textRef = React.useRef<HTMLSpanElement>(null)
26    const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)
27 
28    React.useEffect(() => {
29      if (!isEditing) setDraft(value)
30    }, [value, isEditing])
31 
32    React.useEffect(() => {
33      if (isEditing) {
34        const timeout = setTimeout(() => {
35          inputRef.current?.focus()
36        }, 50)
37        return () => clearTimeout(timeout)
38      }
39    }, [isEditing])
40 
41    React.useEffect(() => {
42      return () => clearTimeout(blurTimeoutRef.current)
43    }, [])
44 
45    function startEditing() {
46      if (textRef.current) {
47        setTextWidth(textRef.current.offsetWidth)
48      }
49      setDraft(value)
50      setIsEditing(true)
51      setIsHovered(false)
52    }
53 
54    function save() {
55      clearTimeout(blurTimeoutRef.current)
56      onChange(draft)
57      setIsEditing(false)
58    }
59 
60    function cancel() {
61      clearTimeout(blurTimeoutRef.current)
62      setDraft(value)
63      setIsEditing(false)
64    }
65 
66    function handleKeyDown(e: React.KeyboardEvent) {
67      if (e.key === "Enter") save()
68      if (e.key === "Escape") cancel()
69    }
70 
71    function handleBlur() {
72      blurTimeoutRef.current = setTimeout(save, 150)
73    }
74 
75    return (
76      <div
77        ref={ref}
78        className={cn("relative inline-flex items-center", className)}
79        onMouseEnter={() => {
80          if (!isEditing) {
81            setIsHovered(true)
82            setShimmerKey((k) => k + 1)
83          }
84        }}
85        onMouseLeave={() => setIsHovered(false)}
86      >
87        {isEditing ? (
88          <div className="relative inline-flex items-center">
89// … truncated